GMTC北京站两周后开幕,58个议题全部上线,点击查看 了解详情
写点什么

小程序开源框架选型

2020 年 6 月 22 日

小程序开源框架选型

从 2016 年微信小程序内测到现在,各大公司对小程序的业务开发需求越来越大,但是微信的原生工具在实际使用时很不便捷,尤其是业务比较复杂的项目很难通过其进行管理和迭代。


使用原生开发的问题:


  • 小程序本身不支持常用的 css 预编译器

  • 不支持 ES7 以上的高级语法,如 async await 等特性;

  • 不支持工程化,如环境、变量等管理

  • 缺少统一的 request 拦截请求

  • 缺少统一的本地缓存读取管理


目前市面上开源的框架可以帮助我们解决上述问题,有些框架还有比较便捷的脚手架工具、以及支持多端的能力。本文将从 业务功能的满足度、接入成本、项目性能、可维护性 等多方面对现有框架进行介绍和对比,为大家在项目中选择开源框架时提供一个参考。


1.框架介绍

1.1 Wepy

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


其特点如下图所示:



1.2 Mpvue

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


主要特性:


  • 彻底的组件化开发能力:提高代码复用性

  • 完整的 Vue.js 开发体验

  • 方便的 Vuex 数据管理方案:方便构建复杂应用

  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload

  • 支持使用 npm 外部依赖

  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

  • H5 代码转换编译成小程序目标代码的能力


1.3 Taro

Taro 是一套遵循 React 语法规范的多端开发解决方案。



1.4 Uni-app

Uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。



1.5 Chamelon

Chameleon/kəˈmiːlɪən/,简写 CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。


主要特性:


  • 目录结构:提供规范化的项目结构,适合于企业级大型应用的开发。

  • 视图层:视图层由 CML 与 CMSS 编写,核心是一个标准响应式数据驱动视图更新。

  • 逻辑层:逻辑层由 javascript 编写,逻辑层将处理数据后自动更新视图,提供视图层的事件响应方法。

  • 多态协议:提供了跨端时各端底层组件与接口统一的解决方案。

  • 规范校验:为了提高开发的效率与代码的可维护性,提供了全面的代码规范与校验。


2.框架选型

2.1 业务功能的满足度

一般公司开发团队对业务功能的需求,有两种:


  • 小程序原生基本业务功能的开发,包括用户登录、内容展示、页面交互、图片文档查看等等

  • 页面开发一版支持微信小程序、百度小程序、H5 或快应用等多端兼容需求


2.1.1 基本业务功能

Wepy、Mpvue、Taro、Uni-app、Chamelon 几种框架已经支持小程序原生的大部分组件、API,在一般业务功能的开发上没有太大的差异性,在新功能的支持力度上略有差异。


从各框架最新版本的更新内容和时间来看,Taro、Uni-app 和 Chameleon 对新功能的支持力度比较好,尤其 Taro 框架支持了小程序原生的写法,这样即使框架不支持的小程序 API 也可以在不修改项目框架的前提下使用。


2.1.2 多端兼容需求

WepyMpvueTaroUni-appChameleon
微信小程序支持支持支持支持支持
支付宝小程序不支持支持支持支持不支持
百度小程序不支持支持支持支持不支持
头条小程序不支持支持支持支持不支持
H5不支持不支持支持支持支持
React Native不支持不支持支持不支持不支持
快应用不支持不支持支持不支持不支持
QQ小程序不支持不支持支持支持不支持
Android原生不支持不支持不支持支持不支持
iOS原生不支持不支持不支持支持不支持
Chameleon Playground App不支持不支持不支持不支持支持
Weex playground App不支持不支持不支持不支持支持


从框架对各端的兼容性来看,Taro 和 Uni-app 对各端的兼容能力较强


2.2 接入成本

选择框架并接入到团队内,需要两种成本:


  • 代码成本:新项目建立项目模板成本、老项目代码迁移成本

  • 学习成本:团队内的开发人员从 0 到 1 熟练使用框架的成本


2.2.1 Wepy

接入成本


给新起项目提供了 cli 能力:


