web-jason / taro-mpvue-wepy-wx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

小程序开发 框架对比

1.前言

目前有多种开发微信小程序的方式,主要有原生(腾讯),wepy(腾讯),mpvue(美团开发近似vue),Taro(O2实验室推出的遵循React规范),对比分析也主要围绕这4种方式

2.框架分析

面对4种开发方式,首先是对各种框架进行对比分析,从开发工程化,开发方式,应用状态管理。

2.1 工程化

首先都需要微信开发者工具来调式,微信小程序本身对工程化几乎没有任何的支持,要原生框架支持工程化的话,需要自己动手搭建很多工程化上的东西,其余三个框架都有自己相对应的 CLI

2.2 开发方式

原生开发:

需要全新学习小程序的书写格式,目前版本模板中支持slot和npm包。不支持css预处理器,但是 vsCode 中 EasyWXLESS 插件可以将less文件自动转换为wxss文件;

wepy:

需要熟悉 vue 和 wepy 两种语法,支持slot组件内容分发插槽、npm包,css预处理器和状态管理vuex;

mpvue:

需要熟悉vue,目前版本支持 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,对于不那么大的应用也提供了全局变量的解决方式。

2.4 汇总对比

类型 原生 wepy mpvue taro
语法规范 小程序规范 类vue规范 vue规范 react规范
模版系统 字符串模版 字符串模版 字符串模版 JSX
类型系统 不支持 业务代码 业务代码 业务代码 + JSX模版
组件规范 小程序组件 小程序组件 html标签 + 小程序组件 小程序组件
样式规范 wxss sass,less,styus sass,less,postcss sass,less,postcss
组件化 小程序组件化 自定义组件化 vue组件化规范 react组件化规范
多端复用 web/H5端 微信/ (2.0+ 百度/支付宝/字节跳动小程序) 微信/百度/支付宝/字节跳动小程序,H5端,移动端(React Native)
构建方式 内置构建系统 webpack构建 内置构建系统+webpack构建
上手成本 全新学习 熟悉vue+wepy 熟悉vue 熟悉react
状态管理 不支持 redux vuex redux
翻车几率 0 / /

版本迭代

  • 原生 一直在更新
  • wepy 最后更新日期:2018-05-08 版本:1.7.2
  • mpvue 最后更新日期:2019-02-14 版本:2.4.1
  • Taro 最后更新日期:2019-05-28 版本:1.3.0

小总结

  • 原生:小程序完全用框架是不可能的,所以还是需要看原生的基础知识和基础概念
  • wepy:由于现在原生支持es6/7,有时候开发效率不如原生,还有学习框架的成本
  • mpvue:如果有vue基础,上手很简单,不过只支持小程序,不支持h5;
  • Taro:目前多端开发里,支持类型最多的,不过上手难度较其余三种比较大

相关文档地址

About


Languages

Language:CSS 48.6%Language:HTML 30.9%Language:JavaScript 20.6%