本篇簡介
本篇的小目標：
- 借助Qt自家的QWebEngineView實現瀏覽器的基本功能：輸入地址訪問頁面和刷新頁面
- 定制QWebEngineView的ContextMenu，實現Inspector調試界面的調用
QWebEngineView基礎
首先在所創建項目的.pro配置中添加webenginewidgets模塊：
QT += webenginewidgets
然后在主窗口初始化時創建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方法，可以很方便地實現這兩個按鈕的功能：
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();
});
這樣一個簡單的瀏覽器就實現好了，訪問一下百度看看效果：
browser_basic.png
實現Inspector調試界面
在谷歌瀏覽器中按一下F12可以調出功能強大的調試界面，QWebEngine中也包含了這個功能。這里我們稍微簡化一下，改成在頁面上點擊右鍵并選擇"Inspect"，即可呼出調試界面。
首先需要設置一個環境變量QTWEBENGINE_REMOTE_DEBUGGING來指定調試頁面所使用的端口號。例如，將7777端口設為調試端口，可在主窗口初始化方法的最開頭添加下面的代碼：
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "7777");
如果設置成功，在終端上會打印如下提示：
Remote debugging server started successfully. Try pointing a Chromium-based browser to http://127.0.0.1:7777
然后實現一個QDialog作為Inspector的界面，里面內嵌另一個QWebEngineView，這個view專門用來加載調試頁面：
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();
}
因為這里的關閉按鈕實際上只是把界面隱藏起來了，所以重載一下show方法，保證每次打開時調試的頁面是最新的：
void Inspector::show()
{
m_webView->reload();
QDialog::show();
}
最后在主窗口初始化時修改一下QWebEngineViewContextMenu設置。因為QWebEngineView繼承了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就實現完成了，試試效果：
inspector.png
對于QWebEngineView的基礎使用就先介紹到這里。下一節會嘗試在此基礎上借助QWebChannel實現瀏覽器與頁面的相互通信。
