qt5 中 qwebengineview 的使用，让桌面客户端和 web 端友好通信 -ag凯发k8国际
一、本文结构
二、基本配置，工程搭建
（1）qt 安装时要安装 web 开发组件，本案例采用 qt5.9.6 vs2015 开发环境。
（2）新建 qt gui 工程要首先勾选以下三个组件
（3）qwebchannel.js文件，安装qt后在安装文件夹下面可以搜索找到
（4）本案例代码文件结构
其中ui文件的简单布局如下：
其中，左侧为 qwebengineview 控件，右侧一个调用 js 函数的按钮，一个获取 js 返回值的按钮，另一个为操作结果显示的 label 控件。
三、加载 html 文件
找到html文件位置，qwebengineview的load()函数可以加载html文件显示，形式如下：
m_pwebview->load(q);
四、qt 调用 html 中的 javascript 函数
假设html中有js函数如下：
// 添加一个圆形覆盖物function addcircle(){var point = new bmap.point(116.404, 39.915);var circle = new bmap.circle(point, 6000, { strokecolor: "red", strokeweight: 5, strokeopacity: 0.3 }); //创建圆map.addoverlay(circle); //增加圆}在qt桌面端，只需要用一个字符串把 js 函数名称弄下来就行啦，然后通过执行 runjavascript 函数就可以对 html 操作了，操作方式如下：
qstring jsstr = qstring("addcircle()"); m_pwebview->page()->runjavascript(jsstr);五、qt 界面窗口获取 html 中 js 函数的返回值
只能调它的 js 函数还不行啊，我想知道它执行完返回给我啥了，那这个时候就需要看看这个 runjavascript 函数了：
void runjavascript(const qstring& scriptsource, const qwebenginecallback如上，这个调用是异步的，这个可以传个回调函数进去，执行结果可以直接在回调函数来处理。
在本 demo 中直接用 lambda 函数处理了，如下：
六、web 端消息主动通知到 qt 界面。
以上都是 qt 端主动操作 web 端的对象、函数等，那 web 端要发某个消息给 qt 端，怎么处理呢？
用 qwebchannel，基本使用方式如下：
基本定义完成后，我们需要定义一个槽函数，接收 web 端发的消息，定义基本格式如下：
public slots: // 一定要这样定义哦，否则会收不到消息void recievejsmessage(const qstring& jsmsg);在 web 端的 js 端发送消息方式，要按你定义的 qtui 对象名称操作噢：
new qwebchannel(qt.webchanneltransport, function (channel) {var qtui = channel.objects.qtui;qtui.recievejsmessage("你点我干啥!"); })注意：html 端一定要加载 qwebchannel.js 文件，路径要正确。
程序跑起来结果：
七、程序demo源码地址
https://github.com/lesliefish/qt/tree/master/project/webtest
环境：vs2015 qt5.9.6，完整源码，可直接运行。
装载于：https://blog.csdn.net/y396397735/article/details/84707031
（saw：game over！）
总结
以上是ag凯发k8国际为你收集整理的qt5 中 qwebengineview 的使用，让桌面客户端和 web 端友好通信的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：