客户端相关知识学习(二)之h5与原生app交互的原理
前言
现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。
h5 与原生 app 的交互,本质上说,就是两种调用:
app 调用 h5 的代码
h5 调用 app 的代码
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 |
h5 调用 app 的代码
因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。
这种调用常用有两种方式:
方法一:由 app 向 h5 注入一个全局 js 对象,然后在 h5 直接访问这个对象(addScriptMessageHandler)
这种方式沟通机制简单,比较好理解,并且对于 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 |
方法二:由 h5 发起一个自定义协议请求,app 拦截这个请求后,再由 app 调用 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; } |
实战代码:
a() {
var origin = function origin(o) {
return o;
};
var gameHybrid = {
jumpAppLink: function (type, param = {}, callback) {
let self = this;
if (callback) {
let callbackName = self.generateUUCallbackFunction(callback);
param['callback'] = callbackName;
}
if (param) {
param = $.param(param);
}
let link = 'jsbridge://' + type + '?' + param;
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = link;
document.body.appendChild(iframe);
setTimeout(function () {
iframe.remove();
}, 100);
},
/**
*
* 生成唯一的id
* @export
* @returns
*/
generateUUID() {
var rc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
d += performance.now(); // use high-precision timer if available
}
var pattern = rc ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx';
return pattern.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
});
},
generateUUCallbackFunction(callback, notDelete) {
let self = this;
var resHandle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : origin;
var name = 'kwai_bridge_callback_' + self.generateUUID(false);
// console.log(name);
window[name] = function (data) {
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) {
console.warn(e); // eslint-disable-line
}
}
callback && callback.call(window, resHandle(data));
if (!notDelete) {
delete window[name];
}
};
return name;
}
};
gameHybrid.jumpAppLink("showConfirmDialog",{
title: '标题',
content: '我是内容',
confirmBtnText: '确定',
cancelBtnText: '取消',
btnID: 1
},(res)=>{
// if(resizeBy.status === "cancel"){
// resizeBy.other === ''
// }
console.log('res:',res)
})
}
|
tip:调用gameHybrid.jumpAppLink,h5先给客户端传参,然后客户端在调用h5传给客户端的回调函数,通过传参告诉我们当前点击了哪个按钮~~
参考: