本文目录
[[toc]]
跨平台概述
分类
主流分类方案是按照渲染方式分类，分别为 Web 渲染、原生渲染、自渲染引擎渲染
Web 渲染
在 APP 中嵌入 webview ，通过 webview 加载前端 html ，原生能力通过 JS Bridge 等方案实现。
常见工具例如 Electron 、 默认 uniapp 也是 webview 渲染
优点:
- 兼容性较好: 只要支持 webview 的平台都可以快速移植适配，兼容性问题少
- 开发效率高: 能够将 web 快速迁移至 APP ，上手成本较低
- 可维护性好: 底层设计上就将 APP 与 web 分层，开发关注点较少
- 支持在线升级: 支持在线升级，在 APP 端与 JS Bridge 没有变化的情况下，只需要将 APP 页面替换即可直接升级
缺点:
- 性能较差: 需要先初始化 webview ，再等待 web 首屏渲染（白屏）
- 功能受限: 受限于 JS Bridge 提供的能力，部分原生能力无法完整提供，例如传感器功能
- 用户体验差异: 无法保证各个平台提供的 webview 能力一致，可能会有体验差异
原生渲染
原生渲染是将前端代码通过 Bridge 转换为原生组件，完成的原生应用开发，可以解决 web 渲染的 webview 初始化、白屏等问题。
常见工具例如 uniapp 的 nvue 模式、 React Native 、 Weex 、 Kotlin 等。
优点:
- 性能较好: 使用原生组件渲染，性能比 web 渲染更强
- 原生能力: 可以使用完整的原生能力，包括摄像头、传感器、蓝牙等等
缺点:
- 开发成本高: 除了 web 代码，往往还需要涉及各个平台的原生代码，如 Java 、 Object-C 等
- 更新困难: 只能通过应用商店或者后台下载安装包的形式更新
- 跨平台复杂: 部分原生能力在跨平台下有不同的支持程度与实现方案，需要区分平台单独实现
自渲染引擎渲染
自渲染引擎摒弃了原生渲染，使用更加底层的 OpenGL 能力完成视图渲染，性能更好，跨平台体验更加一致。
常见的有 flutter 、 QT 、 Unity 等。
优点:
- 定制性强: 可以根据业务定制不同的交互、视觉效果
- 性能上限高: 不需要额外转换，直接控制渲染结果，整体链路短，性能更强
- 技术独立: 不依赖于原生渲染，通过自渲染可以保证各个平台体验一致，减少兼容问题
缺点:
- 开发难度大: 需要了解计算机图形学等知识，才能更好的控制自渲染引擎
- 兼容性: 需要考虑渲染引擎在不同平台的兼容性问题
- 维护成本高: 自渲染引擎的维护、测试都有较高的成本
分层
常见做法是将 APP 分为四层:
- UI 框架: HTML/CSS 、 Flutter/QT QML 、 React 等
- 运行时支持: JS Core/V8 、 Dart/C++ 等
- 平台抽象层: Web IDL 、 自建抽象等
- 渲染层: WebKit/Blink/Gecko 、 OpenGL/Skia 、 UIKit / ArkUI 等