HTML5和原生app如何进行交互?

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于HTML5和原生app如何进行交互?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

h5与原生 app 交互的原理

现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview 中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。

h5 与原生 app 的交互,本质上说,就是两种调用:

  1. app 调用 h5 的代码

  2. h5 调用 app 的代码

1. app 调用 h5 的代码

因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。

HTML5和原生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,所以这种调用就相对复杂一点。

这种调用常用有两种方式:

  1. 由app向h5注入一个全局js对象,然后在h5直接访问这个对象

  2. 由h5发起一个自定义协议请求,app拦截这个请求后,再由app调用 h5 中的回调函数

2.1 由 app 向 h5 注入一个全局 js 对象

这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。

HTML5和原生app如何进行交互?

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 由 h5 发起一个自定义协议请求

这种方式要稍复杂一点,因为需要自定义协议,这对很多前端开发者来说是比较新的东西。所以一般不推荐这种方式,可以作为第一种方式的补充。

大致需要以下几个步骤:

  1. 由 app自定义协议,比如 sdk://action?params

  2. 在 h5 定义好回调函数,比如 window.bridge = {getDouble: value => {}, getTriple: value => {}}

  3. 由 h5 发起一个自定义协议请求,比如 location.href = ‘sdk://double?value=10’

  4. app 拦截这个请求后,进行相应的操作,获取返回值

  5. 由 app 调用 h5 中的回调函数,比如 window.bridge.getDouble(20);

HTML5和原生app如何进行交互?

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; }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » HTML5和原生app如何进行交互?

发表评论

提供最优质的资源集合

立即查看 了解详情