h5 与原生 app 交互的原理

作者:深予之 (@senntyou)

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)

链接:https://segmentfault.com/a/1190000016759517


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

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

  1. app 调用 h5 的代码

  2. h5 调用 app 的代码

1. app 调用 h5 的代码

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

javascript:

  1. window.sdk = {

  2.  double = value => value * 2,

  3.  triple = value => value * 3,

  4. };

android:

  1. webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback<String>() {

  2.  @Override

  3.  public void onReceiveValue(String s) {

  4.    // 20

  5.  }

  6. });

ios:

  1. NSString *func = @"window.sdk.double(10)";

  2. 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 使用漏洞

android:

  1. webview.addJavascriptInterface(new Object() {

  2.  @JavascriptInterface

  3.  public int double(value) {

  4.    return value * 2;

  5.  }

  6.  @JavascriptInterface

  7.  public int triple(value) {

  8.    return value * 3;

  9.  }

  10. }, "appSdk");

ios:

  1. @interface AppSdk : NSObject

  2. {}

  3. - (int) double:(int)value;

  4. - (int) triple:(int)value;

  5. @end

  6. @implementation AppSdk

  7. - (int) double:(int)value {

  8.  return value * 2;

  9. }

  10. - (int) triple:(int)value {

  11.  return value * 3;

  12. }

  13. @end

  14. JSContext *context=[webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

  15. AppSdk *appSdk = [AppSdk new];

  16. context[@"appSdk"] = appSdk;

javascript:

  1. 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);

javascript:

  1. window.bridge = {

  2.  getDouble: value => {

  3.    // 20

  4.  },

  5.  getTriple: value => {

  6.    // more  

  7.  }

  8. };

  9. location.href = 'sdk://double?value=10';

android:

  1. webview.setWebViewClient(new WebViewClient() {

  2.    @Override

  3.    public boolean shouldOverrideUrlLoading(WebView view, String url) {

  4.        // 判断如果 url 是 sdk:// 打头的就拦截掉

  5.        // 然后从 url sdk://action?params 中取出 action 与params

  6.        Uri uri = Uri.parse(url);                                

  7.        if ( uri.getScheme().equals("sdk")) {

  8.            // 比如 action = double, params = value=10

  9.            webview.evaluateJavascript('window.bridge.getDouble(20)');

  10.            return true;

  11.        }

  12.        return super.shouldOverrideUrlLoading(view, url);

  13.    }

  14. });

ios:

  1. - (BOOL)webview:(UIWebView *)webview shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

  2.  // 判断如果 url 是 sdk:// 打头的就拦截掉

  3.  // 然后从 url sdk://action?params 中取出 action 与params

  4.  NSString *urlStr = request.URL.absoluteString;

  5.  if ([urlStr hasPrefix:@"sdk://"]) {

  6.    // 比如 action = double, params = value=10

  7.    NSString *func = @"window.bridge.getDouble(20)";

  8.    [webview stringByEvaluatingJavaScriptFromString:func];

  9.    return NO;

  10.  }

  11.  return YES;

  12. }

后续

更多博客,查看 https://github.com/senntyou/blogs


编号820,输入编号直达本文

●输入m获取文章目录

推荐↓↓↓

Web开发

更多推荐18个技术类微信公众号

涵盖:程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。

一份值得收藏的 MySQL 高性能优化规范建议

数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割。所有数据库对象名称禁止使用 MySQL 保留关键字。

公司如何才能做好网站建设?

关于公司如何才能做好网站建设对于想要通过网络营销推广来提升品牌知名度,以及提升公司销售业绩的企业来讲就显得尤其重要了。那么企业如何才能做好网站建设呢?下面品牌益众帮为需要网站建设的企业解答一些网站建设:-做好,网站,网站建设,建设:公司如何才能做好网站建设?

做有活力的网站?超实用网页动画指南值得收藏 | 分享

现如今,动画对于网页设计师已经不再新奇,它正在成为最基础的交互设计效果。动画就是变化,是一种运动。下面就来跟范儿姐一起来了解一下网页动画吧~01网页动画简史正所谓,了解一件事物,就

前端网页加载渲染链路优化

opensignal官方提供了2018年2月份统计的全世界4G网络覆盖率和通信速率的统计分布图如下,在目前移动互联网的浪潮下,我们要利用好用户终端设备的每个字节的流量。

架构设计:标准Web系统的架构分层

例如:一些简单的CRM系统可能在产品初期并不需要K-V作为缓存;一些系统访问量不大,并且可能只有一台业务服务器存在,所以不需要运用负载均衡层。