混合应用开发

现有混合方案

Hybrid App，俗称混合应用，即混合了 Native 技术 与 Web 技术 进行开发的移动应用。现在比较流行的混合方案主要有三种，主要是在 UI 渲染机制上的不同：

1. 基于 WebView UI 的基础方案，市面上大部分主流 App 都有采用，例如微信 JS-SDK，通过 JSBridge 完成 H5 与 Native 的双向通讯，从而赋予 H5 一定程度的原生能力。
2. 基于 Native UI 的方案，例如 ReactNative、Weex。在赋予 H5 原生 API 能力的基础上，进一步通过 JSBridge 将 JS 解析成的虚拟节点树（Virtual DOM）传递到 Native 并使用原生渲染。
3. 另外还有近期比较流行的小程序方案，也是通过更加定制化的 JSBridge，并使用双 WebView 双线程的模式隔离了 JS 逻辑与 UI 渲染，形成了特殊的开发模式，加强了 H5 与 Native 混合程度，提高了页面性能及开发体验。

以上的三种方案，其实同样都是基于 JSBridge 完成的通讯层，第二三种方案，其实可以看做是在方案一的基础上，继续通过不同的新技术进一步提高了应用的混合程度。因此，JSBridge 也是整个混合应用最关键的部分，例如我们在设置微信分享时用到的 JS-SDK，wx 对象 便是我们最常见的 JSBridge:

wx.config({
  debug: false,
  appId: conf.appId,
});

wx.ready(() => {
  wx.onMenuShareAppMessage({
    title: data.title,
    desc: data.summary,
    link: data.url,
    imgUrl: data.pic,
  });
});

工具链

1. 离线包：Web 页面资源以离线包的形式内嵌在 App 本地存储中。当访问页面的时候，WebView 对于本地存储的资源无须额外发起的网络请求，直接读取。而剩下的请求中，就只剩下 Ajax 拉取的 Json 动态数据，和渲染这部分数据时携带的图片资源，以及一些必要的埋点请求。这使 Web 页面即是在弱网的情况下也可以很快的打开；
2. 完善的 JSSDK：使用 JSSDK 与 App 进行交互，透明且跨平台地使用客户端的能力，形成交互闭环，给用户良好的交互体验；
3. 离线包打包工具：自动化打包工具能快速的产出离线包。没有了人工干预，App 离线包正确性也能得以保证；
4. 完善的热更新机制：App 客户端监测到离线包更新之后，客户端静默更新（用户无感知），解决了 Native App 页面不能补丁更新，只能发版修复 Bug 的问题；

完善后台系统平台

1. 一键打包：内嵌页离线包打包工具可视化，实现一键打包产出离线包；
2. 降级融灾：快速回退至之前版本，如有问题，快速下线新版本功能；
3. 数据采集：完善的数据采集平台，通过数据分析优化用户体验；
4. 灰度更新：支持根据配置进行灰度更新；
5. 持续集成：系统平台目前还在持续集成当中，为提供更好的开发流程；

参考资料：

• 起点 Hybrid App - 内嵌页优化实践