# 三、框架选型

# 1. 为什么采用框架

先说结论,推荐使用 uni-app。

使用原生开发的问题:

  • 小程序本身不支持常用的 css 预编译器
  • 不支持 ES7 以上的高级语法,如 async await 等特性;
  • 不支持工程化,如环境、变量等管理
  • 缺少统一的 request 拦截请求
  • 缺少统一的本地缓存读取管理

目前市面上开源的框架可以帮助我们解决上述问题,有些框架还有比较便捷的脚手架工具、以及支持多端的能力。

# 2. 可选框架

# 官网

  • WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。

  • Mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,Mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

  • Uni-App 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。

  • Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。

  • Megalo 是基于 Vue(Vue@2.6.6) 的小程序开发框架,让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案,只需要少量改动即可完成 H5 和小程序之间的代码迁移。

  • MPX

  • Nanachi

# 3. 跨端支持

框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App
WePY Vue 丰富
mpvue Vue 丰富 ⭕️
uni-app Vue 丰富 ⭕️ ⭕️ ⭕️
megalo Vue ⭕️ ⭕️
Mpx Vue
Taro React/Vue 丰富
Nanachi React ⭕️ ⭕️ ⭕️ ⭕️

# 4. 选择权重

  • 生态:案例多说明使用者多,坑应该都踩得差不多了,有坑也应该是明坑;案例少的话,就要自己上去踩,暗坑多少不清楚;从官网公开案例来看,taro、uni-app、mpvue、wepy公开展示的案例较多

  • 跨端:开发后内容考虑兼顾其他平台,故wepy、mpx这种针对微信小程序的增强型开发框架首先排除,其次mpvue虽支持 H5 平台代码复用,但未跟进其它几家小程序。

  • 技术栈:首选 Vue

# 5. uni-app or taro

由于 Taro 3 开始也支持 Vue,故对于同时满足跨端,生态、技术栈,Taro 和 Uni-app 成为唯二选择。

小公司选择框架首选生态,毕竟趟坑人力有限。

# 生态

  • Taro官方发布了taro-ui库,awesome里三方组件不太多。
  • uni-app官方发布了uni-ui库,还有插件市场,轮子很多。

# 工具

工具属性维度,uni-app明显胜出,其出品公司同时也是HBuilder的出品公司,DCloud.io。 HBuilder/HBuilderX系列是国产开发工具,有300万开发者用户。 HBuilderX为uni-app做了很多优化,故uni-app的开发效率、易用性非其他框架可及。 当然对于不习惯HBuilderX的开发者而言,uni-app的这个优势无法体现。

# 学习资料

官方文档、搜索系统的完备度方面:uni-app文档内容丰富,示例demo完备,taro相对要弱一些。 教程方面:uni-app官方有视频教程,不少三方专业培训机构也录制的uni-app教程,包括腾讯课堂自家NEXT学院也录制了uni-app培训视频课,公开售卖;taro没有视频教程,但官方发布了掘金小册。 学习成本 uni-app更低。

# 社区活跃度

  • Taro通过Github Issues+微信群方式交流,微信群活跃,贡献代码的人也多。
  • uni-app有专门的论坛,还有视频教程,QQ群微信群都活跃。
  • 另外文档角度,uni-app的文档比taro要完善,数了数交流群的数量,也是uni-app多不少

Taro 3 才开始支持 Vue,Vue相关案例较少,官网社区不活跃,截止本文2021/9/10,自建社区最新的帖子发布于2021/6/2

多数问题集中在Github issues 及开发群

https://taro-club.jd.com/

Uniapp 最新帖子于几分钟前发布

https://ask.dcloud.net.cn/explore/category-12

两个框架都在官网放上了众多案例,taro案例只有微信小程序,uni-app的案例什么平台都有,很多App做了多个平台。 物料市场 Taro 有物料 160件, uni-app 物料 5192件,uni-app 完胜

Taro文档里大量存在只有微信平台打勾的情况,H5和App侧大量的X。这说明跨其他平台很难平滑迁移。

综合,uniapp 社区更为丰富,遇到问题后,有强大的后盾支持,能更快速的解决问题。uniapp 更适合我们进行快速的切换到多端支持的小程序框架上来。