在各个公司进行第一次开发微信小程序项目之前,都免不了前期的技术选型。在这里,就来说一说现阶段各种流行的微信小程序框架的优缺点和适用场景,从而选到最适合自己公司的技术路线。
现阶段,流行的微信小程序开发框架主要有taro,wepy,mpvue,当然还有一直最根本的方式就是原生开发。
taro:
Taro 是由京东打造的一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。
Taro 方案的初心就是为了打造一个多端开发的解决方案。
wepy:
wepy是由腾讯团队启动于 2016 年 11 月份, 是小程序最早的框架之一,是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。有以下特性:
- 使用 Vue Observer 实现数据绑定
- 支持 Vue watch/computed/mixin 等特性
- 基于原生组件实现组件化开发
- 支持 TypeScript
mpvue
mpvue是由美团打造的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。主要有以下特性:
- 彻底的组件化开发能力:提高代码复用性
- 完整的 Vue.js 开发体验
- 方便的 Vuex 数据管理方案:方便构建复杂应用
- 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
- 支持使用 npm 外部依赖
- 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
- H5 代码转换编译成小程序目标代码的能力
各个框架的分析对比
taro:主要采用的是react语法标准,需要熟悉react语法,react的jsx让代码更简单快速,支持redux,支持 css 预处理器,支持webapck构建;
wepy:我们需要熟悉 vue 和 wepy 两种语法,支持 npm 包,支持redux or mobx,支持 css 预处理器;
mpvue:需要熟悉vue,支持 npm 包,支持vuex,支持 css 预处理器,支持webapck构建;
微信原生:需要熟悉原生语法,对工程化几乎支持,工程化需要自己动手搭建, 不支持 css 预处理器。
说的再多,不如上对比图:
| 表头 | taro | wepy | mpvue | 原生 |
|---|---|---|---|---|
| 语法 | react规范 | 类vue规范 | vue规范 | 小程序规范 |
| 组件规范 | 小程序组件 | 小程序组件 | 小程序组件+html标签 | 小程序组件 |
| 样式规范 | less,sass,postcss | less,sass,styus | less,sass,postcss | wxss |
| 组件化 | react组件规范 | 自定义组件 | vue组件规范 | 小程序组件化 |
| 跨平台 | 复用为h5以及其他家小程序 | 复用为h5 | 复用为h5以及其他家小程序 | no |
| 工程化 | webpack构建+内部构建系统 | 内部构建系统 | webpack构建 | no |
| 全局状态管理 | redux | redux | vuex | 无 |
| 上手成本 | 熟悉react | 熟悉vue,wepy | 熟悉vue | 全新学习 |
总结:
上述说了这么多,最终选择哪种开发方式是需要综合考虑的,比如团队成员的技术方向,是否方便后期维护,能否快速上手。