1.什么是混合开发?

Hybrid App , 混合了Native技术和web技术进行开发的移动应用

• 本质就是在原生App中,使用webview作为容器,来承载一个页面

• 核心就是原生(Native)和web端的双向通讯层(跨语言解决方案)

  • JsBridge

    • 定义: 一座用JavaScript搭建起来的桥,一端是Web,一端是Native
    • 目的: 让Native可以调用web的JavaScript代码, 让webk可以调用Native的原生代码

    

  • 流行的混合开发方案

    • 基于Webview UI (JSBridge)

    • 基于Native UI (ReactNative, weex)

    • 小程序方案(微信,支付宝小程序)

  • 合作流程

    • 原生端完成webview布局

    • 通过webview构建JSBridge对象

    • 提供调用文档给web对象, web端根据调用文档完成互调

2.Android IOS的双向通讯对比

• 相同点

  • 都是通过webview来完成网页的加载

  • 都是通过向window注入对象的方式来提供可被web端调用的方法

  • 都可以直接调用web端挂载到window对象下的方法

• 不同点

  • 注入对象不同

    • Android可提供注入对象名

    • ios固定为webkit

  • js调用Native方式不同

    • 面向Android可直接获取注入对象,调用方法

      let object = JSON.stringify({
             'username': this.username,
             'password': this.md5Password
       })
      Android 只能接收基本类型参数
      window.androidJsBridge.onfunc(object)
      

    • 面向IOS为相对固定的写法

      window.webkit.messageHandlers.onfunc.postMessage('入参对象')
      

  • 传递数据格式不同

    • 面向Android只能接受基本类型数据

    • 面向ios可以接受任意类型的数据

  • 返回值不同

    • 面向Android可以直接接受返回值

    • 面向IOS没有办法直接获取返回值

      IOS 不能直接返回返回值，所以 IOS 操作完成之后会回调对应的回调方法。
同时原生调用 JS 的方法只能使调用 绑定到 window 对象中的方法。 所以我们需要把 IOS 操作完成之后的回调方法 (registerCallback) 绑定到 window 对象下

      window.registerCallback = this.onRegisterCallback;
      // 调用 IOS 注册方法
      window.webkit.messageHandlers.register.postMessage(userObj);
      // 用来处理 Native 注册接口的返回值
      onRegisterCallback (result) {
      if (result) {
         // 
      } else {
         alert('注册失败，请重试！');
      }
      

    }

3.Hybrid和H5的优缺点对比

优点

• 体验更好 跟NA体验基本一致 (file协议)
• 可快速迭代 无需app审核

缺点

• 开发成本高, 联调 测试 查bug都比较麻烦

4.Hybrid更新流程

• 分版本, 有版本号, 如201803
• 将静态文件压缩成zip,上传到服务端
• 客户端每次启动,都去服务端检查版本号
• 如果服务端版本号大于客户端版本号,就去下载最新的zip包
• 下载完之后解压包 然后将现有文件覆盖

5.适用的场景

Hybrid

• 产品的稳定功能 体验要求高 迭代频繁

H5

• 单次的运营活动(如抢红包) 或不常用的功能

6.在互联网中访问 WEB 项目