QT中使用QTWebEngine加载本地HTML并与JS交互回调

1、.pro工程文件中添加引用

QT += webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

2、定义一个bridge类

#include <QObject>
#include<QMessageBox>
class bridge : public QObject
{

    void jscallme(const QString &text)
    {
        if(text ==QString::fromLocal8Bit("2"))
        {
           //QMessageBox::information(NULL, "jscallme", text);
           system("gnome-terminal -x bash -c 'cd /home/rtour/workspace/qt-screen/rtour/sh;./setup_bei.sh'&");
        }else {
            system("gnome-terminal -x bash -c 'cd /home/rtour/workspace/qt-screen/rtour/sh;./setup_hong_test.sh'&");
        }
    }

};

此处jscallme为HTML中将会唤起的方法
system方法为唤起终端执行命令

3、在工程内创建webengine

ui->setupUi(this);
webView = new QWebEngineView(this);
webView->load(QUrl("http://localhost:3000/"));
setCentralWidget(webView);
webChannel = new QWebChannel(webView->page());
bridge *bridge = new bridge();
webChannel->registerObject("bridge", bridge);
webView->page()->setWebChannel(webChannel);

这里http://localhost:3000/是HTML文件的地址，我是通过nginx代理发布的。
registerObject("bridge", bridge);我的理解为将"bridge"这个通道的代理交给bridge这个实例对象来处理,同时在html里也会通过"bridge"唤起jscallme这个方法的

4、html创建通道

首先是引用一个js文件，这个文件在qt的安装位置内可以找到
<script src="qwebchannel.js"></script>

//获取bridge对象
new QWebChannel(qt.webChannelTransport, function(channel) {
                 window.bridge = channel.objects.bridge;
                 
               })
//通过bridge唤起jscallme               
function onShowMsgBox() {
                 if (window.bridge) {
                   window.bridge.jscallme(line)
                 }
               }