HTML5和原生app进行交互的方法-创新互联

HTML5和原生app进行交互的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

创新互联专注于企业成都营销网站建设、网站重做改版、都兰网站定制设计、自适应品牌网站建设、H5开发、成都商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为都兰等各大城市提供网站开发制作服务。

h6与原生 app 交互的原理

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

h6 与原生 app 的交互，本质上说，就是两种调用：

1. app 调用 h6 的代码

2. 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，所以这种调用就相对复杂一点。

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

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

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

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

大致需要以下几个步骤：

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

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

3. 由 h6 发起一个自定义协议请求，比如 location.href = 'sdk://double?value=10'

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

5. 由 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进行交互的方法-创新互联
分享地址：http://bzwzjz.com/article/dodsoj.html