跨平台开发框架介绍

前记：现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。 根跨平台兼容较多的为Taro，uni-app，chameleon等3款；若只需兼容微信小程序的话则市场上使用较多的是mpvue及WePy；

表格对比

• 表格做简单对比，具体详细信息可查看下方具体内容。

	Taro	uni-app	chameleon	mpvue
开源 公司	京东 （凹凸实验室）	DCloud	滴滴	美团
适用编辑器	–	HBuildX	–	–
语言 规范	类React	vue	类vue	vue
模板 系统	JSX	字符串模板	字符串模板	字符串模板
组件化	React组件规范	自定义+vue组件规范	自定义组件规范	vue组件规范
数据流管理	Redux	Vuex	chameleon-store	Vuex
支持 平台	小程序（微信/支付宝/百度/字节跳动），快应用，RN，H5	App(iOS，Android)，小程序（微信，支付宝，头条，百度），H5	小程序（微信，支付宝，百度），H5，native-weex，快应用	微信小程序
自动 构建	Taro CLI	HbuildX开发工具 + vue CLI	chameleon-tool	CLI + webpack
上手 成本	熟悉React	熟悉vue.js	熟悉vue.js+chameleon	熟悉vue.js
UI组 件库	https://taro-ui.aotu.io	https://uniapp.dcloud.io/component/README	–	–
官方 社区	–	http://ask.dcloud.net.cn/explore/category-11	–	–
GitHub	https://github.com/NervJS/taro issue: 333op, 1470 PR: 32open, 302 star: 14422	https://github.com/dcloudio/uni-app issue: 43op, 136 PR: 3open, 15 star: 2227	https://github.com/didi/chameleon issue: 333op, 1470 PR: 32open, 302 star:2037	https://github.com/Meituan-Dianping/mpvue issue: 4op, 34 PR: 0open, 3 star: 15787
慕课	课程2个，手记18条，猿问11条	课程–，手记–，猿问5条	课程2个，手记18条，猿问11条	课程1个，手记91条，猿问33条
掘金	20条左右	10条左右	–	100条左右
CSDN	9页内容	12页内容	–	13页内容
极客	17条数据	–	3条数据	8条数据
开源 时间	18年6月份	18年10月份	19年1月份	18年3月份

1：Taro

1.1：基本介绍

• Taro由京东的O2开发团队推出；从开源到现在不足1年的时间，taro从18年3月份开始立项，6月份开始开源；初期是为了使用react的语法来写微信小程序；作为微信小程序的开发框架而诞生，后期为了更多的需求逐步兼容快应用，react native应用；所以在兼容性上H5页面及微信小程序兼容最好；有专门的开发团队，后期维护比较有保障。
• 开发语言为React规范，模板系统为JSX；上手成本需熟悉React，数据流管理为Redux。且京东团队研发出了一款类React框架Nerv;
• 有配套的开发工具Taro CLI让开发流程自动化，可以从命令行开始创建项目
• 目前官网表示已适配微信小程序，H5，React Native，支付宝小程序，百度智能小程序，字节跳动小程序；快应用及QQ浏览器轻应用待上线；需注意的是目前官网上的应用案例皆为微信小程序。
• 另外微信小程序代码可由Taro工具进行转化成Taro代码。
• Taro实现原理
  

1.2：学习成本

• 学习成本为需熟悉React，以及react的相关技术栈；可使用京东的Nerv框架，与react类似，由于本公司的主要技术栈为react，学习成本不大；

1.2.1 Taro 组件库

• 官网提供基于Taro框架开发的多端UI组件库 https://taro-ui.aotu.io/#/

• 官网中有便于开发的组件库，可直接使用 https://nervjs.github.io/taro/docs/components-desc.html

1.2.2：跨平台开发注意事项

• 由于跨平台较多，有很多常见前端的一些事件与方法在Taro中可能并不适用，所以需要格外注意；参考官网中所注的“开发前注意”的相关问题需熟知；

​ 链接：https://nervjs.github.io/taro/docs/specials.html

• 另在使用Taro时需遵循其官网标出的Taro规范限制；其中大部分限制在本公司项目中已有，内容较多，需细心调试开发；可用eslint进行限制提示；

​ 链接：https://nervjs.github.io/taro/docs/spec-for-taro.html

