作者：senntyou

segmentfault.com/a/1190000016759517

現在移動端 web 應用，很多時候都需要與原生 app 進行交互、溝通（運行在 webview中），比如微信的 jssdk，通過 window.wx 對象調用一些原生 app 的功能。所以，這次就來捋一捋 h5 與原生 app 交互的原理。

h5 與原生 app 的交互，本質上說，就是兩種調用：

app 調用 h5 的代碼

h5 調用 app 的代碼

1. app 調用 h5 的代碼

因為 app 是宿主，可以直接訪問 h5，所以這種調用比較簡單，就是在 h5 中曝露一些全局對象（包括方法），然后在原生 app 中調用這些對象。

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 調用 app 的代碼

因為 h5 不能直接訪問宿主 app，所以這種調用就相對復雜一點。

這種調用常用有兩種方式：

由 app 向 h5 注入一個全局?js?對象，然后在 h5 直接訪問這個對象

由 h5 發起一個自定義協議請求，app 攔截這個請求后，再由 app 調用 h5 中的回調函數

2.1 由 app 向 h5 注入一個全局?js?對象

這種方式溝通機制簡單，比較好理解，并且對于 h5 來說，沒有新的東西，所以是比較推薦的一種方式。但這種方式可能存在安全隱患，詳細查看 你不知道的 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;}@endJSContext?*context=[webview?valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];AppSdk?*appSdk?=?[AppSdk?new];context[@"appSdk"]?=?appSdk;

javascript：

window.appSdk.double(10);?//?20

2.2 由 h5 發起一個自定義協議請求

這種方式要稍復雜一點，因為需要自定義協議，這對很多前端開發者來說是比較新的東西。所以一般不推薦這種方式，可以作為第一種方式的補充。

大致需要以下幾個步驟：

由 app 自定義協議，比如?sdk://action?params

在 h5 定義好回調函數，比如?window.bridge={getDouble:value=>{},getTriple:value=>{}}

由 h5 發起一個自定義協議請求，比如?location.href='sdk://double?value=10'

app 攔截這個請求后，進行相應的操作，獲取返回值

由 app 調用 h5 中的回調函數，比如?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 交互的原理的全部內容，希望文章能夠幫你解決所遇到的問題。

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