欢迎访问 生活随笔!

凯发ag旗舰厅登录网址下载

当前位置: 凯发ag旗舰厅登录网址下载 > 编程资源 > 编程问答 >内容正文

编程问答

qt5 中 qwebengineview 的使用,让桌面客户端和 web 端友好通信 -凯发ag旗舰厅登录网址下载

发布时间:2024/10/14 编程问答 13 豆豆
凯发ag旗舰厅登录网址下载 收集整理的这篇文章主要介绍了 qt5 中 qwebengineview 的使用,让桌面客户端和 web 端友好通信 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

一、本文结构

  • qt5 中 web 开发的基本配置,工程搭建。
  • 加载 html 文件。
  • qt 界面窗口调用 html 中的 javascript 函数(qt 调用 js)
  • qt 界面窗口获取 html 中 js 函数的返回值。
  • web 端消息主动通知到 qt 界面(js 通知 qt)。
  • 二、基本配置,工程搭建

    (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 &resultcallback);

    如上,这个调用是异步的,这个可以传个回调函数进去,执行结果可以直接在回调函数来处理。
    在本 demo 中直接用 lambda 函数处理了,如下:

    qstring webtest::getjsretstring() {qeventloop loop;connect(this, &webtest::signalrunjsover, &loop, &qeventloop::quit);qstring jsstr = "getinfo();";// 调用js的getinfo函数qstring retstr{}; // 返回值// 通过loop循环等到回调上来数据再继续m_pwebview->page()->runjavascript(jsstr, [&](const qvariant &v){retstr = v.tostring();// 在头文件中定义这个函数,收到js的回调返回值后,结束loop循环emit signalrunjsover();});loop.exec(); // 收不到回调处理结束信号,我就在这里循环等待return retstr; }

    六、web 端消息主动通知到 qt 界面。

    以上都是 qt 端主动操作 web 端的对象、函数等,那 web 端要发某个消息给 qt 端,怎么处理呢?
    用 qwebchannel,基本使用方式如下:

       m_pwebchannel = new qwebchannel(this); // 创建对象// 注册一个qtui对象  html端通过此名称向qt端发送消息m_pwebchannel->registerobject(qstring("qtui"), this);m_pwebview->page()->setwebchannel(m_pwebchannel);

    基本定义完成后,我们需要定义一个槽函数,接收 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旗舰厅登录网址下载推荐给好友。

    • 上一篇:
    • 下一篇:
    网站地图