$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具$ wepy init standard myproj # 使用 standard 模板初始化项目$ cd myproj # 进入到项目目录$ npm install # 安装项目依赖包$ npm run dev # 监听并且编译项目
复制代码


未给老项目迁移提供能力,只能手动迁移代码。


学习成本


Wepy 有一个比较简单的开源文档,Wepy 的语法糖是类 Vue,基本项目结构和原生小程序类似,对熟悉 Vue 和小程序的同学来说学习成本很低。


一个简单的 Wepy 代码示例:


<style lang="less">.container {  height: 100%;}</style>
<script>import wepy from 'wepy'export default class extends wepy.app { config = { pages: [ 'pages/index' ], window: { navigationBarTitleText: '日历' } }}</script>
复制代码


2.2.2 Mpvue

接入成本


给新起项目提供了 cli 能力:


# 1. 全局安装 vue-cli$ npm install --global vue-cli@2.9
# 2. 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project
# 3. 安装依赖,走你$ cd my-project$ npm install$ npm run dev
复制代码


未给老项目迁移提供能力,只能手动迁移代码。


学习成本


Mpvue 的文档在 2018.8.10 后再也没有更新过,文档的内容较老也比较简单,其语法糖是 Vue,为开发者提供了整体的 Vue 的开发体验,对熟悉 Vue 的同学接入成本较低。


一个简单的 Mpvue 代码示例:


<template>  <div @click="clickHandle">    <div class="userinfo" @click="bindViewTap">      <div class="userinfo-nickname">        <card :text="userInfo.nickName"></card>      </div>    </div>  </div></template>
<script>import card from '@/components/card'
export default { data () { return { motto: 'Hello miniprograme', userInfo: { nickName: 'mpvue', avatarUrl: 'http://mpvue.com/assets/logo.png' } } }}</script><style scoped>.userinfo { display: flex;}</style>
复制代码


2.2.3 Taro

接入成本


给新起项目提供了 cli 能力:


# 使用 npm 安装 CLI$ npm install -g @tarojs/cli# 使用命令创建模板项目$ taro init myApp
复制代码


给老的原生小程序项目提供了代码一键转换的指令:


$ taro convert
复制代码


学习成本


Taro 有一个完善的开源文档,详细的描述了 Taro 的组件、API 支持情况和使用、进阶指南,Taro 的语法糖是 React,对熟悉 React 同学来说学习成本很低。


一个简单的 Taro 代码示例:


import Taro, { Component } from "@tarojs/taro";import { View, Button } from "@tarojs/components";
export default class Index extends Component { constructor() { super(...arguments); this.state = { title: "首页", list: [1, 2, 3] }; }
componentDidMount() {}
add = e => { // dosth }
render() { return ( <View className="index"> <View className="title">{this.state.title}</View> </View> ); }}
复制代码


2.2.4 Uni-app

接入成本


给新起项目提供了两种生产项目模板方式:


  • 通过 HBuilderX 可视化界面,在点击工具栏里的文件 -> 新建 -> 项目

