HTML5和原生app进行交互的方法-创新互联
HTML5和原生app进行交互的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
创新互联专注于企业成都营销网站建设、网站重做改版、都兰网站定制设计、自适应品牌网站建设、H5开发、成都商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为都兰等各大城市提供网站开发制作服务。h6与原生 app 交互的原理
现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h6 与原生 app 交互的原理。
h6 与原生 app 的交互,本质上说,就是两种调用:
app 调用 h6 的代码
h6 调用 app 的代码
1. app 调用 h6 的代码
因为 app 是宿主,可以直接访问 h6,所以这种调用比较简单,就是在 h6 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。
javascript
window.sdk = { double = value => value * 2, triple = value => value * 3, };
android
webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback() { @Override public void onReceiveValue(String s) { // 20 } });
ios
NSString *func = @"window.sdk.double(10)"; NSString *str = [webview stringByEvaluatingJavaScriptFromString:func]; // 20
2. h6 调用 app 的代码
因为 h6 不能直接访问宿主 app,所以这种调用就相对复杂一点。
这种调用常用有两种方式:
由app向h6注入一个全局js对象,然后在h6直接访问这个对象
由h6发起一个自定义协议请求,app拦截这个请求后,再由app调用 h6 中的回调函数
2.1 由 app 向 h6 注入一个全局 js 对象
这种方式沟通机制简单,比较好理解,并且对于 h6 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 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
NSString *scripts = @"window.appSdk = {double: value => value * 2, triple: value => value * 3}"; [webview stringByEvaluatingJavaScriptFromString:scripts];
javascript
window.appSdk.double(10); // 20
2.2 由 h6 发起一个自定义协议请求
这种方式要稍复杂一点,因为需要自定义协议,这对很多前端开发者来说是比较新的东西。所以一般不推荐这种方式,可以作为第一种方式的补充。
大致需要以下几个步骤:
由 app自定义协议,比如 sdk://action?params
在 h6 定义好回调函数,比如 window.bridge = {getDouble: value => {}, getTriple: value => {}}
由 h6 发起一个自定义协议请求,比如 location.href = 'sdk://double?value=10'
app 拦截这个请求后,进行相应的操作,获取返回值
由 app 调用 h6 中的回调函数,比如 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; }
感谢各位的阅读!看完上述内容,你们对HTML5和原生app进行交互的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联网站制作公司行业资讯频道。
分享标题:HTML5和原生app进行交互的方法-创新互联
本文URL:http://pwwzsj.com/article/dodsoj.html