現在移動端 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
;
}
@end
JSContext
*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;
}
