Qt的QWebChannel和JS、HTML通信/交互驅動百度地圖

0 前言

我一個研究嵌入式的，不知道怎么就迷上了上位機，接了幾個項目都是關于Qt，這個項目還是比較經典的，自己沒事兒的時候也進行研究，對這個軟件進行升級，反正，我喜歡編程，喜歡研究這些東西。研究了一下午，查了很多資料，看了很多的例子，我對于JS是0基礎，能稍微看懂一點點HTML語言的東西，下午調試了好幾遍，運行了好幾遍，終于在我更改了JavaScript的函數完畢之后，一下子數據回傳成功了，那種感覺很棒！！！特地寫這個博客，記錄我的研發成果。

我是一個業余研究Qt的，不是那么專業！ *

【正文】

QWebChannel官方給的例子是和Socket混合，看的是一頭霧水，不得不吐槽Qt了，能不能單獨講講使用方法，別和別的東西結合？！

對于我的GPS地圖項目，研究又有了新的進展，我在本年度一直在業余時間研究Qt開發的軟件和網頁交互(JS和HTML)，雖然我對于網頁的知識僅僅有個基礎，在業余方面，我也不斷的在對該軟件進行升級研究，目前狀態:

第一階段：在Qt5.6以下版本，Qt還沒有刪除QWebKits組件，基于QWebKits組件，我做了最基本的軟件：參考：Qt開發北斗定位系統融合百度地圖API及Qt程序打包發布，

第二階段：Qt5.6以上版本，刪除了QWebKits組件，升級為QWebEngine組件，但是過渡階段只能由Qt的C++程序去運行JS，JS反饋的數據無法回傳，這造成了我獲取當前鼠標經緯度的功能缺失。參考：QtWebkits如何向QtWebEngine過渡。

第三階段：基于第二個階段，依舊基于QWebEngine，引入QWebChannel通信機制，完成JavaScript給的回傳數據，還原了鼠標當前經緯度的獲取功能。

到目前為止，GPS定位系統交互驅動百度地圖已經完全適配QWebEngine組件。

如圖1：

紅色方框部分為當前鼠標的經緯度信息，這個信息來源于html訪問百度地圖的JavaScript，然后回傳給C++的信息。

本文重點來說一下，如何從JavaScript獲取回傳信息，實現交互

1 實現過程

1.1 原理闡述

我是非專業的，我也沒有找關于HTML和JS交互的書，在我研究的過程中我認為是一個這樣的關系：

QWebEngine提供了調用HTML里面JavaScript的方法，這里HTML像是一個接口，在HTML尾部有一個這樣的標簽， ，在這個標簽內的函數和變量體中寫入一些函數和變量，這些函數和變量要么是JavaScript中的調用，要么是Qt中的調用，所以，HTML像是一個QT和網頁的橋梁。在下面的章節，我們詳細討論一下步驟。

1.2 WebChannel的使用

要使用QWebChannel要打點好兩個方面，第一，Qt方面，需要包含QWebChannel類，注冊好QWebChannel需要連接的Qt的對象；第二，JS方面，官方提供了配套的qwebchannel.js文件，這個js文件就相當于駐JavaScript負責通信的。所需準備的：

【JS方面：】qwebchannel.js文件(Qt官方提供，需要在html中引入，拿到后里面什么代碼都不要修改，直接使用。) qwebchannel.js下載地址

【Qt方面：】在Qt的主程序中，創建好QWebChannel類

下面就這兩方面討論如何使用：

1.2.1 JS方面處理

地圖這塊僅有一個JavaScript文件，是驅動百度地圖的，但是為了讓QWebChannel和百度的JS順利通信，Qt提供了一個qwebchannel.js文件，這個文件就是負責打點Qt和JS通信用的。

參考源碼：我把qwebchannel.js放在和百度地圖提供的js(也就是你要通信的JS)放在了一個目錄，然后在HTML文件中要引入兩個js文件。

地圖演示

這么多代碼，看的你很焦躁，不用太細研究，里面只是定義了很多百度地圖讀取的方法，我們把重點放在幾個點上(你可以在上面的源碼注釋中找到重點標記)

【第1步】：，這兩個語句表示這個HTML負責驅動兩個js文件，一個是百度地圖的js文件，一個是qwebchannel的js文件，qwebchannel毋庸置疑就是負責交互數據的了，所以在你拿到百度地圖原版的HTML文件的時候，需要對這里進行改進，原理貌似就像是C語言中#include這塊，把qwebchannel.js集成進來。

