Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互-进阶功能（6）
Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互-进阶功能
文章目录
- Qt-Web混合开发-QtWebChannel实现Qt与Web通信交互-进阶功能
-
- 1、概述
- 2、实现效果
- 3、实现功能
- 4、关键代码
- 5、源代码
| 更多精彩内容 |
|---|
| 个人内容分类汇总 |
| Qt - Web混合开发 |
1、概述
-
Qt版本：V5.12.5
-
注意：windows下
webenginewidgets只支持MSVC编译器，不支持MinGW（mingw好像需要自己编译）； -
当使用QWebEngineView实现Qt + html混合开发时经常遇见的问题就是Qt自身有信号槽，但是和web网页怎么通信，web里又没有信号槽，第一时间想到的是socket通信，但是Qt其实封装了更加简单便捷的通信方式，可使用
QtWebChannel和qwebchannel.js实现Qt和web通信；
QWebChannel支持的功能：
- 将JavaScript函数【绑定到Qt的信号】（类似Qt信号槽）；
- 在JavaScript中异步调用
QWebChannel::registerObject()注册的对象对象的【槽函数】（必须是public slots:声明的）；- 在JavaScript中调用
QWebChannel::registerObject()注册的对象中带【返回值的槽函数】，并通过回调函数获取Qt槽函数的返回值；- 在JavaScript中指定读取/修改
QWebChannel::registerObject()注册的对象中使用Q_PROPERTY定义的【属性值】；- 在JavaScript中指定读取
QWebChannel::registerObject()注册的对象中使用Q_ENUM标记的【枚举】。前面讲了Qt使用
QWebChannel实现与Web中的javascript通信的简单示例，但是如果需要传递复杂数据该怎么实现呢，总不能所有数据都用字符串吧；其实可以转换为JSON的数据类型QWebChannel都支持，而JSON支持下列6种数据类型，对应到Qt中可以使用5种类型，其它各种类型的数据，例如QByteArray，QImage、自定义结构体等数据类型都需要自己转换为JSON数据格式再通过QWebChannel传递；
JSON支持类型 Qt中对应的数据类型 逻辑值（true 或 false） bool 数字（整数或浮点数） int、int64、double等数字类型都可以 字符串（在双引号中） QString 数组（在中括号中） QJsonArray 对象（在大括号中） QJsonObject null
2、实现效果
3、实现功能
- 构建后将html、css、js文件自动拷贝到可执行程序路径下；
- web界面和qt界面实现双向通信；
- 由于QWebChannel传递数据只有可以转换为【JSON的数据类型】才可以传递，其它类型无法传递，例如QByteArray这些JSON不支持的数据类型，这里演示了可以传递的所有数据类型的使用方式；
- Web界面中javascript直接读取Qt中注册对象使用Q_PROPERTY定义的【属性值】；
- Web界面中javascript直接读取Qt中注册对象使用使用Q_ENUM标记的【枚举】；
- 定义一个带有返回值的槽函数，javascript调用该函数后可以获取【返回值】；
4、关键代码
- pro文件：INSTALLS 用法
QT += webenginewidgets webchannel # 使用QWebEngineView和QWebchannel需要加载模块
# 程序编译后需要使用nmake install（msvc）或make install (linux)将web2文件夹拷贝到当前路径下，或者自己手动拷贝
webFile.path = $$path
webFile.files = $$PWD/web2
INSTALLS += webFile # 将web文件夹拷贝到path路径下，需要配置Custom Process Step: nmake install才生效
- webClient.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web客户端title>
<script src="qwebchannel.js">script>
<script src="main.js">script>
<link rel="stylesheet" type="text/css" href="main.css">
head>
<body>
<h1 align="center">Web客户端程序 h1>
<div align="center">
<textarea id="textAreaId" name="textArea">textarea> br>
<button id="but_bool" class="button" onclick="butClick_bool()">bool类型button>
<button id="but_double" class="button" onclick="butClick_double()">double类型button>
<button id="but_str" class="button" onclick="butClick_str()">string类型button>
<button id="but_arr" class="button" onclick="butClick_arr()">array类型button>
<button id="but_obj" class="button" onclick="butClick_obj()">object类型button> br>
<button id="but_Property" class="button" onclick="butClick_Property()">读取并修改Qt对象中的属性button>
<button id="but_enum" class="button" onclick="butClick_enum()">读取Q_ENUM标记的枚举button>
<button id="but_return" class="button" onclick="butClick_return()">调用带返回值的Qt函数button>
div>
body>
html>
- main.js
/**
* 程序启动立即初始化
*/
window.onload = function()
{
if(typeof qt != "undefined")
{
window.channel = new QWebChannel(qt.webChannelTransport, function(channel)
{
// 获取Qt注册的对象，Qt中registerObject注册的字符串
window.core = channel.objects.CoreId;
// 将函数showText和Qt信号toWeb***()绑定
core.toWebBool.connect(function(msg)
{
showText(msg);
});
core.toWebDouble.connect(function(msg)
{
showText(msg);
});
core.toWebString.connect(function(msg)
{
showText(msg);
});
core.toWebJsonArray.connect(function(msg)
{
showText(msg);
});
core.toWebJsonObject.connect(function(msg)
{
showText(msg);
});
});
}
else
{
alert("qt对象未获取到！");
}
}
/**
* 显示Qt发给Web的信息
* @param {*} msg
*/
function showText(msg)
{
var textEdit = document.getElementById("textAreaId");
if(textEdit)
{
// 由于typeof 不能分辨出数组和对象，所以这里使用构造器来判断
if(msg.constructor === Array) // 数组类型
{
textEdit.value = textEdit.value + "Array：" + msg+ '\n'; // 追加信息
}
else if(msg.constructor === Object) // 对象类型
{
var str = msg.key1 + " " + msg.key2+ " " + msg.key3;
textEdit.value = textEdit.value + "Object：" + str+ '\n'; // 追加信息
}
else
{
textEdit.value = textEdit.value + typeof msg + "：" + msg+ '\n'; // 追加信息
}
textEdit.scrollTop = textEdit.scrollHeight; // 滚动条一直再最下方
}
}
/**
* html中按键点击时调用这个函数将信号发送给Qt
*/
function butClick_bool()
{
core.on_toQtBool(true);
}
function butClick_double()
{
core.on_toQtDouble(123.321);
}
function butClick_str()
{
core.on_toQtString("Web 按键点击");
}
function butClick_arr()
{
var arr = [1, 2, "123"];
core.on_toQtJsonArray(arr);
}
function butClick_obj()
{
var obj = {
key1 : 123,
key2 : 321.1,
key3 : "abc"
};
core.on_toQtJsonObject(obj);
}
/**
* 点击按键后直接读取Qt中注册对象Core中使用Q_PROPERTY定义的属性值并修改
*/
function butClick_Property()
{
var textEdit = document.getElementById("textAreaId");
if(textEdit)
{
textEdit.value = textEdit.value + "Qt对象属性：" + core.value + '\n'; // 读取Qt中使用Q_PROPERTY定义的属性值
textEdit.scrollTop = textEdit.scrollHeight; // 滚动条一直再最下方
core.value++; // 修改Qt中使用Q_PROPERTY定义的属性值
}
}
/**
* 直接访问Qt中使用Q_ENUM标记的枚举
*/
function butClick_enum()
{
var textEdit = document.getElementById("textAreaId");
if(textEdit)
{
textEdit.value = textEdit.value + "Qt枚举值：" + core.CoreEnum.Value1 + '\n';
textEdit.scrollTop = textEdit.scrollHeight; // 滚动条一直再最下方
}
}
/**
* 在javascript中调用Qt函数后【获取返回值】
*/
function butClick_return()
{
core.on_returnValue(123, function(returnValue) // 这里使用回调函数获取返回值
{
var textEdit = document.getElementById("textAreaId");
if(textEdit)
{
textEdit.value = textEdit.value + "Qt函数返回值：" + returnValue + '\n';
textEdit.scrollTop = textEdit.scrollHeight; // 滚动条一直再最下方
}
});
}
- widget.h：注意，这里的 Core 类是Qt和Js通信的关键；
#ifndef WIDGET_H
#define WIDGET_H
#include - widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include 5、源代码
- gitee
- github
｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀
ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ
｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ
、ヽ｀ヽ｀、ヽヽ｀｀、ヽ｀、ヽヽ ♀ ヽ｀｀ヽ｀