轉(zhuǎn)載: h5與原生交互的原理
轉(zhuǎn)載: JsBridge的使用
h5與原生 app 交互的原理
現(xiàn)在移動(dòng)端 web 應(yīng)用，很多時(shí)候都需要與原生 app 進(jìn)行交互、溝通（運(yùn)行在 webview 中），比如微信的 jssdk，通過 window.wx 對(duì)象調(diào)用一些原生 app 的功能。所以，這次就來捋一捋 h5 與原生 app 交互的原理。
h5 與原生 app 的交互，本質(zhì)上說，就是兩種調(diào)用：
- app 調(diào)用 h5 的代碼
- h5 調(diào)用 app 的代碼
1. app 調(diào)用 h5 的代碼
因?yàn)?app 是宿主，可以直接訪問 h5，所以這種調(diào)用比較簡(jiǎn)單，就是在 h5 中曝露一些全局對(duì)象（包括方法），然后在原生 app 中調(diào)用這些對(duì)
javascript
window.sdk = {
double = value => value * 2,
triple = value => value * 3,
};
android：
webview.evaluateJavascript(``'window.sdk.double(10)'``, ``new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
// 20
}
});
ios：
NSString *func = @``"window.sdk.double(10)"``;
NSString *str = [webview stringByEvaluatingJavaScriptFromString:func]; ``// 20
2. h5 調(diào)用 app 的代碼
因?yàn)?h5 不能直接訪問宿主 app，所以這種調(diào)用就相對(duì)復(fù)雜一點(diǎn)。
這種調(diào)用常用有兩種方式：
由app向h5注入一個(gè)全局js對(duì)象，然后在h5直接訪問這個(gè)對(duì)象
由h5發(fā)起一個(gè)自定義協(xié)議請(qǐng)求，app攔截這個(gè)請(qǐng)求后，再由app調(diào)用 h5 中的回調(diào)函數(shù)
2.1 由 app 向 h5 注入一個(gè)全局 js 對(duì)象
這種方式溝通機(jī)制簡(jiǎn)單，比較好理解，并且對(duì)于 h5 來說，沒有新的東西，所以是比較推薦的一種方式。但這種方式可能存在安全隱患，詳細(xì)查看 你不知道的 Android WebView 使用漏洞。
android
webview.addJavascriptInterface(``new Object() {
@JavascriptInterface
public int double(value) {
return value * 2;
}
@JavascriptInterface
public int triple(value) {
return value * 3;
}
}, ``"appSdk"``);
****ios****
NSString *scripts = @``"window.appSdk = {double: value => value * 2, triple: value => value * 3}"``;
[webview stringByEvaluatingJavaScriptFromString:scripts];
javascript
window.appSdk.double(10); ``// 20
3. JsBridge 的使用
參考資料：https://github.com/lzyzsd/JsBridge
①首先在安卓項(xiàng)目的配置文件里引入資源文件：
這一步我遇到了一個(gè)問題，就是開始的時(shí)候我把資源寫在了Project的配置文件中，導(dǎo)致項(xiàng)目rebuild報(bào)錯(cuò)，如下圖：
然后去stackoverflow搜索了解了一下，應(yīng)該是寫在錯(cuò)誤的配置文件了，于是將配置信息修改至Module:app的配置文件中，錯(cuò)誤解決。
②接下來，就是編寫java文件，修改xml文檔，主要是要注冊(cè)Handler，供JS調(diào)用，submitFromWe就是注冊(cè)供JS調(diào)用的Handler的id，data是JS傳過來的參數(shù)，CallBackFunction 函數(shù)中需要把JS需要的response返回給JS
④使用基本就是這樣了，可以看出來JsBridge通過封裝，JS和Java之間的通信只需要實(shí)現(xiàn)兩個(gè)步驟，使用起來很方便?，F(xiàn)在這個(gè)最簡(jiǎn)單的demo就可以跑起來了。Run it now!
