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