Qt与Js交互通信

加载Js

 1 void MainWindow::loadJS()
 2 {
 3     QFile webChannelJsFile("./html_js/qwebchannel.js");
 4     if (!webChannelJsFile.open(QIODevice::ReadOnly))
 5     {
 6 #if LANG_EN
 7         QMessageBox::warning(this, "warning", "Open qwebchannel.js failed!");
 8 #else
 9         QMessageBox::warning(this, "警告", "打开qwebchannel.js失败！");
10 #endif
11         exit(0);
12     }
13     else
14     {
15         webChannelJs = new QByteArray;
16         *webChannelJs = webChannelJsFile.readAll();
17         QFile wireJsFile("./html_js/1-Wire.js");
18         if (!wireJsFile.open(QIODevice::ReadOnly))
19         {
20 #if LANG_EN
21             QMessageBox::warning(this, "warning", "Open 1-Wire.js failed!");
22 #else
23             QMessageBox::warning(this, "警告", "打开1-Wire.js失败！");
24 #endif
25             exit(0);
26         }
27         else
28         {
29             QByteArray tempJs = wireJsFile.readAll();
30             webChannelJs -> append(tempJs);
31 
32             script = new QWebEngineScript;
33             script -> setSourceCode(*webChannelJs);
34             script -> setName("./html_js/qwebchannel.js");
35             script -> setWorldId(QWebEngineScript::MainWorld);
36             script -> setInjectionPoint(QWebEngineScript::DocumentCreation);
37             script -> setRunsOnSubFrames(false);
38         }
39         wireJsFile.close();
40     }
41     webChannelJsFile.close();
42 }

注册对象

1 channel = new QWebChannel(this);
2 channel -> registerObject(QStringLiteral("contentObj"), this);

打开html

 1 void MainWindow::wireHtml()
 2 {
 3     webView = new QWebEngineView;
 4     webView -> page() -> scripts().insert(*script);
 5     webView -> page() -> setWebChannel(channel);
 6     webView -> page() -> load(QUrl(QFileInfo("./html_js/1-Wire.html").absoluteFilePath()));
 7     webView -> resize(QApplication::desktop() -> screenGeometry().width(), QApplication::desktop() -> screenGeometry().height());
 8     webView -> resize(1000, 770);
 9     webView -> setWindowModality(Qt::ApplicationModal);
10     webView -> show();
11 }

在.pro文件加上相应的模块

1 QT       += webenginewidgets webchannel

Js内容

 1 window.onload = function()  // 1-Wire.js 第二行开始写，第一行好像会报错（忘记了，不确定）
 2 {    
 3     new QWebChannel(qt.webChannelTransport, function(channel) 
 4     {         
 5         var contentObj = channel.objects.contentObj;  // qt中注册的对象
 6         
 7         document.getElementById("confirmBtn").onclick = function()
 8         {
 9             var tAvalue = document.getElementById('tA').value;
10             var tBvalue = document.getElementById('tB').value;
11             var tCvalue = document.getElementById('tC').value;
12             var tDvalue = document.getElementById('tD').value;
13             var tEvalue = document.getElementById('tE').value;
14             var tFvalue = document.getElementById('tF').value;
15             var tGvalue = document.getElementById('tG').value;
16             var tHvalue = document.getElementById('tH').value;
17             var tIvalue = document.getElementById('tI').value;
18             var tJvalue = document.getElementById('tJ').value;
19             contentObj.recvJSSpeed(tAvalue, tBvalue, tCvalue, tDvalue, tEvalue, tFvalue, tGvalue, tHvalue, tIvalue, tJvalue);  // 调用qt中的函数
20         }
21         contentObj.sendDevCntToHtml_sig.connect(function(devCnt) // qt的信号，js接收并处理
22         {
23             if(document.getElementById("devCnt") != null)
24                 document.getElementById("devCnt").innerText = devCnt;
25             else // install and fix driver 
26             {
27 
28             }
29         })
30     }) 
31 }

MainWindow.h里信号下到Js与需要在Js调用的函数

1 public:
2     Q_INVOKABLE void recvJSSpeed(QString vAvalue, QString vBvalue, QString vCvalue, QString vDvalue, QString vEvalue, QString vFvalue,  \
3                                  QString vGvalue, QString vHvalue, QString vIvalue, QString vJvalue);
4 
5 signals:
6     void sendDevCntToHtml_sig(int dev);

MainWindow.cpp构造函数里调用顺序

1 loadJS();
2 channel = new QWebChannel(this);
3 channel -> registerObject(QStringLiteral("contentObj"), this);
4 wireHtml();

 

原文链接:https://www.cnblogs.com/fabric-summoner/p/12956818.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有