小程序开发框架的技术分析与选择

1.前言

从2016年微信小程序内测到现在，微信小应用已经用时间和实践证明了它们的变化和价值，微信的规则在开发社区的影响下变得更加完善。

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

对于小程序开发者来说，小程序的开发生态正在不断改善，从一开始，到腾讯自己开发vue规范，到美团开发近乎vue的写作，再到最近推出遵循React规范的O2 Lab。

到目前为止，开发微信小程序的方法有很多，主要包括原生、wepy、mpvue、Taro，以及比较分析。

2.框架对比分析

面对四种发展方式，我们应该选择哪一种？首先，我们将从开发工具、开发方法、app状态管理和社区活动（开源UI库等）的便利性方面，对各种框架进行比较和分析

2.1开发工具工程

在开发工具方面：微信开发者工具需要调整。对于代码编写，尤其是前端开发，21世纪最良心的编辑工具无疑是微软生产的vscode。如果代码突出显示，则需要相应的配置。具体配置可以在线搜索（或查看各种开发方法的官方文档）。

在工程方面：微信小程序本身对工程的支持很少。如果你想用原生框架支持工程，你需要自己构建很多工程——Wepy有自己的Wepy-cli，而mpvue和taro支持熟悉的webpack灵活定制（如语法检查、热更新等）

2.2开发模式

本土发展：

我们需要完全了解小程序的表达式格式。当前版本模板支持插槽，但不支持npm包。本机不支持css预处理器，但vsCode中的Easy WXLESS插件可以自动将较少的文件转换为wxss文件；

韦比：

我们需要熟悉vue和wepy语法，支持slot组件内容分发slot，支持npm包，支持css预处理器；

mpvue：

我们需要熟悉vue。当前版本（v1.0.13）不支持插槽，支持npm包，支持css预处理器；

芋头：

采用React语法标准来支持JSX编写，并使代码更具表现力。Taro不支持直接渲染子对象。

对于mpvue和taro开发方法，vue和react语法的支持程度和差异可以在其官方文档中看到。

2.3应用状态管理

本土发展：

没有提供本机app状态管理模式，但可以在项目中引入redux或mobx。

小程序本身提供了一种声明使用全局变量的方法。有关具体的写作方法，请参见官方网站。

韦皮：

您可以在项目中引入redux或mobx。

mpvue：

您可以直接使用vuex进行app状态管理。您可以选择在使用mpvue初始化时是否使用vuex

芋头：

它支持Redux。它还为较小的app提供全局变量的解决方案。有关详细信息，请参见Redux和全局变量解决方案，。

2.4社区活动

本土发展：

微信为小程序开发者提供了一个学习和交流的特殊社区。对于UI库，有相当多的原生小程序UI库，例如官方的、最喜爱的、高质量的、易于使用的和易于扩展的微信小程序UI。

其他3帧：

对于这种开源项目，学习和交流必须是Github的问题。Github上的恒星数量与项目时间成正比。韦比：12k星，mpvue：11k星，芋头：6k星。从趋势来看，mpvue倾向于赶上wepy。

对于wepy和mpvue，github上有一些开放源码的UI库，而taro由于最近的发布需要下载自己的UI。

2.5对比汇总表

比较表

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

对于公司的业务，必须快速迭代地发展。本机框架对工程支持不友好，可以排除在外。

对于我们现有的大多数前端相关产品业务，PC管理后台和移动h5页面都是基于act+webpack构建和开发的，UI使用蚂蚁的组件库，

团队成员非常熟悉react语法和