本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于HTML5和原生app如何进行交互?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。h5与原生 app 交互的原理
现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。
h5 与原生 app 的交互,本质上说,就是两种调用:
app 调用 h5 的代码
h5 调用 app 的代码
1. app 调用 h5 的代码
因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。
javascript
1 2 3 4 | window.sdk = {
double = value => value * 2,
triple = value => value * 3,
};
|
android
1 2 3 4 5 6 | webview.evaluateJavascript( 'window.sdk.double(10)' , new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
}
});
|
ios
1 2 | NSString *func = @ "window.sdk.double(10)" ;
NSString *str = [webview stringByEvaluatingJavaScriptFromString:func];
|
2. h5 调用 app 的代码
因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。
这种调用常用有两种方式:
由app向h5注入一个全局js对象,然后在h5直接访问这个对象
由h5发起一个自定义协议请求,app拦截这个请求后,再由app调用 h5 中的回调函数
2.1 由 app 向 h5 注入一个全局 js 对象
这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。
android
1 2 3 4 5 6 7 8 9 10 11 | webview.addJavascriptInterface( new Object() {
@JavascriptInterface
public int double(value) {
return value * 2;
}
@JavascriptInterface
public int triple(value) {
return value * 3;
}
}, "appSdk" );
|
ios
1 2 | NSString *scripts = @ "window.appSdk = {double: value => value * 2, triple: value => value * 3}" ;
[webview stringByEvaluatingJavaScriptFromString:scripts];
|
javascript
1 | window.appSdk.double(10);
|
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
1 2 3 4 5 6 7 8 9 10 | window.bridge = {
getDouble: value => {
},
getTriple: value => {
}
};
location.href = 'sdk://double?value=10' ;
|
android
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | webview.setWebViewClient( new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Uri uri = Uri.parse(url);
if ( uri.getScheme().equals( "sdk" )) {
webview.evaluateJavascript( 'window.bridge.getDouble(20)' );
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
});
|
ios
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | - (BOOL)webview:(UIWebView *)webview shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *urlStr = request.URL.absoluteString;
if ([urlStr hasPrefix:@ "sdk://" ]) {
NSString *func = @ "window.bridge.getDouble(20)" ;
[webview stringByEvaluatingJavaScriptFromString:func];
return NO;
}
return YES;
}
|
以上就是HTML5和原生app如何进行交互?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
移动端h5页面实现生成图片的代码
javascript如何获取url参数
object.fromentries和object.entries的使用
学学javascript如何截取视频第一帧
vue项目中引入bootstrap的方法
javascript异步编程的4种方法
javascript中如何声明变量
关于前端面试(二)
深入了解javascript对象原型
javascript如何实现删除提示信息
更多相关阅读请进入《前端》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5和原生app如何进行交互?