深入了解Hybrid App技术的相关知识

Charlotte ·

更新时间:2024-11-15

· 545 次阅读

背景

随着Web技术的发展和移动互联网的发展，Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢？

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 "。

总的来说，就是既具有APP的体验和性能，又具有Web灵活的开发模式和跨平台开发能力。

现有的技术方案

1、H5 + JSBridge，通过JSBridge完成H5和Native的通信，赋予H5一定的端能力。是一种基于WebView UI的解决方案。

2、React-Native，进一步通过JSbridge将js解析为虚拟DOM传递到Native，并使用原生进行渲染。

3、小程序解决方案，采用双线程的渲染机制，将渲染层WebView和逻辑层JavaScriptCore形成独立的模块，通过Native进行通信（setData），逻辑层的网络请求也会由Native进行转发。在UI方面，采用的是WebView和原生相结合的方式。

技术原理

本文将从jsbridge的原理、实现、双向通信、接入方式和H5的嵌入方式进行详细阐述。

jsbridge的原理

客户端能对WebView中请求进行拦截，都有相应的API：

Android:


// Android: shouldoverrideurlloading 
public boolean shouldOverrideUrlLoading(WebView view, String url){
  //读取到url后自行进行分析处理
  //如果返回false，则WebView处理链接url，如果返回true，代表WebView根据程序来执行url
  return true;
}

IOS:


// IOS: shouldStartLoadWithRequest 
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  NSURL *url = [request URL];
  NSString *requestString = [[request URL] absoluteString];
  //获取url scheme后自行进行处理

因此，在页面中可以通过iframe加载src的方式触发相应的捕获函数，在捕获函数中可以对url中的参数进行解析；此外，Android还可以通过重写OnJSPrompt方法，对调用Prompt进行拦截，同样能实现通信的目的。

示例：

调起ios端：


function iosInvoke(scheme) {
  var elem = document.createElement('iframe');
  var body = document.body || document.getElementsByTagName('body')[0];
  elem.style.display = 'none';
  elem.src = scheme;
  body.appendChild(elem);
  setTimeout(function () {
    body.removeChild(elem);
    elem = null;
  }, 0);
}

调起android端：


function androidInvoke(scheme) {
  var androidJsBridge = window.Bdbox_android_jsbridge;
  if (androidJsBridge && androidJsBridge.dispatch) {
    androidJsBridge.dispatch(scheme);
  } else {
    var re = window.prompt('BdboxApp:' + JSON.stringify({
      obj: 'Bdbox_android_jsbridge',
      func: 'dispatch',
      args: [scheme]
    }));
    return re;
  }
}

协议制定URL Scheme

URL Scheme是什么

由于苹果的app都是在沙盒中，相互是不能访问数据的。但是苹果还是给出了一个可以在app之间跳转的方法：URL Scheme。简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。

每个app的URL Scheme都是不一样的，如果存在一样的URL Scheme，那么系统就会响应先安装那个app的URL Scheme，因为后安装的app的URL Scheme被覆盖掉了，是不能被调用的。

设置URL Scheme