【第2步】：需要在JS這塊創建一個QWebChannel，這個js里的webchannel就是負責和Qt C++里面的webchannel通信的。

// ！！！！重點2！！！

new QWebChannel(qt.webChannelTransport, // 新建一個QWebChannel實例化

function(channel){

window.bridge = channel.objects.person; // 注冊 // window.bridge不用找了，這個是js的功能函數，等號后邊需要注意，channel.objects.XXXXX

} // 這個XXXX是需要在Qt C++程序里面定義的，我們一會兒說，但是channel.objects.這個是固有的。

);

這部分是新添加的，我查了QWebChannel這個東西在qwebchannel.js文件中定義了，這里在我們要訪問的HTML中必須要有這個東西的定義，解釋詳見注釋。person這個東西就是在C++里面定義的，就當是他是負責和我們C++和js通信的句柄吧。將他賦值給window.bridge，以后利用操作window.bridge我們就可以通信了。

【第3步】：利用channel這個東西通信。

// ！！！！重點3！！！

var updateInfo = function(lng,lat)

{

window.bridge.getCoordinates(lng,lat);

}

這里定義一個函數，就是將lng和lat這兩個參數傳遞給Qt C++，通過這樣的方式就能回傳數據了。window.bridge說過了是固有的，js固有的，那么getCoordinates這個東西是什么？答曰，是我們Qt C++里面自定義的一個槽函數，聲明在public slots:里面，channel通過window.bridget來操控槽函數，達到數據回傳，這個地方是重中之重！！

【第4步】：配合監聽器，這里有個注意點。

// ！！！！！重點4！！！

map.addEventListener("mousemove",function(e) {

updateInfo(e.point.lng,e.point.lat);

});

當發生mousemove這個行為的時候，這可能是JS里面的知識，則調用function(e)，一定要注意這個function不能直接把函數體寫在這里，必須采用我們上面的方法，把函數體單獨寫，然后在內部寫上調用。

到此javascript部分已經交代清楚了。

1.2.2 Qt C++方面處理

Qt C++方面的開發，需要啟動QWebChannel類，注冊頁面。

// 準備Javascript文件交互

QString strMapPath = "qrc:/map/map.html"; // 設定地圖路徑

QWebEnginePage *page = new QWebEnginePage(this); // 定義QWebEnginePage界面負責打開html文件

QWebChannel *channel = new QWebChannel(this); // 定義QWebChannel負責

channel->registerObject(QString("person"),this); // QWebChannel對Widget類，注冊一個person的通信介質 /

// 在js文件中person負責成為window.bridge /

// 在this中也就是Widget類注冊channel，channel訪問的位Widget下的槽函數。

page->load(strMapPath); // webenginePage加載html地圖。

page->setWebChannel(channel); // webenginePage加載Channel功能

ui->webEngine->setPage(page); // ui顯示該page。

在C++類Widget的構造函數，要進行準備，這里涉及了QWebEnginePage,QWebChannel，千萬別亂，按照代碼注釋里清楚關系。這里有個QString類，定義了person,在返回去看js中的person，是不是明白了其中的聯系了？！你可以寫成任意可理解的字符。

緊接著就是槽函數了：必須是public slots: 不能是private slots

public slots:

void getCoordinates(QString lon, QString lat) {

QString tempLon="Mouse Lontitude:"+lon+"°";

QString tempLat="Mouse Lattitude:"+lat+"°";

ui->label_mouse_altitude->setText(tempLat);

ui->label_mouse_latitude->setText(tempLon);

};

經過以上，js會回傳數據給lon和lat，然后你該怎么辦就怎么辦了。

2 總結

經過一下午的努力，完成了數據回傳，可以將js的數據傳遞回來，但是QWebChannel這塊還有其他的東西，比如和槽和信號連接，如果今后能遇到這個項目，我會繼續研究，否則，到今天這個項目完畢。

感謝觀看。

參考文獻：

【木有】

版權聲明：

1. 本文為MULTIBEANS團隊研發跟隨文章，未經允許不得轉載。

2· 文中涉及的內容若有侵權行為，請與本人聯系，本人會及時刪除。

3· 尊重成果，本文將用的參考文獻全部給出，向無私的工程師，愛好者致敬。

總結

以上是生活随笔為你收集整理的qt百度地图html,Qt的QWebChannel和JS、HTML通信/交互驱动百度地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。