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();