1.2.3：根据不同平台配置不同

• 编译配置 https://nervjs.github.io/taro/docs/config.html
• 编译配置详情 https://nervjs.github.io/taro/docs/config-detail.html

1.3：学习途径

• 项目官网： https://nervjs.github.io/taro/ https://taro.js.org/
• 项目GitHub： https://github.com/NervJS/taro
• 另可参考1.5中所列各大平台中的资料进行学习

1.4：构建

• 具体安装及使用参考官网，均使用命令行实现； https://nervjs.github.io/taro/docs/GETTING-STARTED.html
  

1.5：各大网站数据

1.5.1：GitHub

• GitHub中与2.11及2.12查看数据，其中issue中的提问及关闭皆有更新；2.11中数据为 issue: 325open, 1458closed；Star: 14353；表明在GitHub中更新较快；

1.5.2：慕课网

https://www.imooc.com/search/course?words=taro

• 课程有2条，一个学习人数为132（收费266元），另一个为6616（免费）；其中手记有18条，猿问有11条数据。用户较多；

1.5.3：极客时间

https://s.geekbang.org/search/c=0/k=taro/t

• 搜索结果有20个左右，其中与Taro相关的为17条左右。靠前的文章发布者多为Taro框架开发者凹凸实验室；

1.5.4：CSDN

https://so.csdn.net/so/search/s.do?q=taro&t= &u

• 分页有9页，条目800多条不准确；博客文章较多。用户比较活跃

1.5.5：掘金

https://juejin.im/search?query=taro

• 大部分文章为Taro框架开发者凹凸实验室所发表。

2：uni-app

2.1：基本介绍

• uni-app由DCloud推出；从官网上18.1.12日开始进行内测，18.10.10日1.0.0版正式发布，迄今为1年时间左右；开发需在Dcloud自己研发的开发工具HbuildX中开发，调试效果最佳；兼容适配面较广，支持一套代码生成App(iOS，Android)，小程序（微信，支付宝，头条，百度），H5等多套代码；官方示例以上平台皆有产品展示；可靠性较高。
• 开发语言为Vue，模板系统为字符串系统；上手成本需熟悉Vue，数据流管理为Vuex。
• 开发App必须使用HBuildX，其他编辑器搭配Cli只能开发小程序及H5；

2.2：学习成本

• 开发编辑器最好需更换成HBuildX，熟练Vue及Vue相关技术栈；开发某种平台项目则需遵守该平台所定规则。

1.2.1：uni-app 组件库

• 官网中有便于开发的组件库，可直接使用 https://uniapp.dcloud.io/component/README

1.2.2：跨平台开发注意事项

• 由于跨平台较多，官网中已分别列出开发各平台时候的注意事项，开发前需了解并熟悉，避免踩坑。

​ 链接：https://uniapp.dcloud.io/matter

1.2.3：根据不同平台配置不同

• 编译配置 https://nervjs.github.io/taro/docs/config.html
• 编译配置详情 https://nervjs.github.io/taro/docs/config-detail.html

2.3：学习途径

• 项目官网： https://uniapp.dcloud.io/
• 项目GitHub： https://github.com/dcloudio/uni-app
• 另可参考1.5中所列各大平台中的资料进行学习

2.4：构建

https://uniapp.dcloud.io/quickstart

• 使用HbuildX开发工具，从创建，打包，发行皆可直接操作。
• 使用Vue-cli进行安装，创建，运行并发布。

2.5：各大网站数据

2.5.1：GitHub

• GitHub中与2.11及2.12查看数据，其中issue中的提问及关闭皆有更新；2.11中数据为 issue: 43open, 133closed；Star: 2200；表明在GitHub中更新较快；

2.5.2：慕课网

https://www.imooc.com/search/wiki?words=uni-app

• 无相关课程；其中手记无相关数据，猿问有5条数据左右。活跃度不高；

2.5.3：极客时间

https://s.geekbang.org/search/c=0/k=uni-app/t=

• 无相关内容

2.5.4：CSDN

https://so.csdn.net/so/search/s.do?p=12&q=uni-app

• 分页有12页，条目2000多条不准确；活跃度还行

2.5.5：掘金

https://juejin.im/search?query=uni-app

• 有关uni-app的帖子数量为10来条，数量不多，活跃度不高

