本篇簡介
本篇的小目標(biāo)：
- 借助Qt自家的QWebEngineView實(shí)現(xiàn)瀏覽器的基本功能：輸入地址訪問頁面和刷新頁面
- 定制QWebEngineView的ContextMenu，實(shí)現(xiàn)Inspector調(diào)試界面的調(diào)用
QWebEngineView基礎(chǔ)
首先在所創(chuàng)建項(xiàng)目的.pro配置中添加webenginewidgets模塊：
QT += webenginewidgets
然后在主窗口初始化時(shí)創(chuàng)建QWebEngineView對象：
m_webView = new QWebEngineView(this);
QStackedLayout* layout = new QStackedLayout(ui->frame);
ui->frame->setLayout(layout);
layout->addWidget(m_webView);
界面上有一個(gè)輸入地址的控件(adressEdit)和兩個(gè)按鈕——訪問按鈕（btnGo）和刷新按鈕(btnRefresh)，使用QWebEngineView的load和reload方法，可以很方便地實(shí)現(xiàn)這兩個(gè)按鈕的功能：
connect(ui->btnGo, &QPushButton::clicked, this, [this]() {
QString url = ui->addressEdit->text();
if (!url.isEmpty())
{
m_webView->load(url);
}
});
connect(ui->btnRefresh, &QPushButton::clicked, this, [this]() {
m_webView->reload();
});
這樣一個(gè)簡單的瀏覽器就實(shí)現(xiàn)好了，訪問一下百度看看效果：
實(shí)現(xiàn)Inspector調(diào)試界面
在谷歌瀏覽器中按一下F12可以調(diào)出功能強(qiáng)大的調(diào)試界面，QWebEngine中也包含了這個(gè)功能。這里我們稍微簡化一下，改成在頁面上點(diǎn)擊右鍵并選擇"Inspect"，即可呼出調(diào)試界面。
首先需要設(shè)置一個(gè)環(huán)境變量QTWEBENGINE_REMOTE_DEBUGGING來指定調(diào)試頁面所使用的端口號。例如，將7777端口設(shè)為調(diào)試端口，可在主窗口初始化方法的最開頭添加下面的代碼：
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "7777");
如果設(shè)置成功，在終端上會(huì)打印如下提示：
Remote debugging server started successfully. Try pointing a Chromium-based browser to http://127.0.0.1:7777
然后實(shí)現(xiàn)一個(gè)QDialog作為Inspector的界面，里面內(nèi)嵌另一個(gè)QWebEngineView，這個(gè)view專門用來加載調(diào)試頁面：
Inspector::Inspector(QWidget *parent) :
QDialog(parent),
ui(new Ui::Inspector)
{
ui->setupUi(this);
connect(ui->btnClose, &QPushButton::clicked, this, [this](){
hide();
});
m_webView = new QWebEngineView(this);
QStackedLayout* layout = new QStackedLayout(ui->frame);
ui->frame->setLayout(layout);
layout->addWidget(m_webView);
m_webView->load(QUrl("http://localhost:7777"));
QDialog::show();
}
因?yàn)檫@里的關(guān)閉按鈕實(shí)際上只是把界面隱藏起來了，所以重載一下show方法，保證每次打開時(shí)調(diào)試的頁面是最新的：
void Inspector::show()
{
m_webView->reload();
QDialog::show();
}
最后在主窗口初始化時(shí)修改一下QWebEngineViewContextMenu設(shè)置。因?yàn)镼WebEngineView繼承了QWidget，所以可以使用與處理QWidget類似的方式定制ContextMenu：
m_webView->setContextMenuPolicy(Qt::CustomContextMenu);
m_inspector = NULL;
connect(m_webView, &QWidget::customContextMenuRequested, this, [this]() {
QMenu* menu = new QMenu(this);
QAction* action = menu->addAction("Inspect");
connect(action, &QAction::triggered, this, [this](){
if(m_inspector == NULL)
{
m_inspector = new Inspector(this);
}
else
{
m_inspector->show();
}
});
menu->exec(QCursor::pos());
});
這樣一個(gè)簡單的Inspector就實(shí)現(xiàn)完成了，試試效果：
對于QWebEngineView的基礎(chǔ)使用就先介紹到這里。下一節(jié)會(huì)嘗試在此基礎(chǔ)上借助QWebChannel實(shí)現(xiàn)瀏覽器與頁面的相互通信。
