hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

HTML5和原生app怎样举行交互?【html5教程】

2019-11-26HTML搜搜PHP网55°c
A+ A-
本篇文章给人人带来的内容是关于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 中挪用这些对象。

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 运用破绽。

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

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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML5和原生app怎样举行交互?【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章