【Hybrid App 实战】:分享首次Hybrid App开发总结

1、前言：为何要选用Hybrid App技术?

1. 背景

以前就任于一家较小的金融科技公司（base HangZhou），因为大环境的不景气，公司同事也变更比较大，原先的ios工程师已离职，android工程师已转为java后台开发。公司原本打算放弃掉app端的业务，可是今年6月中旬又意外接到某民营银行的p2p外包业务，须要开发终端app（工期两个月）。

2. 技术选型

1. 原生开发

实际上公司以前是有开发过相同业务场景的app的，咱们首先想到的第一个解决方案是否能够将类似app仅修改少部分UI来避免二次开发。后来派我方产品人员进行需求沟通的时候发现与以前开发的那套app主流程基本不一致，并且没有ios同窗进行二次开发遂放弃。

2. Flutter

Flutter是目前很是火热的一门跨平台技术。利用Dart语言，也支持AOT以及JIT两种编译方式。Flutter的渲染不依靠原平生台，而是经过本身的SKia渲染引擎，因此对于多端的表现一致性上是比RN优秀的。可是能力有限，我也只是demo阶段学习。遂本次开发也不会采用。（目前本身也是学习 中）

3. React Native

以前公司前端团队（也就在1-3人浮动）一直由我主导使用的是React技术栈，可是大多都是应用在中后台管理系统，H5端使用的是Vue技术栈。RN只有以前我只是简单的写过demo，也没有过实战经验。RN虽然支持跨端，可是在各平台的表现形式上仍是有必定差别,RN中与原生的交互须要太多的原平生台知识的支撑。考虑成本以及可行性遂放弃。（目前本身在研究RN 中）

4. Hybrid

Hybrid技术也就是混合开发，将咱们的H5页面嵌到Native App的Webview中。经过JSBridge来做为H5与Native之间的桥梁，H5能够传递数据以及调用Natvie的方法，反之Native亦可与H5通讯。这样咱们经过一套h5页面就是能够同时覆盖到安卓与ios两端。（目前市面上有较多成熟的Hybird框架：AppCan、cordova等）时间成本最低可是性能最差的方案（与客户沟通后，客户赞成使用此技术方案）。

2、Hybrid技术原生与H5交互的实现方式有哪些？（JsBridage 原理）

1. 拦截 URL SCHEME

1. URL SCHEME 是一种相似于url的连接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 通常是自定义的。例如: jsbridge://methodName?param1=value1&param2=value2；
2. 主要流程是：Web 端经过某种方式（例如 iframe.src）发送 URL Scheme 请求，以后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操做。
3. 缺点：使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。
4. 注意点：为何选择 iframe.src 不选择 locaiton.href ？由于若是经过 location.href 连续调用 Native，很容易丢失一些调用。

2. 注入api/对象

原理：经过WebView提供的接口向js的context（window）注入一个对象或者方法，js调用时，直接执行对应的Native代码逻辑。

3. 改写浏览器原有对象

1. 原理：使用prompt,console.log,alert方式，在android webview这一层能够重写这些方法。通常常使用prompt，由于这个在js里使用的很少，用来和native通信反作用比较少。
2. 举例：Web页面经过调用prompt()方法，安卓客户端经过监听onJsPrompt事件，拦截传入的参数，若是参数符合必定协议规范，那么就解析参数，扔给后续的Java去处理。这种协议规范，最好是跟iOS的协议规范同样，这样跨端调起协议是一致的，但具体实现不同而已。好比：hybrid://action?arg1=1这样的协议，而其余格式的prompt参数，是不会监听的，即除了hybrid://action?arg1=1这样的规范协议，prompt仍是原来的prompt。

3、我在项目中是如何进行原生与H5交互的

1. h5调用app里的方法（暴露一个java对象给js，使得js能够直接调用方法）

// android端代码
// 将Android里面定义的类对象AndroidJs暴露给javascript
webView.addJavascriptInterface(new AppJs(mContext), "AppJs");

// h5端代码
closeKeyboard() {
    AppJs.closeKeyboard();
 },
复制代码

2. app调用h5中的方法（拦截到指定的url调用js挂在window对象上的方法）

// h5端代码
mounted() {
    window["getAppResult"] = result => {
      if (result) {
        router.push({
          path: "/account/open/next",
          query: { bankAccountName: this.name, certNo: this.certNo }
        });
      } else {
        Toast.succeed("活体检测失败");
      }
    };
  }
  
 // android端代码
  webView.evaluateJavascript("javascript:getAppResult(true)",
    new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
    
        }
    });
复制代码

4、 Hybrid的缺点

1. 基于Webview,WebView 的渲染性能比Native差不少;
2. JavaScript 是解释执行语言，运行效率也比 Native 差;

5、若是采用Hybrid技术，如何优化咱们的项目

1. 使用离线包来解决网页加载速度慢的问题；（好文推荐:转转hybrid app web静态资源离线系统实践）
2. H5代码自身优化Dom渲染等提高网页渲染效率；

参考文献

• Hybrid 开发：JsBridge - Web和客户端的桥
• 移动混合开发中的 JSBridge