编程问答
qt5 中 qwebengineview 的使用,让桌面客户端和 web 端友好通信 -凯发ag旗舰厅登录网址下载
一、本文结构
二、基本配置,工程搭建
(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旗舰厅登录网址下载为你收集整理的qt5 中 qwebengineview 的使用,让桌面客户端和 web 端友好通信的全部内容,希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错,欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇:
- 下一篇: