客户端相关知识学习（二）之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 的代碼
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 |
?
h5 調(diào)用 app 的代碼
因?yàn)?h5 不能直接訪問宿主 app，所以這種調(diào)用就相對(duì)復(fù)雜一點(diǎn)。
這種調(diào)用常用有兩種方式：
方法一：由 app 向 h5 注入一個(gè)全局?js?對(duì)象，然后在 h5 直接訪問這個(gè)對(duì)象（addScriptMessageHandler）
這種方式溝通機(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：?
| @interface?AppSdk?:?NSObject {} -?(int)?double:(int)value; -?(int)?triple:(int)value; @end @implementation?AppSdk -?(int)?double:(int)value?{ ??return?value?*?2; } -?(int)?triple:(int)value?{ ??return?value?*?3; } @end JSContext?*context=[webview?valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; AppSdk?*appSdk?=?[AppSdk?new]; context[@"appSdk"]?=?appSdk; |
javascript：
| window.appSdk.double(10);?//?20 |
方法二：由 h5 發(fā)起一個(gè)自定義協(xié)議請(qǐng)求，app 攔截這個(gè)請(qǐng)求后，再由 app 調(diào)用 h5 中的回調(diào)函數(shù)
這種方式要稍復(fù)雜一點(diǎn)，因?yàn)樾枰远x協(xié)議，這對(duì)很多前端開發(fā)者來說是比較新的東西。所以一般不推薦這種方式，可以作為第一種方式的補(bǔ)充。
大致需要以下幾個(gè)步驟：
-
由 app 自定義協(xié)議，比如?sdk://action?params
-
在 h5 定義好回調(diào)函數(shù)，比如?window.bridge={getDouble:value=>{},getTriple:value=>{}}
-
由 h5 發(fā)起一個(gè)自定義協(xié)議請(qǐng)求，比如?location.href='sdk://double?value=10'
-
app 攔截這個(gè)請(qǐng)求后，進(jìn)行相應(yīng)的操作，獲取返回值
-
由 app 調(diào)用 h5 中的回調(diào)函數(shù)，比如?window.bridge.getDouble(20);
javascript：
| window.bridge?=?{ ??getDouble:?value?=>?{ ????//?20 ??},? ??getTriple:?value?=>?{ ????//?more?? ??} }; location.href?=?'sdk://double?value=10'; |
android：
| webview.setWebViewClient(new?WebViewClient()?{ ????@Override ????public?boolean?shouldOverrideUrlLoading(WebView?view,?String?url)?{ ????????//?判斷如果?url?是?sdk://?打頭的就攔截掉 ????????//?然后從?url?sdk://action?params?中取出?action?與params? ????????Uri?uri?=?Uri.parse(url);????????????????????????????????? ????????if?(?uri.getScheme().equals("sdk"))?{ ????????????//?比如?action?=?double,?params?=?value=10 ????????????webview.evaluateJavascript('window.bridge.getDouble(20)'); ????????????return?true; ????????} ????????return?super.shouldOverrideUrlLoading(view,?url); ????} }); ? |
ios：
| -?(BOOL)webview:(UIWebView?*)webview?shouldStartLoadWithRequest:(NSURLRequest?*)request?navigationType:(UIWebViewNavigationType)navigationType?{ ??//?判斷如果?url?是?sdk://?打頭的就攔截掉 ??//?然后從?url?sdk://action?params?中取出?action?與params ??NSString?*urlStr?=?request.URL.absoluteString; ??if?([urlStr?hasPrefix:@"sdk://"])?{ ????//?比如?action?=?double,?params?=?value=10 ????NSString?*func?=?@"window.bridge.getDouble(20)"; ????[webview?stringByEvaluatingJavaScriptFromString:func]; ????return?NO; ??} ??return?YES; } |
參考：
h5 與原生 app 交互的原理
?
轉(zhuǎn)載于:https://www.cnblogs.com/kunmomo/p/11556125.html
總結(jié)
以上是生活随笔為你收集整理的客户端相关知识学习（二）之h5与原生app交互的原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 客户端相关知识学习（一）之混合开发，为什
- 下一篇： 客户端相关知识学习（三）之Android