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

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

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

遇到的问题如下:

1:加载自己写的本地的html页面时,为什么第一次会很慢?

2:在一些电脑上加载html时,为什么会出现黑屏现象?

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

功能

1:添加控件

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

Qt|使用QWebEngineView控件加载HTML使用及问题_第1张图片

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|使用QWebEngineView控件加载HTML使用及问题_第2张图片

qt quick版本大于 5.3时才可以使用,强制使用open gl ES2.0的版本
如果硬件不是很老,尽量不要禁用硬件加速

今天的更新就到这里喽~

我是糯诺诺米团,一名C++开发程序媛~

你可能感兴趣的:(Qt,qt)