小程序开发框架技术分析选型

1. 前言

从16年微信小程序内测的时候到如今，微信小程序使用时间与实践证实了自己的变革与价值，微信小程序的规则也在开发社区的影响下变得更加完善。

对于第三方企业来讲，微信为自己带来了巨大的流量入口和低成本的拉新渠道，如滴滴、美团、京东等公司都推出了自己的小程序。像共享单车类的企业，微信是绝大多数使用户的二维码扫码入口，小程序为其带来了巨大的流量入口，如摩拜单车。

对于小程序开发者来说，小程序的开发生态不断地在完善，从最开始的原生框架，到腾讯自己开发类vue规范的wepy，再到美团开发近vue写法的mpvue，再到最近O2试验室刚推出的遵循React规范的Taro。

所有到现在，有多种开发微信小程序的方式，主要有原生，wepy，mpvue，Taro，4种框架，比照分析也是在这4种方式中。

2. 框架比照与分析

面对4种开发方式，我们究竟应该选择哪种呢?首先当然是对各种框架进行比照分析，从开发工具便利上，开发方式上，应使用状态管理上，社区活跃程度上(开源UI库等)

2.1 开发工具工程化上

• 开发工具上：都需要微信开发者工具来调式，对于写代码的话，尤其我们前台开发来讲，21世纪最有良心的编辑工具无疑是微软出品的vscode，代码高亮的话，都需要相应的配置，具体怎样配置，可以网上搜(或者者看各个开发方式的官方文档)。

• 工程化上: 微信小程序本身对工程化几乎没有任何的支持，要原生框架支持工程化的话，需要自己动手搭建很多工程化上的东西-他人搭建的demo wxapp-redux-starter，wepy有自己的wepy-cli，而mpvue和taro则很好的支持我们熟习的webpack灵活定制(像语法检查，热升级等等)

2.2 开发方式上

原生开发：
我们需要全新学习小程序的抒写格式，目前版本模板中支持 slot，但是不支持 npm 包。原生不支持 css 预解决器，但是 vsCode 中 Easy WXLESS 插件可以将 less 文件自动转换为 wxss 文件；

wepy：
我们需要熟习 vue 和 wepy 两种语法，支持 slot 组件内容分发插槽，支持 npm 包，支持 css 预解决器；

mpvue：
我们需要熟习 vue ，目前版本（v1.0.13）不支持 slot ，支持 npm 包，支持 css 预解决器；

taro:
采使用React语法标准，支持 JSX 书写，让代码更具体现性，Taro暂不支持直接渲染children。

对于mpvue和taro开发方式上，对vue和react语法的支持程度和差异上具体可以看各自的官方文档。

2.3 应使用状态管理上

原生开发：
没有提供原生的应使用状态管理方式，但是可以将 redux or mobx 引入到项目中。
小程序原生提供了一种公告用全局变量，具体写法可查看官网文件作使用域。

wepy：
可以将 redux or mobx 引入到项目中。

mpvue：
可以直接用 vuex 做应使用状态管理，在使用mpvue初始化时可以选择能否需要vuex.

taro：
支持redux，对于不那么大的应使用也提供了全局变量的处理方式，redux引入和全局变量处理方式，具体可以查看官网-用redux，官网-最佳实践。

2.4 社区活跃程度上

原生开发：
微信提供了一个专门的社区供小程序开发者学习交流开发者社区。对UI库来说，原生小程序UI库还是蛮多的，例如官方的weui, 有赞的zanui-weapp，高颜值、好使用、易扩展的微信小程序 UI 库。

其它3个框架：
对于wepy，mpvue，taro这种开源项目来说，想学习交流那一定是在github的issue上啊，github上的star数和项目出现时间成正比，wepy : 12k多star, mpvue: 11k多star, taro: 6k多star，从趋势看，mpvue大有赶超wepy的趋势。

对于wepy，mpvue它们的github上都有些开源的UI库，而taro因为最近推出，UI需要自己去撸。

2.5 比照汇总表格

比照表格

3. 基于公司业务和团队思考

