一、本文結(jié)構(gòu)

Qt5 中 web 開(kāi)發(fā)的基本配置，工程搭建。

加載 HTML 文件。

Qt 界面窗口調(diào)用 HTML 中的 JavaScript 函數(shù)（Qt 調(diào)用 js）

Qt 界面窗口獲取 HTML 中 Js 函數(shù)的返回值。

Web 端消息主動(dòng)通知到 Qt 界面（js 通知 Qt）。

二、基本配置，工程搭建

（1）Qt 安裝時(shí)要安裝 web 開(kāi)發(fā)組件，本案例采用 Qt5.9.6 vs2015 開(kāi)發(fā)環(huán)境。
（2）新建 Qt Gui 工程要首先勾選以下三個(gè)組件

（3）qwebchannel.js文件，安裝Qt后在安裝文件夾下面可以搜索找到
（4）本案例代碼文件結(jié)構(gòu)

其中Ui文件的簡(jiǎn)單布局如下：

其中，左側(cè)為 QWebEngineView 控件，右側(cè)一個(gè)調(diào)用 js 函數(shù)的按鈕，一個(gè)獲取 js 返回值的按鈕，另一個(gè)為操作結(jié)果顯示的 label 控件。

三、加載 html 文件

找到html文件位置，QWebEngineView的load()函數(shù)可以加載html文件顯示，形式如下：

m_pWebView->load(QUrl("file:///" + htmlPath));

四、Qt 調(diào)用 HTML 中的 JavaScript 函數(shù)

假設(shè)html中有js函數(shù)如下：

? ? // 添加一個(gè)圓形覆蓋物function addCircle(){var point = new BMap.Point(116.404, 39.915);var circle = new BMap.Circle(point, 6000, { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.3 }); //創(chuàng)建圓map.addOverlay(circle); ? ? ? ? ? ?//增加圓}

在Qt桌面端，只需要用一個(gè)字符串把 js 函數(shù)名稱(chēng)弄下來(lái)就行啦，然后通過(guò)執(zhí)行 runJavaScript 函數(shù)就可以對(duì) html 操作了，操作方式如下：

QString jsStr = QString("addCircle()"); m_pWebView->page()->runJavaScript(jsStr);

五、Qt 界面窗口獲取 HTML 中 Js 函數(shù)的返回值

只能調(diào)它的 js 函數(shù)還不行啊，我想知道它執(zhí)行完返回給我啥了，那這個(gè)時(shí)候就需要看看這個(gè) runJavaScript 函數(shù)了：

void runJavaScript(const QString& scriptSource,? const QWebEngineCallback<const QVariant &> &resultCallback);

如上，這個(gè)調(diào)用是異步的，這個(gè)可以傳個(gè)回調(diào)函數(shù)進(jìn)去，執(zhí)行結(jié)果可以直接在回調(diào)函數(shù)來(lái)處理。
在本 Demo 中直接用 lambda 函數(shù)處理了，如下：

QString WebTest::getJsRetString() {QEventLoop loop;connect(this, &WebTest::signalRunJsOver, &loop, &QEventLoop::quit);QString jsStr = "getInfo();";// 調(diào)用Js的getInfo函數(shù)QString retStr{}; // 返回值// 通過(guò)loop循環(huán)等到回調(diào)上來(lái)數(shù)據(jù)再繼續(xù)m_pWebView->page()->runJavaScript(jsStr, [&](const QVariant &v){retStr = v.toString();// 在頭文件中定義這個(gè)函數(shù)，收到j(luò)s的回調(diào)返回值后，結(jié)束loop循環(huán)emit signalRunJsOver();});loop.exec(); // 收不到回調(diào)處理結(jié)束信號(hào),我就在這里循環(huán)等待return retStr; }

六、Web 端消息主動(dòng)通知到 Qt 界面。

以上都是 Qt 端主動(dòng)操作 web 端的對(duì)象、函數(shù)等，那 web 端要發(fā)某個(gè)消息給 Qt 端，怎么處理呢？
用 QWebChannel，基本使用方式如下：

? ?m_pWebChannel = new QWebChannel(this); // 創(chuàng)建對(duì)象// 注冊(cè)一個(gè)qtui對(duì)象 ?html端通過(guò)此名稱(chēng)向qt端發(fā)送消息m_pWebChannel->registerObject(QString("qtui"), this);m_pWebView->page()->setWebChannel(m_pWebChannel);

基本定義完成后，我們需要定義一個(gè)槽函數(shù)，接收 web 端發(fā)的消息，定義基本格式如下：

public slots: // 一定要這樣定義哦，否則會(huì)收不到消息void recieveJsMessage(const QString& jsMsg);

在 web 端的 js 端發(fā)送消息方式，要按你定義的 qtui 對(duì)象名稱(chēng)操作噢：

new QWebChannel(qt.webChannelTransport, function (channel) {var qtui = channel.objects.qtui;qtui.recieveJsMessage("你點(diǎn)我干啥!"); })

注意：html 端一定要加載 qwebchannel.js 文件，路徑要正確。

程序跑起來(lái)結(jié)果：

七、程序Demo源碼地址

https://github.com/lesliefish/Qt/tree/master/Project/WebTest

環(huán)境：vs2015+Qt5.9.6，完整源碼，可直接運(yùn)行。

?

裝載于：https://blog.csdn.net/y396397735/article/details/84707031

?

（SAW：Game Over！）?

?

總結(jié)

以上是生活随笔為你收集整理的Qt5 中 QWebEngineView 的使用，让桌面客户端和 web 端友好通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。