Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互

前言

Qt提供了QWebChannel来和网页进行通信，只需要注册自定义对象一下，就可以直接绑定信号槽来进行Qt程序和网页之前的通信，非常方便

    下面使用一个案例来学习QWebChannel

    环境：vs2017+Qt5.11.2 写Qt代码，vsCode写js代码

一、效果

直接上图

二、实现过程

1. Qt端

  1. 新建一个Qt Gui项目，取名WebChannelDemo

  2. 一路下一步，最后选择QWidget基类

  3. 得到一个这样结构的项目

  4. 使用Qt Designer打开webchanneldemo.ui,拖一个界面

  5. 这个时候再来创建一个用于通过WebChannel通信的WebTransport类，基类选择QObject



  6. 为了方便，不用每次使用都创建一个WebTransport对象，我们将这个类写成单例类，然后定义和js交互的信号的槽函数，最近定义一个宏来使用实例
#pragma once

#include <QObject>

class WebTransport : public QObject

{

	Q_OBJECT

	WebTransport(QObject *parent = nullptr);

	~WebTransport();

public:

	// 获取实例

	static WebTransport* instance();

signals:

	// 向js发送信号

	void msgToJs(const QString& msg);

	// 将从js接收的数据发送出去

	void receviedJsMsg(const QString& msg);

public slots:

	// js调用此函数，接收js传入的数据

	void msgToQt(const QString& msg);

};

// 定义一个宏

#ifndef WEB_TRSPT

#define WEB_TRSPT WebTransport::instance()

#endif // !WEB_TRSPT
  1. 最后，我们到WebChannelDemo类中来初始化一下，主要做了以下几件事：

    1. 关联信号槽
    2. 实例化一个QWebChannel对象
    3. 将WebTransport单例对象注册到QWebChannel
    4. 将QWebChannel对象设置到网页中去
    5. 最后再加载本地网页
void WebChannelDemo::setup()

{

	// 绑定信号槽

	connect(ui.pushButton, &QPushButton::clicked, [this]() {

		ui.plainTextEdit->appendPlainText(QStringLiteral("发送消息到js：") + ui.lineEdit->text());

		emit WEB_TRSPT->msgToJs(ui.lineEdit->text());

	});

	connect(WEB_TRSPT, &WebTransport::receviedJsMsg, [this](const QString& msg) {

		ui.plainTextEdit->appendPlainText(QStringLiteral("接收js信息：") + msg);

	});

	// 构造一个channel对象

	QWebChannel* channel = new QWebChannel(this);

	// 向channel对象注册自定义对象

	channel->registerObject(QStringLiteral("webBridge"), WEB_TRSPT);

	// 使用webview的page设置channel对象

	ui.webEngineView->page()->setWebChannel(channel);

	// 最后加载网页

    ui.webEngineView->load(qApp->applicationDirPath()+"/channel/index.html");

}

2. 网页端

  1. 先创建一个channel目录,放在项目生成目录，和生成的可执行文件同级

  2. 使用vsCode打开这个目录，并创建如下项目结构

  3. 打开index.html文件，先编写一个这样的界面

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <!-- 样式 -->

    <link rel="stylesheet" href="./css/style.css">

    <!-- js -->

    <script src="./js/qwebchannel.js"></script>

    <script src="./js/main.js"></script>

</head>

<body>

    <p>我是网页</p>

    <textarea name="textArea" id="textArea"></textarea><br>

    <input type="text" id="lineEdit"><br>

    <button id="sendBtn" onclick="senBtnClicked();">发送</button>

    <button id="clearBtn" onclick="clearBtnClicked();">清空</button>

</body>

</html>
  1. 打开main.js文件,编写js代码，重点在初始化函数中，做了以下几件事

    1. 直接构造一个QWebChannel对象，用回调函数函数接收创建好的QWebChannel对象
    2. 使用QWebChannel对象获取Qt端注册的对象
    3. 给注册对象的信号绑定一个回调函数（槽函数），当Qt端注册的对象此信号发送时，回调函数被调用
    4. 调用注册对象的槽函数，给Qt端发送消息，直接使用Qt端注册对象的槽函数名来调用
// 显示信息