对于公司业务，一定是要快速迭代开发的，而原生框架对工程化上支持并不友好，可以排除在外。

对于我们现有大部分前台相关的产品业务，不论是pc端的管理后端，还是手机端的h5页面都是基于react+webpack构建开发的，UI上都是采使用蚂蚁的组件库，
团队成员对react语法，相关生态都是相当熟习的，在这一点上，假如选择wepy或者者mpvue的话，都需要我们学习新的知识点，wepy和vue语法，采使用taro的话，团队成员完全可以快速上手开发微信小程序，然而在框架成熟度上来讲，wepy和mpvue出现时间较taro早，很多坑都已经踩完了，上手开发遇到问题的话，都有前人的处理方案，而taro最近才推出，这个框架的目标很伟大，就是使用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应使用，在开发上一定会遇到各种各样的问题。

综上，不论选择哪种框架，对我们的都很有挑战，而我个人认为，选择taro挑战更大，由于taro最近才推出，很多特性功能都在计划开发中，像对第三方组件库的支持。在我们开发公司业务时，一定不能由于框架某些功能特性没开发完，缺陷没处理而导致开发业务的进度停歇不前。这就会促使我们去深入学习taro这个框架底层，技术原理-Taro 技术揭秘：taro-cli，从根本上处理问题，例如，没有UI库的话，可以自己开发一套，taro框架上的缺陷迟迟没处理的话，自己可以尝试处理，弄好之后可以想o2团队提pr，为开源项目做贡献，有必要的话，也完全可以自己维护一套taro框架的源码。做到这些，在我们学习前台架构和前台工程上的路上绝对是很有帮组的。

4. 开发感想

目前我自己只尝试了mpvue和taro来开发，由于一个是类vue，一个是类react，而如今vue, react的生态可以说是相当完善的，所以这两个框架在开发体验上都非常完美。

4.1 mpvue

在开始使用mpvue开发时，要先熟习vue语法，对于我这种没使用过vue，使用jsx语法习惯的人来说，去看vue的官方文档刚开始有点不适应，慢慢的写着写着就适应了。看看代码体验下：

<template>  <div class="fontColor">hello,{{title}}</div></template><script>export default {  data() {    return {      title: 'hello,mpvue',    };  },};</script><style scoped>.fontColor{    color: red;}</style>

想想这种结构还是蛮熟习的，不就是当初入门时写的html,css,js在同一个文件的结构吗。

在使用mpvue开发遇到问题时，看mpvue文档和vue文档，还有微信小程序官方文档都可以快速定位轻松处理。

mpvue版本项目地址：geekjc-weixin

已上线，可扫一扫体验 极客教程

4.2 taro

而在使用taro开发时，尽管是我熟习的react语法，但是写起来的时候，还是遇到非常多的问题，语法上还是有些差异的，差异上可以看官方文档-关于 JSX 支持程度补充说明，那时候遇到问题我都会在issue上提问，o2团队的开发者也很认真的解答我的问题和taro框架上的缺陷。

对于转化为h5页面上，两者都支持，但是mpvue要转化成h5的话，要手动做的事还是蛮多的Mpvue 小程序转 Web 实践总结。而taro转化成h5页面就简单多了，只需遵循taro规定的语法，基础组件都从tarojs/components引入，即可以根据命令转化，可以看看下面两张图，一个是小程序的，一个转化为h5的。

小程序
h5

从图中整体感觉来看，taro转化成h5在ui和体验上并没有多大差别，可以说taro这个框架还是蛮强大的。(可能这只是个小demo，在转化成h5的过程中，没有遇到小程序和h5页面不一样或者者报错的情况，但是从github issue上看，编译成h5还是有很多问题的，希望o2团队能及时处理)。

taro版本demo项目地址: geekjc-taro

5. 总结

不论选使用那种框架，对微信小程序的基础知识，基础概念还是要花时间去学习的(看官方文档或者者微信小程序全面实战，架构设计 && 躲坑攻略)，由于很多问题，采使用原生的去处理更好，组件也是。

6. 参考文章：

多端统一开发框架 – Taro