整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于現(xiàn)如今H5的熱門，做過不少與H5的交互工作了，現(xiàn)在總結(jié)一下。
初始化WebView
/**
* 初始化WebView
*/
private void initWebView() { // 設(shè)置setWebChromeClient對象
mWb_main.setWebChromeClient(new WebChromeClient() { @Override
public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); //設(shè)置本地的ToolBar標(biāo)題
mTv_main.setText(title);
}
});
. Qt使用類
1. QWebChannel
2. QWebEngineView
二. Qt JS文件
1. qwebchannel.js 一般在安裝目錄下 \webchannel\shared\qwebchannel.js
三. Qt代碼
1. 定義交互類
#include <QWebEnginePage>
class JsClass: public QObject
{
Q_OBJECT
public:
explicit JsClass(QObject *parent=nullptr);
// qt 調(diào)用 js 函數(shù)
void qt_exec_js(QWebEnginePage* page, const QString& param) {
page->runJavaScript(QString("print_info(\"%1\")").arg(param)); //調(diào)用函數(shù)帶字符串類型參數(shù)一定需要加雙引號
//page->runJavaScript(QString("print_info(%1)").arg(12)); //調(diào)用函數(shù)參數(shù)類型為數(shù)字類型
//page->runJavaScript(QString("print_info()")); //調(diào)用函數(shù)無參
}
public slots:
// js 調(diào)用 qt 函數(shù)
void js_exec_qt(const QString& param) {
qDebug() << param;
}
};
2. 主函數(shù)代碼片段
QString url="file:///E:/login.html";
QWebEngineView webView
webView.load(QUrl(url));
webView.show();
JsClass jsClass;
QWebChannel webChannel;
webChannel.registerObject("jsClass", &jsClass);
webView.page()->setWebChannel(&webChannel);
connect(&webView, &QWebEngineView::loadFinished, this, [](){ jsClass.qt_exec_js(webView.page(), "Hello word");});
//重要, 必須要等到 QWebEngineView 類把html加載完畢才能執(zhí)行調(diào)用js的函數(shù), 不然會(huì)出現(xiàn)找不到j(luò)s函數(shù)的錯(cuò)誤
四. HTML 和 JS 代碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="demo"></div>
</body>
</html>
<script src="./qwebchannel.js"></script> //把Qt中提供的js加入進(jìn)來
<script>
var jsClassIns;
// 獲取qt中 JsClass 類的實(shí)例
function initObj(){
if (typeof qt !='undefined'){
new QWebChannel(qt.webChannelTransport, function(channel){
jsClassIns=channel.objects.jsClass; //名字和 webChannel.registerObject("jsClass", &jsClass); 第一個(gè)參數(shù)保持一致
});
}
}
// 調(diào)用Qt函數(shù)
function exec_qt(param){
if(typeof jsClassIns !='undefined'){
jsClassIns.js_exec_qt(param);
}
}
//Qt 調(diào)用 js
function print_info(param) {
document.getElementById("demo").innerHTML=param;
exec_qt("Hello China"); //當(dāng)Qt調(diào)用了 js, Js 也調(diào)用Qt函數(shù)
}
initObj();
</script>
著移動(dòng)端互聯(lián)網(wǎng)的發(fā)展，越來越的APP運(yùn)用到H5，可移動(dòng)端H5與原生JavaScript是如何交互的呢？
JavaScript調(diào)用Native的方式，主要有兩種：注入API和攔截URL SCHEME。
其主要原理是，通過WebView提供的接口，向JavaScript的Context（window）中注入對象或者方法，讓JavaScript調(diào)用時(shí)，直接執(zhí)行相應(yīng)的Native代碼邏輯，達(dá)到JavaScript調(diào)用Native的目的。
針對Android和IOS有不同的處理方式：
1、Android的處理方式
Android中，就是新建一個(gè)類，里面寫提供給H5操作的方法，并規(guī)定別名。
在安卓4.2以上可以直接使用@JavascriptInterface注解來聲明。
定義完這個(gè)方法后再調(diào)用mWebView.addJavascriptInterface()方法。
將方法注入在window中，H5調(diào)用時(shí)，根據(jù)“window. 別名.方法”來調(diào)用。
2、IOS的處理方式
IOS是利用WKWebView的新特性MessageHandler來實(shí)現(xiàn)JS調(diào)用原生方法的。
WKWebView初始化時(shí)，創(chuàng)建WKWebViewConfiguration對象，配置各個(gè)接口對應(yīng)的MessageHandler，然后再接受js傳遞的參數(shù)調(diào)用接口。
H5中調(diào)用時(shí)，使用window.webkit.messageHandlers.接口名. postMessage(參數(shù))。
攔截URL SCHEME的主要流程是：Web端通過某種方式（例如iframe.src）發(fā)送URL Scheme 請求，之后Native攔截到請求并根據(jù)URL SCHEME（包括所帶的參數(shù)）進(jìn)行相關(guān)操作。
在這個(gè)過程中，這種方式有一定的缺陷：
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