  • 通过 vue-cli 命令行:


# 全局安装vue-cli$ npm install -g @vue/cli# 创建uni-app$ vue create -p dcloudio/uni-preset-vue my-project
复制代码


给小程序原生、Wepy、Mpvue 提供了详细的迁移步骤文档。


学习成本


Uni-app 有一个完善的开源文档,其语法糖是 Vue,对熟悉 Vue 的同学来说学习成本很低,在开发工具上官方对 HBuilderX 更友好,对熟悉 HBuilderX 使用的入手成本较低。


一个简单的 Uni-app 代码示例:


<template>  <view class="content">    <view>      <text class="title">{{title}}</text>    </view>  </view></template>
<script> export default { data() { return { title: 'Hello' } } }</script>
<style> .content { text-align: center; height: 400upx; }</style>
复制代码


2.2.5 Chameleon

接入成本


给新起项目提供了 cli 能力:


# 全局安装cli$ npm i -g chameleon-tool# 初始化项目$ cml init project
复制代码


给小程序原生、Vue、Weex 提供了 CML 的迁移指南。


学习成本


Chameleon 有一个相对完善的开源文档,其语法糖是类 Vue,对熟悉 Vue 的同学来说学习成本很低。


一个简单的 Chameleon 代码示例:


<template>  <view>    <!-- 数据绑定与计算属性 -->    <text>{{ message }}</text>    <text class="class1">{{ message2 }}</text>  </view></template>
<script>class Index { data = { message: 'HelloCML', }}
export default new Index()</script><style scoped>.class1 { color: #f00;}</style></script>
复制代码


2.3 项目性能

本文主要研讨的应用方向是微信小程序,所以选型的框架需要对微信小程序的兼容性很高、且产出的项目有较高的性能。多端框架很多都是基于微信小程序的 API 开发的,所以对微信小程序的兼容性都很高,下面我们来看一下一个简单的日历组件应用到各框架产出的微信小程序性能数据对比。


2.3.1 微信原生


小程序包大小:22.868 字节


微信基础库版本:2.6.2 (以下框架相同)


测试数据记录:


内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
252m146ms1163ms26ms94ms0B
244m606ms1293ms38ms60ms0B
256m159ms1293ms26ms131ms0B
235m708ms1403ms49ms58ms0B
245m571ms1163ms32ms56ms0B


2.3.2 Wepy

小程序包大小:131,957 字节


Wepy 版本:1.6.0


测试数据记录:


内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
253m436ms1049ms29ms35ms0B
259m542ms1340ms33ms61ms0B
267m466ms1113ms22ms37ms0B
260m447ms1160ms22ms50ms0B
254m459ms1036ms30ms40ms0B


2.3.3 Mpvue

小程序包大小:197,601 字节


Mpvue 版本:2.0.6


测试数据记录:


内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
225m247ms896ms24ms62ms0B
239m253ms910ms22ms58ms0B
235m446ms1591ms27ms62ms0B
237m269ms979ms21ms60ms0B
243m270ms908ms23ms57ms0B


2.3.4 Taro

小程序包大小:167,080 字节


Taro 版本:1.3.2


测试数据记录:


内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
246m231ms718ms16ms224ms0B
241m297ms1007ms19ms246ms0B
246m256ms868ms16ms288ms0B
242m227ms829ms17ms224ms0B
237m231ms869ms17ms229ms0B


2.3.5 Uni-app

小程序包大小:292,831 字节


Uni-app 版本:2.0.0


测试数据记录:


内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
239m440ms987ms34ms178ms34B
237m529ms1365ms34ms182ms34B
232m531ms1133ms39ms183ms34B
236m487ms1154ms32ms178ms34B
239m486ms1051ms33ms190ms34B


2.3.6 Chameleon

小程序包大小:671,702 字节


Chameleon 版本:1.0.3


测试数据记录:


内存页面切换耗时启动耗时初次渲染耗时再次渲染耗时数据缓存
223m550ms1043ms46ms60ms0B
231m597ms1326ms36ms60ms0B
225m631ms1338ms37ms58ms0B
237m658ms1289ms47ms68ms0B
245m611ms1241ms35ms66ms0B


2.3.7 框架性能 PK (平均值)


包大小


原生 < Wepy < Taro < Mpvue < Uni-app < Chameleon


微信小程序的性能


Taro > Mpvue > Uni-app > Wepy > Chamelon > 未优化过的原生代码


框架使用后比原生的性能更好,这简直逆天了,后来研究发现:


微信原生框架耗时主要在 setData 调用上,开发者若不单独优化,则每次都会传递大量数据;而 Uni-app、Taro 等都在调用 setData 之前自动做 diff 计算,每次仅传递变动的数据。


2.4 可维护性

团队选型框架后,最担心的事情就是后期的维护性。在需求开发的过程中,发现框架本身有问题,怎么解决?框架深度使用过程中,突然发现该框架无人维护了,issue 上提交的问题迟迟没人跟进了,怎么办?所以在选型框架中,框架的可维护性是大部分团队所关注的事情。


WepyMpvueTaroUni-appChameleon
Star数188541860521740124846521
社群无论坛、无交流群;只能网搜或者提issues无论坛、无交流群;只能网搜或者提issues有论坛、社区、交流群等,论坛活跃有论坛、社区、交流群等,论坛活跃,交流群多且回复及时官方文档提供了微信、QQ交流群、顺风公鹿等
语言类Vue的语法糖类Vue的语法糖React的语法糖类Vue的语法糖类Vue的语法糖
开源程度完全开源完全开源完全开源半开源完全开源


从框架现有 star 数可以看出:Wepy、Mpvue 和 Taro 的开源关注度比较高,这说明这几个框架的论坛活跃度更高,相关问题的解决方法更多。


从社群活跃度可以看出:Wepy 和 Mpvue 已经很久没人维护了,所以后续的可维护性较差,建议使用其他的框架。


从框架停更的后期维护成本来看


  • Wepy、Mpvue、Uni-app、Chameleon 都是类 Vue 的语法糖,其迁移成本略低;而 Taro 是 React 的语法糖,其迁移成本较高;

  • Wepy、Mpvue、Taro、Chameleon 都是完全开源的,团队可以根据自己需求把代码拷贝出来自己维护;而 Uni-app 是半开源的,团队无法把源代码拷贝出来。


3.总结

通过以上 业务功能的满足度、接入成本、项目性能、可维护性 等多方面对比,可以看出各个框架在各个方面有不同的优缺点。由于 wepy 和 mpvue 已长期不再维护,不建议团队选择。团队可以根据自己的实际业务需求和内部的技术栈选择,React 系的可以选择 Taro 框架,Vue 系的可以选择 Uni-app 或者 Chameleon


本文转载自公众号贝壳产品技术(ID:beikeTC)。


原文链接


https://mp.weixin.qq.com/s?__biz=MzIyMTg0OTExOQ==&mid=2247485612&idx=3&sn=2250d82d38a9701d4df4258f68c4fda0&chksm=e8373bdcdf40b2caaf1d387d52afe605eb730da791da070d2034a6c7cf78eefbb8a641bb46ce&scene=27#wechat_redirect


2020 年 6 月 22 日 10:006141

评论

发布
暂无评论
发现更多内容

redis系列之——数据类型geospatial:你隔壁有没有老王?

诸葛小猿

redis geospatial

第07周 优化系统性能-01 命题作业

Jaye

架构师训练营 No.7 周作业

连增申

第七周总结

Geek_a327d3

操作系统、性能优化

GalaxyCreater

性能优化

RabbitMQ 的监控(附 Python 监控源码)

AlwaysBeta

Python RabbitMQ 消息队列 消息堆积处理

架构师训练营第七周总结

Bruce Xiong

第07周 优化系统性能-01 学习总结

Jaye

关于性能压测

俊俊哥

性能测试

【架构师训练营 - week7 -1】作业

早睡早起

w7-分布式系统中性能的影响因素

麻辣

并发测试JAVA

王麒宇

第7周 性能优化:性能优化是架构师展现自己技术全面性的时刻

陆不得

第7周

Geek_2b3614

架构师 0期07周总结

我在终点等你

架构师训练营 - 作业 7

进击的炮灰

ARTS打卡Week 08

teoking

ios LeetCode

学习总结 - 架构师训练营 - 第七周

走过路过飞过

架构师训练营第七章作业

吴吴

week 7 作业

a晖

第七周总结

上山砍柴

架构师训练营 week7

devfan

redis 基础-数据结构-跳跃表

小技术君

Mac 环境下 RabbitMQ 的安装

AlwaysBeta

Mac RabbitMQ 消息队列

架构训练营第七周感悟

张锐

Vue3-组合式API

福豆粑粑

Vue3

架构师训练营 No.7 周总结

连增申

架构师培训 -07 总结 性能测试与性能优化

刘敏

性能测试并发压力变大,系统如何变化

李朋

第七周作业

Geek_a327d3

Python 实现 RabbitMQ 的六种工作模式(附 Python 代码)

AlwaysBeta

Python RabbitMQ 消息队列

Service Mesh的演化与未来

Service Mesh的演化与未来

小程序开源框架选型-InfoQ