Qt|使用 QWebEngineView 加载 HTML 使用及问题

前一段时间项目中用到了加载 html 的功能，也遇到了一些比较奇奇怪怪的问题。

我的开发版本以及环境：VS2017 + Qt5.14.2

遇到的问题如下：

1：加载自己写的本地的 html 页面时，为什么第一次会很慢？

2：在一些电脑上加载 html 时，为什么会出现黑屏现象？

针对上述两个问题，开展我对 QWebEngineVie 控件的使用以及理解吧！

1：添加控件

我们需要从 QtDesigner 中拖出一个承载 html 的控件，叫做 QWebEngineView。

2：加载本地 html

使用 QWebEngineView 加载 html 的方法有三种，这里我选中的是下面这种方法：

QWebEngineView::setUrl

那么，接下来是具体的加载方式：

QString qsHtmlPathRobot = QCoreApplication::applicationDirPath() + "/test/test.html"; QUrl baseUrlRobot = "file:///" + qsHtmlPathRobot;QFile fileRobot(qsHtmlPathRobot);if (!fileRobot.open(QIODevice::ReadOnly)){    return; }fileRobot.close();ui.webRobot->setUrl(baseUrlRobot);

在加载 html 时，我们最好的方法就是先判断该路径是否存在，为了安全起见而已。

到这里，我们就会遇到开篇说的第一个问题，加载 html 会很慢。

因为 html 页面是自己写的自定义页面，在加载该页面时内容较多，比较慢，所以，我会将加载这部分放到了构造函数中。提前加载，解决加载慢的问题。

但是，又会出现另一种情况，如果该窗口是隐藏状态，即使是提前加载了 html 页面，也不会显示出来的。

不知道大家有没有遇到过这种问题，在我所用的开发环境中是出现的。

为了避免这个问题，当我加载这承载 html 的 QWidget 类时，将该类做了一些小改动

QtHtmlWidget *pHtml = new QHtmlWidget;pHtml->setGeometry(-100, -100, 10, 10);pHtml->show();

将该窗口的位置移动到程序中不可见的位置，这样就解决了问题 1 的情况。

3：Qt 触发 HTML 消息

在我用到的功能中，我需要点击一个按钮，来更改 html 上显示的数据，那么用到的函数是：

runJavaScript

具体的使用情况：

ui.webHtml->page()->runJavaScript(qsHtmlParamter);

其中，qsHtmlParamter 是需要传入的参数。

4：HTML 触发 QT 响应

在使用该功能时，与上述 3 中的功能会有一些不同。

QT 在与 HTML 交互中，Qt 用到了一个叫做：QWebChannels 的类。

HTML 中需要用到的是：qwebchannel.js

具体的 HTML 的发送这里不在进行详细解释，那么，在 Qt 这边我们该如何接收发送的消息呢？

首先，需要定义 QWebChannels 类来进行接收

#include <QWebChannel>QWebChannel* m_pWebChannel;m_pWebChannel = new QWebChannel(this);//注册一个对象，html端通过此名称向PC端发送消息m_pWebChannel->registerObject(QString("qtClicked"), this);ui.webRobot->page()->setWebChannel(m_pWebChannel);

这里我定义的对象名称叫做"qtClicked"，大家可以根据实际项目情况，与 WEB 端共同商量定义的。

定义成功之后，下面是最重要的一点，我们想要接收 HTML 的触发消息内容，在 Qt 这里，必须要与 HTML 的发送消息名称一致。

假设，HTML 设置的发送函数名叫做，“sendMsg”，那么在 QT 端也必须要创建一个叫做该名称的函数，写法按照下面的格式进行。

public slots:	void sendMsg(const QString& jsMsg); //接收html的消息

最最重要的是：一定要记得写 public slots，否则 QT 端无法接收到消息。

到这里，简单的两端通讯已经完成了，操作起来很简单。

那么，我遇到的第二个问题该如何解决呢？

当我的功能开发完成之后，进入到测试阶段时，发现在有些电脑上 html 页面居然是黑屏，真的是无从下手，如果有遇到与我同样的问题的伙伴们，我来把解决方法推荐给大家。

在 main.cpp 中添加以下这段话，就可以完美解决该问题啦~

QApplication::setAttribute(Qt::AA_UseOpenGLES);

添加的方式，如下图所示：

qt quick 版本大于 5.3 时才可以使用,强制使用 open gl ES2.0 的版本

如果硬件不是很老,尽量不要禁用硬件加速

今天的更新到这里就结束了~

如有问题，我们可以相互学习，共同进步！

我是中国好公民 st，一名 C++开发程序媛~