QT webengine显示HTML简单示例

概述

 本文主要讲述QT webengine显示HTML简单示例，包含自己的一点理解及提示吗，偏向于萌新导向。

从QT5.5开始，webengine开始替代webkit，但是这不意味着高版本QT无法使用webkit，或者低版本无法使用webengine，可以通过编译对应包源代码的方式进行，搜索编译源码模块webengine/webkit,这方面参考资料较多，本文不在此赘述。

在Windows环境下，QT自带的编译器MinGW是不支持webengine的，需要额外下载Visual Studio，采用MSVC编译方式进行。同时要注意QT版本与VS版本的配合问题，如QT5.9.0版本仅支持MSVC2013，2015，2017三个版本，建议先查询，再下载适配版本VS。

在LINUX环境下则不受影响，可采用MinGW。

使用准备

需要在pro文件中添加

QT       += core gui webenginewidgets 

在mainwindow.h中添加 

#include <QWebEngineView>

QWebEngineView *view;  //声明view

在mainwindow.cpp中添加

    view = new QWebEngineView(this);
    view->load(QUrl(QStringLiteral("E:/wwmail/vue_test/dist/w.html")));
    view->showMaximized();

即可完成初步展示，其中QUrl中填写你期望展示的页面内容，本文中填写了本地自建页面

谷歌开发者界面

QT 5.11 新引入

void QWebEnginePage:: setDevToolsPage ( QWebEnginePage * devToolsPage )

从此可以实现在qt中打开谷歌开发者工具，更方便在qt中实时查看HTML页面的运行情况，在我的开发经历中占了很大比重，特此说明一下。

    QWebEngineView * view= new QWebEngineView();
    QWebEngineView * view1= new QWebEngineView();
    view->setUrl(QUrl("http://www.baidu.com"));
    view->page()->setDevToolsPage(view1->page());
    view->show();

使用中新建一个QWebEngineView，然后使用setDevToolsPage将新建QWebEngineView设置为开发者工具。