本篇簡介
本篇的小目標(biāo)：
- 借助Qt自家的QWebEngineView實(shí)現(xiàn)瀏覽器的基本功能：輸入地址訪問頁面和刷新頁面
- 定制QWebEngineView的ContextMenu俗壹，實(shí)現(xiàn)Inspector調(diào)試界面的調(diào)用
QWebEngineView基礎(chǔ)
首先在所創(chuàng)建項目的.pro配置中添加webenginewidgets模塊：
QT += webenginewidgets
然后在主窗口初始化時創(chuàng)建QWebEngineView對象：
m_webView = new QWebEngineView(this);
QStackedLayout* layout = new QStackedLayout(ui->frame);
ui->frame->setLayout(layout);
layout->addWidget(m_webView);
界面上有一個輸入地址的控件(adressEdit)和兩個按鈕——訪問按鈕（btnGo）和刷新按鈕(btnRefresh)窑业，使用QWebEngineView的load和reload方法蓉驹，可以很方便地實(shí)現(xiàn)這兩個按鈕的功能：
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();
});
這樣一個簡單的瀏覽器就實(shí)現(xiàn)好了菇绵，訪問一下百度看看效果：
實(shí)現(xiàn)Inspector調(diào)試界面
在谷歌瀏覽器中按一下F12可以調(diào)出功能強(qiáng)大的調(diào)試界面妆兑，QWebEngine中也包含了這個功能色建。這里我們稍微簡化一下右钾，改成在頁面上點(diǎn)擊右鍵并選擇"Inspect"鹉究，即可呼出調(diào)試界面椭懊。
首先需要設(shè)置一個環(huán)境變量QTWEBENGINE_REMOTE_DEBUGGING來指定調(diào)試頁面所使用的端口號诸蚕。例如，將7777端口設(shè)為調(diào)試端口氧猬，可在主窗口初始化方法的最開頭添加下面的代碼：
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "7777");
如果設(shè)置成功背犯，在終端上會打印如下提示：
Remote debugging server started successfully. Try pointing a Chromium-based browser to http://127.0.0.1:7777
然后實(shí)現(xiàn)一個QDialog作為Inspector的界面，里面內(nèi)嵌另一個QWebEngineView盅抚，這個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方法，保證每次打開時調(diào)試的頁面是最新的：
void Inspector::show()
{
m_webView->reload();
QDialog::show();
}
最后在主窗口初始化時修改一下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());
});
這樣一個簡單的Inspector就實(shí)現(xiàn)完成了，試試效果：
對于QWebEngineView的基礎(chǔ)使用就先介紹到這里禁熏。下一節(jié)會嘗試在此基礎(chǔ)上借助QWebChannel實(shí)現(xiàn)瀏覽器與頁面的相互通信。