function outputMsg(msg) {

    var textArea = document.getElementById("textArea");

    if (textArea) {

        textArea.innerHTML = textArea.innerHTML + msg + "\n";

        textArea.scrollTop = textArea.scrollHeight;

    }

}

// 发送按钮点击

function senBtnClicked() {

    // 获取输出标签

    var lineEdit = document.getElementById('lineEdit');

    // 调用Qt对象函数

    webTransport.msgToQt(lineEdit.value);

    // 显示

    outputMsg("发送信息到Qt:" + lineEdit.value);

}

// 清空

function clearBtnClicked() {

    document.getElementById("textArea").innerHTML = "";

}

// 初始化

window.onload = function init() {

    if (typeof qt !== "undefined") {

        new QWebChannel(qt.webChannelTransport, function(channel) {

            // 获取Qt注册的对象,设置到主窗口（这里的webTransport就是Qt端注册时的字符串id）

            window.webTransport = channel.objects.webTransport;

            // 绑定注册对象的信号

            webTransport.msgToJs.connect(function(msg) {

                outputMsg("接收Qt信息：" + msg);

            });

            webTransport.msgToQt("初始化channel成功！");

        });

    } else {

        alert("初始化qwebchannel失败")

    }

}

三、过程中出现的问题

问题一

  1. 问题描述：运行时，Qt向Js端发送消息没有问题，Js端向Qt端发送消息时失败，会报如下错误
Cannot invoke unknown method of index -1 on object webTransport(0x...)
  1. 问题原因及解决办法：

    使用Qt 5.11.2编译生成的可执行程序，而网页端用的是Qt 5.14的qwebchannel.js文件，版本不兼容导致的，换成对应的qwebchannel.js文件就好了

问题二

  • 在加载本地网页时，为什么是先设置QWebChannel再加载网页？
  • 因为最开始的想法是，如果直接先使用ui.webEngineView->page()获取QWebEnginePage对象，应该获取到的是个nullptr,这个时候直接设置QWebChannel,程序会崩掉，那我先加载网页，然后QWebEngineView会内部构造一个QWebEnginePage对象,我再通过page()函数获取，这个时候肯定不是nullptr了，再去设置QWebChannel,这个过程简直完美，但是出人意料的是，按照这个过程设置的QWebChannel并没有生效，也不能和js交互
  • 解决办法就是先设置QWebChannel再加载网页，通过查看Qt 源码发现，通过page()函数获取QWebEnginePage对象时，内部做出了判断，如果内部维护的QWebEnginePage对象为空时，会直接构造一个QWebEnginePage对象,并不会返回空指针，设置完QWebChannel后再去调用load()函数加载网页时，内部会直接拿到设置好QWebChannel的QWebEnginePage对象去加载网页
QWebEnginePage* QWebEngineView::page() const

{

		Q_D(const QWebEngineView);

		if (!d->page) {

 	    QWebEngineView *that = const_cast<QWebEngineView*>(this);

		 that->setPage(new QWebEnginePage(that));

		 }

		return d->page;

}

void QWebEngineView::load(const QUrl& url)

{

	page()->load(url);

}

四、项目完整源码

https://gitee.com/doyoung126/qt_-demo.git

下一篇：Qt和JavaScript使用QWebChannel交互二——和浏览器打开的网页交互（还没写，抽时间写）

五、总结

