HTML5和原生app怎样进行交互？--百分百源码网

HTML5和原生app怎样进行交互？-

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是对于HTML5和原生app怎样进行交互？有一定的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。本篇文章给大家带来的内容是对于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

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. h5 调取 app 的代码

由于 h5 不克不及直接拜访宿主 app，所以这种调取就相对复杂一点。

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

由app向h5注入一个全局js对象，然后在h5直接拜访这个对象
由h5发起一个自定义协定要求，app拦截这个要求后，再由app调取 h5 中的回调函数

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

这种方式沟通机制简略，比拼好了解，而且关于 h5 来说，没有新的东西，所以是比拼举荐的一种方式。但这种方式可能存在平安隐患，细致查看你不晓得的 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 由 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

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怎样进行交互？的细致内容，更多请关注百分百源码网其它相干文章！

打赏