Qt中使用QWebEngineView控件加载HTML使用及问题

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

前一段时间项目中用到了加载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* 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的版本

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

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

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