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

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

7. 最后，我们到WebChannelDemo类中来初始化一下，主要做了以下几件事：
   1. 关联信号槽
   2. 实例化一个QWebChannel对象
   3. 将WebTransport单例对象注册到QWebChannel
   4. 将QWebChannel对象设置到网页中去
   5. 最后再加载本地网页

void WebChannelDemo::setup()
{
   
	// 绑定信号槽
	connect