【移动端开发】三种跨平台技术

原理
- 将 App 需要动态变动的内容通过 H5 实现，通过原生的网页加载控件 WebView 来加载；
- WebView 本质是浏览器内核，h5 运行在内核之上，对系统能力没有访问权限；
- 混合框架通过框架代码实现一些访问系统内里的 api，暴露给 WebView 供 js 调用；（这种依赖于 WebView 用于 js 和原生之间通信并实现了某种消息传输协议的工具称为 WebView JavaScript Bridge，简称 JS Bridge）
代表
- Cordova
- Ionic
- 微信小程序
优点
- h5 对前端开发者友好，社区及资源丰富
缺点
- 性能不好，处理不了复杂界面或动画

原理
- js 和原生控件通信，进行原生渲染
代表技术
- React Native
  - RN 与 React 的主要区别在于虚拟 Dom 映射的对象不同， React 虚拟 Dom 最终映射为浏览器的 Dom 树，RN 中虚拟 Dom 通过 JS Core 映射为原生控件树；
  - RN 将虚拟 DOM 映射为原生控件树分两步：
    - 布局消息传递：将虚拟 DOM 布局信息传递给原生
    - 原生根据布局信息通过对应的原生控件渲染控件树
- Weex
  - 阿里巴巴 2016 年发布的跨平台框架，思想和原理类似 RN，区别在于支持 Vue 语法；
- 快应用
  - 华为、小米、OPPO、魅族等国内 9 大主流手机厂商共同制定的轻量级标准
优点
- 原生控件渲染，所以性能比 h5 好
缺点
- RN 和 weex 的渲染/排版引擎集成到框架中，每个 App 需要打包一份，安装包比较大；
- 渲染时需要 js 和原生之间通信，有些场景会造成卡顿；
- 渲染依赖原生控件，当系统更新时，代码控件可能滞后；

原理
- 在不同平台实现一个统一接口的渲染引擎来绘制 UI，而不依赖原生控件。可以做到不同平台 UI 的一致性；
- 自绘引擎解决的是 UI 跨平台问题，若涉及其他系统能力调用，依然要依赖原生开发；
代表技术
- Flutter （google 推出）
- QT for mobile
优点
- 性能高：自绘引擎直接调用系统 API 绘制 UI，性能和原生控件接近
- 不依赖原生控件，组件库易维护
- 开发效率高：Flutter 的热重载支持在模拟器或真机上实现毫秒级热重载（传统原生应用开发做不到）
缺点
- 新的学习成本

【h5 + 原生】【js + 原生控件】【自绘引擎 + 原生调用】