2.5.6 DCloud官网推荐社区

http://ask.dcloud.net.cn/explore/category-11

• 发帖数量较多，基本问题上有回复数据，活跃程度较高。

3：chameleon

由滴滴团队打造，有类似于微信小程序打造出了一套滴滴的代码规则，名称即为chameleon，相应的为CML+CMSS+JS；语法有两套，分为CML-标准语法，CML-类vue语法；构建有自带的chameleon-tool脚手架工具，可根据不同环境进行初始化项目，进入开发/生产模式，分不同环境进行查看帮助信息，开发模式构建，执行打包模式构建。面世较晚，网络查阅相关网站上资料较少，部分网站上的内容基本照搬官网；社区生态不如以上两款活跃；

由于滴滴团队在相关网站上进行贬低另两家，感觉人品有问题，就不在这介绍了，当然。

若有兴趣可于官网学习，

• GitHub：https://github.com/didi/chameleon

• 官网：https://cmljs.org/#/

• 学习demo https://github.com/beatles-chameleon/cml-demo

4：mpvue

以上3款介绍的都是支持多平台应用，但若只是需要做到H5与微信小程序的两端共用1套代码的话则由WePy与mpvue等几款框架；由于社区上查看到WePy出来较早，坑比较多，且它只是类Vue语言，学习成本较高，故以下主要介绍mpvue框架。

4.1：基本介绍

• mpvue（官网）由美团推出；且美团点评在多个实际业务项目中得到验证才开源；GitHub最早一条发布记录为18.3.14日。
• 官网表明未来最理想的状态是可以一套代码直接跑在多端：web，小程序（微信和支付宝），Native（借助weex），至今未出现相关介绍；
• mpvue （github 地址）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验

4.2：学习成本

• mpvue保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力

• mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力

• 修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件

• 熟悉vue及vue相关的技术栈；

4.2.1：mpvue 组件库

• 支持vue.js的组件模块内容，不过只能使用单文件组件（.vue 组件）的形式进行支持。
• mpvue 可以支持小程序的原生组件

4.2.2：跨平台开发注意事项

• 由于基本只适配微信小程序且构造基本为vue，所以在构建项目时需遵守vue.js及微信小程序的规范进行构建项目。有以下相关不支持内容。

http://mpvue.com/mpvue/#_6

4.3：学习途径

• 项目官网： http://mpvue.com
• 项目GitHub：https://github.com/Meituan-Dianping/mpvue
• 另可参考1.5中所列各大平台中的资料进行学习

4.4：构建

http://mpvue.com/build/

• 通过webpack完成将template转换为wxml和样式转换优化以及其他的若干代码的拼接混淆等操作。
• 为了有需要自定义配置的程序猿们出了个命令行工具cli，可以一键构建出需要的项目结构和配置。

4.5：各大网站数据

4.5.1：GitHub

• 数据基本趋于稳定，issue中closed栏目几天来只关闭1条；更新较少。

4.5.2：慕课网

https://www.imooc.com/search/course?words=mpvue

• 课程有1个，学习人数为1277，收费（266元）；猿问33条，手机91条；社区活跃度较高。

4.5.3：极客时间

https://s.geekbang.org/search/c=0/k=mpvue/t

• 相关内容8条，活跃度不高

4.5.4：CSDN

https://so.csdn.net/so/search/s.do?p=12&q=mpvue

• 分页有13页，条目3000多条不准确；活跃度较高，博客内容具有参考性

4.5.5：掘金

https://juejin.im/search?query=uni-app

• 有关mpvue的帖子数量有近100条，帖子众多，活跃度比较高；帖子内容具有参考性

总结

以上各种轮子可谓是百花齐放，但由于小程序或者是快应用等应用本身规范较多，而且复杂应用一般对于开发方式有较高的要求，如组件和模块化，自动构建和集成，代码复用和开发效率等皆有一定的要求；所以在使用以上的框架需要基于实际情况进行选择。而且以上框架从开源到现在基本时间在1年左右，而且以上产品均是在微信小程序方面完成度比较高，对于其他的平台可能坑比较多；不过总要有踩坑的人，尤雨溪大佬的vue迄今也不过3,4年的时间，使用者众多；所以若非核心的且功能比较简单的应用可以尝试使用；至于选用哪一种则大家可讨论出结论即可。