Qt 与 JavaScript 网页端 通信和调用

前言

主要使用 QWebEngineView 与 QWebChannel 来实现于 JavaScript 的交互

【注】：

需要 qwebchannel.js 文件，放在 .html 文件 同级目录下。

附上下载路径： https://download.csdn.net/download/LearnLHC/14039725

 

先附上，使用 Qt 调用 百度地图 api，显示网页版地图

一、Qt 与 JS 交互：

1、main.cpp

#include "QtBaiduMapDialog.h"
#include "QtJavascriptCommunication.h"

#include <QtWidgets/QApplication>
#include <QDir>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

	// QT 与 JS 相互调用各自的函数;
	QtJavascriptCommunication w;
	w.showUrl(QString("%1/Resource/yanshi.html").arg(QDir::currentPath()));
	w.show();

	// QT 显示 JS 百度地图;
	/*QtBaiduMapDialog baiduMap;
	baiduMap.show();*/

    return a.exec();
}

2、QtJavascriptCommunication.h

#pragma once

#include <QtWidgets/QDialog>
#include <QWebChannel>

#include "ui_QtJavascriptCommunication.h"

class QtJavascriptCommunication : public QDialog
{
    Q_OBJECT

public:
    QtJavascriptCommunication(QWidget *parent = Q_NULLPTR);
	~QtJavascriptCommunication();

	void showUrl(QString url);

public slots:
	void on_pushButton_clicked();

// QT 与 JS 通信要点 ②：JS 调用 QT 的函数，必须为 槽 函数;
// QT 与 JS 通信要点 ③：槽 函数必须用 [public slots:] 修饰，不能用 [Q_SLOT];
public slots:
	void sltRecieveJsMessage(QString msg);

private:
    Ui::QtJavascriptCommunicationClass ui;
	QWebChannel * m_pWebChannel;

};

3、QtJavascriptCommunication.cpp

#include <QMessageBox>