HTML5和原生app怎样举行交互？【html5教程】,前端,javascript,app,android,ios

本篇文章给人人带来的内容是关于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<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，所以这类挪用就相对庞杂一点。

这类挪用经常运用有两种体式格局：

由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怎样举行交互？的细致内容，更多请关注ki4网别的相干文章！