总结：遇到凡事不要慌，先掏出手机拍个朋网友圈

Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互的更多相关文章

  1. JavaScript进阶 - 第6章 事件响应，让网页交互

    6-1什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用 ...

  2. Qt WebEngine 网页交互

    环境:Qt5.7.0,VS2013 一.简单介绍 从 Qt5.4 开始已经去掉 Qt WebKit 模块了,使用的是 chrome 内核封装的 QtWebEngine,浏览器相关的类有以下几个: QW ...

  3. ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  4. Qt 与 JavaScript 通信

    使用QWebView加载网页后,解决Qt与JavaScript通信的问题: The QtWebKit Bridge :http://qt-project.org/doc/qt-4.8/qtwebkit ...

  5. QT与JavaScript互调 - 虹的日志 - 网易博客

    QT与JavaScript互调 - 虹的日志 - 网易博客 QT与JavaScript互调   2012-05-29 21:43:14|  分类: 技术 |  标签:qt  javascript  w ...

  6. JavaScript高级用法一之事件响应与网页交互

    综述 本篇的主要内容来自慕课网,事件响应与网页交互,主要内容如下 1 什么是事件 2 鼠标单击事件( onclick ) 3 鼠标经过事件(onmouseover) 4 鼠标移开事件(onmouseo ...

  7. C#在WinForm中使用WebKit传递js对象实现与网页交互的方法

    这篇文章主要介绍了C#在WinForm中使用WebKit传递js对象实现与网页交互的方法,涉及针对WebBroswer控件及WebKit控件的相关使用技巧,需要的朋友可以参考下 本文实例讲述了C#在W ...

  8. Qt 4.5发布（最大的变动是换用LGPL许可证，移植进了苹果的Cocoa框架。之前的Qt只支持Carbon框架，现在的Qt 4.5两者都支持。单一源代码创建出支持32位或64位字节的Intel或PowerPC Mac二进制文件）

            Nokia的开源Qt开发工具正式发布了4.5版.如前所述,Qt 4.5最大的变动是换用LGPL许可证,目前采用的三个许可证分别为LGPL/GPL和商业许可证.           新版 ...

  9. Qt 子窗口内嵌到父窗口中（无边框附体show即可）good

    有时需要把一个子窗口内嵌进入父窗口当中. 我们可以这样做 1.新建一个QWidget 或者QDialog的子类 ClassA(父类为ClassB) 2.在新建类的构造函数中添加设置窗口属性 setWi ...

随机推荐

  1. C# Monitor.TryEnter 源码跟踪

    source: Monitor 获取指定对象的独占锁. [MethodImpl(MethodImplOptions.InternalCall), SecuritySafeCritical, __Dyn ...

  2. Java抽象类（abstract）

    抽象类和接口 一.抽象类 1.什么是抽象类? 类和类之间具有共同的特征,将这些特征提取出来,形成的就是抽象类. 类到对象是实例化,对象到类是抽象. 抽象类和具体类是相对的概念."抽象&quo ...

  3. docker《三》单机部署项目容器，nginx负载均衡

    接着<二> 创建一个网段(和二在一个网段) docker network create --subnet=172.19.0.0/24 pro-net docker run -d --nam ...

  4. rabbitMq消费死循环

    消费过程发生错误容易造成死循环 1.控制重发次数 2.try+catch+手动ack 3.try+catch+手动ack+死信队列(重试次数就失效了,因为捕捉确认后被打入了相应的死信队列) void ...

  5. JS 之 每日一题 之 算法 （ 有多少小于当前数字的数字 ）

    给你一个数组 nums,对于其中每个元素 nums[i],请你统计数组中比它小的所有数字的数目. 换而言之,对于每个 nums[i] 你必须计算出有效的 j 的数量,其中 j 满足 j != i 且 ...

  6. 【开发工具】Postman保姆级入门教程

    目录 一.简单使用 1. 创建命名空间 2. 创建新集合 3. 按模块整理接口 二.使用环境变量 1. 创建环境与环境变量 2. 使用环境变量 3. 登录后自动更新环境变量 转载请注明出处 一.简单使 ...

  7. Defence

      emm...这道题我调了一下午你敢信??   好吧还是我太天真了.   开始的时候以为自己线段树动态开点与合并写错了,就调;   结果发现没问题,那就是信息维护错了.   一开始以为自己最左右的1 ...

  8. Python - 头部解析

    背景 写 python 的时候,基本都要加两个头部注释,这到底有啥用呢? #!usr/bin/env python # -*- coding:utf-8 _*- print("hello-w ...

  9. 使用Vue制作了一个计算机网络中子网划分部分的简陋计算工具

    前端新手请多关照~~~~ 上个学期学校开了计算机网络的课, 上到子网划分部分时, 各种计算虽然不然但是足够让人眼花缭乱 于是就想着自己写一个子网划分的小工具来辅助一下, 在一些简单的题目测试后没什么问 ...

  10. Hadoop 2.x安装

    1.关闭防火墙 systemctl stop firewalld.service #停止firewallsystemctl disable firewalld.service #禁止firewall开 ...