关闭

h5 与原生 app 交互的原理

时间: 2018-11-06阅读: 1132标签: 移动端

现在移动端 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

@interface AppSdk : NSObject
{}
- (int) double:(int)value;
- (int) triple:(int)value;
@end

@implementation AppSdk
- (int) double:(int)value {
  return value * 2;
}
- (int) triple:(int)value {
  return value * 3;
}
@end

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

context[@"appSdk"] = appSdk;

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


后续

更多博客,查看 https://github.com/senntyou/blogs
作者:深予之 (@senntyou)


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1267

关闭

js判断pc端和手机端

js判断是否为移动端代码,获取用户userAgent代理头的值,进行匹配判断,如果匹配到就进行跳转到移动端。查看当前代理头信息在浏览器中按F12进入调试模式,查看请求

移动端 滚动隐藏浏览器地址栏和工具栏

文章中实现原理其实很简单,强制页面高度超过手机屏幕高度,手动滚动时会隐藏浏览器自带地址栏和工具栏(qq浏览器不会隐藏工具栏).原理:js模拟用户滚动,scrollTo.

移动端 h5 ios不能自动播放音乐的问题解决

如果我们想要在一个页面自动播放背景音乐或是其他音频,在真机上往往需要使用一些其他方法才可以,比如ios是没办法调用audio.play()事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法

移动端重置样式 特殊处理

禁止用户选中文字,安卓无效 ­webkit­user­select: none;禁止长按弹出系统菜单。 ­webkit­touch­callout: none;

rem.js的用法及在浏览器端的适配

更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局、cover布局、container布局 这几种布局在大多数情况下不限制高度的页面下还是相当有用的

移动端事件穿透的原理与解决方案

解决事件穿透还有通过设置动画过渡延迟元素消失等方法,由于这类方法影响用户体验,不一一介绍。在实际项目开发中,纯移动端项目优先推荐禁用 click 事件的方法,多端项目优先推荐禁用 touch 事件的方法

整理经常在H5移动端开发遇到的知识

viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈),本篇文章主要是讲一些其他的或者优化手段。内容不多

移动端适配的实现

rem原理通过设置html的fontSzie来实现动态rem,其实就是将页面百分比化 ,html为50px; 可以得到1rem为50px(html被分为100rem)。那么:box的1.25rem宽度就可以得到为(50*1.25)px

vconsole_移动端h5开启控制台的实现

开发内嵌在 web,可能会遇到意想不到的 bug,所以你需要你能在手机上查看的控制台。前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

移动端H5开发遇到的坑

微信分享签名错误invalid signature,往返缓存问题,IOS端不支持new Date(\"2019-01-01 00:00:00\") 这种格式,微信二维码,IOS中无法点击,audio音频无法播放,fixed问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!