# 前端跨平台方案
# 移动端
移动端包括: Web App(H5), 小程序, IOS App, Android App
# 三种程序采用的技术类型
# Web App
全部由前端开发, 适应各大主流手机浏览器即可
# App
H5嵌入, IOS、Android 套壳
Hybrid开发, 70% H5, 30%原生(比例由需求决定)
原生开发, 即IOS, Android
# 小程序
微信, 百度, 支付宝等等各类小程序, 由前端开发
# 跨平台开发框架对比
| uni-app | Taro | Flutter | RN | |
|---|---|---|---|---|
| H5 | ✔ | ✔ | ✘ | ✔ |
| 小程序 | ✔ | ✔ | ✘ | ✘ |
| IOS | ✔ | ✔ | ✔ | ✔ |
| Android | ✔ | ✔ | ✔ | ✔ |
| 技术栈 | Vue | React | Dart | React |
# 技术学习成本和难度
rn，要求开发者学习react，要求精通flex布局，要求原生开发协作。
flutter，要求开发者学习dart，了解dart和flutter的API、要求精通flex布局，要求原生开发协作。
taro, 要求开发者学习react, 了解小程序。
uni-app，要求开发者学习vue，了解小程序。
# 跨端性差异
flutter 和 rn，都是支持web技术的。但都是仅限于普通界面排版
涉及定位、摄像头、相册等复杂功能的，需要单独写代码的。
# 总结
- flutter的相对优势：
- 性能好一丢丢。比rn有优势，但比 uni-app，在实际开发中没有很明显的差距。
- flutter的相对劣势：
- 需要原生协作，维护3套代码，无法有效降低开发成本，提升开发效率
- 嵌套地狱，代码难看难维护
- 不支持热更新
- 目前质量和成熟度很低，github上的issue有5k+，很容易掉坑里
- ui库不适合国情
- 学习成本高
- dart未来扑朔迷离
- rn的相对优势：
- rn是纯单页的，嵌入原生App比较灵活。而uni-app是应用整体的概念，如果要内嵌入其他原生应用的话，要求原生应用内嵌uni-app应用整体进来
- rn的相对劣势：
- 需要原生协作，维护3套代码，无法有效降低开发成本，提升开发效率
- 不支持小程序，发布到h5也无法直接发
- ui库不适合国情
- 学习成本高，用人成本高
- rn是纯单页应用，如果一个应用的页面很多，用rn写会很崩溃，变量污染和干扰严重。而 uni-app支持多页面，页面之间上下文隔离，写页面较多的大型应用更合适
- 另外react在中国的市场占有率远不如vue。这也是中国与国外不同的特色情况。
# 建议
uni-app 使用的 vue 技术栈更符合现有资源, 在国内 vue 比 react 的生态更好
# PC端
# 节省重复开发成本
- 开发组件库
- 使用集成方案
两者对比:
- 组件库显然更加灵活, 但是需要人力维护, 编写组件, 书写文档, 磨平各项目间 UI 差异
- 集成方案相对冗余, 但是大部分功能都已经写好, 只需要进行联调
# 总结
开发组件库和使用集成方案都需要一点, 就是 UI 风格的统一
对于有特定风格要求的客户, 自己开发组件库, 可以更好的控制这一点
移动端适配 →