现如今市面上端的形态多种多样,Web、ReactNative、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。由于我们团队的开发更偏向 React 技术栈,所以我们考虑基于 React 语法提供一套解决方案。
对比了社区时下最流行的多端脚手架,我们最终选择了由京东·凹凸实验室倾力打造的多端开发解决方案Taro ,选型依据详见下表:
| 技术栈 | Vue | React | |||||
|---|---|---|---|---|---|---|---|
| 多端脚手架 | chameleon | mpvue | uni-app | wepy | taro | nanachi | |
| 开发工具 | DSL | 类Vue | vue | vue | 类vue | React15 | React |
| IDE/图形化开发工具 | 无 | 无 | 有 | 无 | 无 | 无 | |
| 语法校验工具 | 自研 | 无 | IDE支持 | 无 | ESLint规则 | 无 | |
| TypeScript | 无 | 有 | 有 | 有 | 有 | 无 | |
| Typing/自动补全 | 无 | AP | IDE支持 | 无 | API+JSX | 无 | |
| 样式 | sass,less,styus | sass,less,stylus | sass,less,styus | sass,less,styus | sass,less,styus,CSSModules | sass | |
| 多端支持 | 小程序支持 | 微信、百度、支付宝 | 微信,百度、支付宝,字节跳动 | 微信,百度、支付宝,字节跳动 | 微信、百度、支付宝 | 微信、百度,支付宝,字节跳动 | 微信、百度、支付宝、快应用 |
| 移动端容器 | Weex | 无 | Weex | 无 | ReactNative | ReactNative | |
| 移动端增强 | chameleonSDK | 无 | nvue | 无 | Expo | 无 | |
| 多端编译方式 | 自研多态协议 | 环境变量条件编译 | 自研条件编译语法 | 环境变量条件编译 | 环境变量+文件条件编译 | 环境变量条件编译 | |
| H5兼容AP1 | 自研多态协议 | 无 | 有 | 无 | 有 | 有 | |
| 跨端组件库 | 有 | 无 | 有 | 无 | 有 | 有 | |
| 组件库/工具库/demo | 第三方组件 | 较少 | 丰富 | 丰富 | 丰富 | 较丰富 | 较少 |
| 第三方工具库 | 较少 | 较丰富 | 丰富 | 丰富 | 较丰富 | 较少 | |
| Demo | 较少 | 较丰富 | 较丰富 | 丰富 | 较丰富 | 较少 | |
| 状态管理工具 | vuex | vuex | vuex | Redux | Redux/MObX/Dva | 自研globalData | |
| 转换微信小程序工具 | 无 | 无 | 无 | 有 | 有 | 无 | |
| 自研组件库 | 有 | 无 | 有 | 无 | 有 | 有 | |
| 流行度 | GitHubStar | 3843 | 16281 | 2921 | 16779 | 16084 | 2470 |
| GtHubssue/PR | 68/8 | 1369/104 | 215/18 | 1662/441 | 2026/368 | 195/11 | |
| NPM+CNPM下载量 | 241/周 | 1971/周 | N/A | 976/周 | 4332/周 | 372/周 | |
| 案例 | 较少 | 丰富 | 非常丰富 | 丰富 | 丰富 | 较少 | |
| 开发者人数 | -~1000人 | ~5000人 | 10000+ | ~5000人 | ~5000人 | ~500人 | |
| 自建开发者社区 | 无 | 无 | 有 | 无 | 无 | 无 | |
| 其他 | 其他 | 1、半开源,二次开发困难 | 1、微信优先 2、微信虚拟dom模仿react 3、底层依赖nervjs可直接别名代替react |
1、不能直接启动h5服务器 2、路由刷新白屏 3、支付包支持优先 4、demo必须快应用才能预览 5、微信小程序异常 |
|||
| 备注:数据采集于2019年3月11日,以各框架目前稳定版特性为标准 | |||||||
| 结论:taro可以用于公司内部开发小程序和公众号。主要考虑因素如下: 1、公司前端以React技术栈为主 2、React技术栈对微信和h5的支持最好 3、社区活跃,issue响应快,经过项目实战验证,暂时没发现致命问题 4、多端能力强:可以支持RN和其他小程序 |
基于Taro,结合了公司现有公共能力,我们提供了移动 WEB 多端脚手架,此外考虑到Taro官方提供的扩展UI库Taro UI成熟度不足,且无法满足内部定制需求,我们在此基础上提供了移动 WEB 多端 UI 组件库rtaro-ui。
此外,如果你只是想开发小程序也可以使用移动 WEB 多端脚手架,小程序官方框架并没有融合目前主流的工程化开发思想,例如不完整的 ES.Next 语法,较为封闭的开发工具等等,这使得很多业界开发模式与工具不能在小程序开发中得到相应体现,像是从前端工业时代回退到了刀耕火种的年代。
参考资料:
第三方框架和官方框架的对比
小程序开发:用原生还是选框架
我们评测了 5 个主流跨端框架,这是它们的区别
