移动端跨终端技术方案选型（思路）
Posted 前端向朔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端跨终端技术方案选型（思路）相关的知识，希望对你有一定的参考价值。
需求目的
在移动互联网时代，应用平台越来越多，有 android、ios、H5、小程序、快应用等，而小程序目前又有很多服务商，比如微信小程序、支付宝小程序、百度小程序、头条小程序、QQ轻应用，
我们的应用想要在用户能触达的平台和服务商中都能提供相应的产品服务，针对不同的端去编写多套代码，做各端的应用，产品运营和开发成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要，那有没有什么技术方案可以解决这个问题呢，让我们能一次开发，统一配置，到处提供统一服务。
多端统一技术方案是我们想要寻找的，我们需要寻找一套可靠、高效、一次开发，多端运行的优秀技术解决方案，来提升我们产品上线的效率，降低实现的技术成本，以及达到最好的产品效果。
结论总结
为此，我们对业界流行的一些技术方案进行了调查和预研，通过各个维度的综合比较，做出方案选型结论如下：
基于各个维度的综合比较，我们最终决定选择 Taro 作为我们多端统一技术方案选型。
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，
将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、QQ轻应用、快应用、H5、React-Native （可以嵌入iOS，Android原生App，体验较好））运行的代码。
依托 Taro 多端适配能力，丰富的自建组件库，强大的生态，活跃的社区，以及积极专业的开发者团队，可以保障我们用很低的开发成本实现多端应用的统一。
考虑因素
项目因素
- 项目规模，我们的应用需要支撑x级用户的使用
- 重要程度，xxx是我们团队及部门目前最主要的产品突破点
- 时间要求，目前xxx已经有很多产品需求，对于多平台的实验，技术实现时间上肯定是越快越好
- 需要支持SEO
- 希望是实现沉浸式的体验
- 希望能达到比现在更好的性能体验
- 希望能在更多的端实现统一的产品体验
团队因素
- 项目目前技术栈主要是 Vue + Next + VueX + Node
- 成员技术栈 Vue React Flutter React-Native
- 成员对现有技术的满意度以及对新技术的期望
技术因素
- 能否满足功能需求
- 能否满足性能需求
- 易用性
- 可维护性
- 可扩展性
- 技术成熟度
- 社区活跃度
- 开发者或支持团队活跃度
- 是否存在license问题
- 学习曲线如何
技术选型
候选技术
- 原生开发
- 阿里 Weex
- Facebook RN
- Google Flutter
- 京东 Taro
- 美团 MpVue
- DCloud uni-app
- 腾讯 Wepy
- 去哪儿 Nanachi
- 滴滴 Mpx
- 网易考拉 Megalo
- 微信支付 Omi-mp
- 滴滴 Chameleon
初步筛选
- 京东 Taro
- DCloud uni-app
- 美团 MpVue
- 腾讯 wepy
- 滴滴 Chameleon
详细对比
多端支持
| 多端/方案 | Taro | uni-app | MpVue | wepy | Chameleon |
|---|---|---|---|---|---|
| Android | row 1 col 2 | ||||
| iOS | row 2 col 2 | ||||
| H5 | row 2 col 2 | ||||
| 微信小程序 | row 2 col 2 | ||||
| 支付宝小程序 | row 2 col 2 | ||||
| 百度小程序 | row 2 col 2 | ||||
| 头条小程序 | row 2 col 2 | ||||
| 多端编译方式 | row 2 col 2 | ||||
| 跨端组件库 | row 2 col 2 |
流行活跃度
| 流行度/方案 | Taro | uni-app | MpVue | wepy | Chameleon |
|---|---|---|---|---|---|
| GitHub Star | row 1 col 2 | ||||
| GitHub issue/PR | row 2 col 2 | ||||
| NPM/CNPM 下载量 | row 2 col 2 | ||||
| 案例 | row 2 col 2 | ||||
| 开发者人数 | row 2 col 2 | ||||
| 自建开发者社区 | row 2 col 2 |
开发工具
| 工具/方案 | Taro | uni-app | MpVue | wepy | Chameleon |
|---|---|---|---|---|---|
| 语法规范 | row 1 col 2 | ||||
| IDE/图形化开发工具 | row 2 col 2 | ||||
| 语法校验工具 | row 2 col 2 | ||||
| TypeScript | row 2 col 2 | ||||
| Typing/自动补全 | row 2 col 2 | ||||
| 样式 | row 2 col 2 |
组件库/工具库/Demo
| 组件库/方案 | Taro | uni-app | MpVue | wepy | Chameleon |
|---|---|---|---|---|---|
| 第三方组件 | row 1 col 2 | ||||
| 第三方工具库 | row 2 col 2 | ||||
| Demo | row 2 col 2 | ||||
| 状态管理工具 | row 2 col 2 | ||||
| 转换微信小程序工具 | row 2 col 2 | ||||
| 自研组件库 | row 2 col 2 | ||||
| 自动构建 | row 2 col 2 |
现状未来
| 现状/未来 | Taro | uni-app | MpVue | wepy | Chameleon |
|---|---|---|---|---|---|
| 现状 | row 1 col 2 | ||||
| 未来 | row 2 col 2 |
对比结论：由于大厂支持下,Taro在生态和平台上都非常活跃，受广泛关注，并且基于开源社区的交流能让开发得到更即时的响应。
而uni-app在DCloud和Vue的官方推荐也有着广泛的应用场景，但使用QQ微信群的交流方式不利于寻找问题的答案，自建社区过于营销。
结果评审
评审意见：
多端支持：Taro > uni-app > Chameleon > mpVue > wepy
流行活跃度：Taro >mpVue > uni-app > wepy > Chameleon
开发工具： uni-app > Taro > wepy > Chameleon > mpVue
组件库/工具库/Demo： Taro > mpVue > uni-app > wepy > Chameleon
做出决定
基于以上各个维度的综合比较，我们最终决定选择 Taro 作为我们多端统一技术方案选型。
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，
将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、QQ轻应用、快应用、H5、React-Native 等）运行的代码。
依托 Taro 多端适配能力，丰富的自建组件库，强大的生态，活跃的社区，以及积极专业的开发者团队，可以保障我们用很低的开发成本实现多端应用的统一。
实践反馈
。。。
基本上技术选型按这个思路来，还是比较有说服力的。
END.
以上是关于移动端跨终端技术方案选型（思路）的主要内容，如果未能解决你的问题，请参考以下文章