小程序第三方框架对比 ( wepy / mpvue / taro )

众所周知现在市面上端的形态多种多样，手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口，当业务要求同时在不一样的端都要求有所表现的时候，针对不一样的端去编写多套代码的成本显然很是高，这时候只编写一套代码就可以适配到多端的能力就显得极为须要。但面对目前市面上成熟的小程序第三方框架如何针对本身的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,但愿能对你们的技术选择有所帮助,若有哪里不妥的地方但愿指正;

小程序开发有哪些痛点?

• 频繁调用 setData及 setData过程当中页面跳闪

• 组件化支持能力太弱(几乎没有)

• 不能使用 less、scss 等预编译器

• request 并发次数限制

为何使用第三方框架?

• 只要熟悉vue或react便可快速上手,学习成本低
• 一套代码可在多端编译运行(微信,支付宝,h5,RN) 支付宝小程序暂不完善
• 组件化开发，完美解决组件隔离，组件嵌套，组件通讯等问题
• 支持使用第三方 npm 资源
• 使小程序可支持 Promise，解决回调烦恼
• 可以使用 Generator Fu-nction / Class / Async Function 等特性，提高开发效率
• 对小程序自己的优化，如生命周期的补充，性能的优化等等
• 支持样式编译器: Scss/Less，模板编译器，代码编译器：Babel/Typescript。

第三方框架对比 wepy mpvue taro

在这里我经过对目前已开源的三种经常使用小程序框架作一个综合对比, 还有一个叫nanchi的基于react的小程序转译框架,因为没来的及研究暂不作比较;

• WEPY tencent.github.io/wepy/docume…

腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征，好比父子组件、组件之间的通讯、computed属性计算、wathcer监听器、props传值、slot槽分发，还有不少高级的特征支持：Mixin混合、拦截器等;WePY发布的第一个版本是2016年12月份，也就是小程序刚刚推出的时候，到目前为止，WePY已经发布了52个版本, 最新版本为1.7.2;

• MpVue mpvue.com/mpvue/#-htm…

美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将获得完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。mpvue在发布后的几天间得到2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;

• Taro taro.aotu.io/

京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具备更丰富的表现力，使用 Taro 进行开发能够得到和 React 一致的开发体验。,同时由于使用了react的缘由因此除了能编译h5, 小程序外还能够编译为ReactNative;

生命周期

同为vue规范的mpvue和wepy的生命周期和各类方法不尽相同

wepy

wepy生命周期基本与原生小程序相同,再此基础上糅合了一些vue的特性; 对于WePY中的methods属性，由于与Vue中的使用习惯不一致，很是容易形成误解，这里须要特别强调一下：WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的。   `import wepy from 'wepy';

export default class MyPage extends wepy.page { // export default class MyComponent extends wepy.component { customData = {} // 自定义数据

customFunction () {}  //自定义方法

onLoad () {}  // 在Page和Component共用的生命周期函数

onShow () {}  // 只在Page中存在的页面生命周期函数

config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件

data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定

components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件

mixins = [];  // 声明页面所引用的Mixin实例

computed = {};  // 声明计算属性（详见后文介绍）

watch = {};  // 声明数据watcher（详见后文介绍）

methods = {};  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明

events = {};  // 声明组件之间的事件处理函数
复制代码

}`

mpvue

mpvue 除了 Vue 自己的生命周期外，还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊状况外，不建议使用小程序的生命周期 钩子。

简单示例

taro与react生命周期彻底相同

列表渲染

在列表渲染上三者也分别有不一样的应用方法

wepy当须要循环渲染WePY组件时(相似于经过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签

mpvue使用v-for与vue一致,只是须要注意一点，嵌套列表渲染，必须指定不一样的索引！

taro的列表循环用法基本与react相同,有一点须要注意,在 React 中，JSX 是会编译成普通的 JS 的执行，每个 JSX 元素，其实会经过 createElement 函数建立成一个 JavaScript 对象（React Element），所以实际上你能够这样写代码 React 也是彻底能渲染的：

可是 Taro 中，JSX 会编译成微信小程序模板字符串，所以你不能把 map 函数生成的模板当作一个数组来处理。当你须要这么作时，应该先处理须要循环的数组，再用处理好的数组来调用 map 函数。例如上例应该写成：

事件处理

mpvue目前全支持小程序的事件处理器,引入了 Vue.js 的虚拟 DOM ，在前文模版中绑定的事件会被挂在到 vnode 上，同时 compiler 在 wxml 上绑定了小程序的事件，并作了相应的映射，因此你在真实点击的时候经过 runtime 中 handleProxy 经过事件类型分发到 vnode 的事件上，同 Vue 在 WEB 的机制同样，因此能够作到无损支持。同时还顺便支持了自定义事件和 $emit 机制

事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件

**click** : 'tap',<br>
**touchstart**: 'touchstart',<br>
**touchmove**: 'touchmove',<br>
**touchcancel**: 'touchcancel',<br>
**touchend**: 'touchend',<br>
**tap**: 'tap',<br>
**longtap**: 'longtap',<br>
**input**: 'input',<br>
**change**: 'change',<br>
**submit**: 'submit',<br>
**blur**: 'blur',<br>
**focus**: 'focus',<br>
**reset**: 'reset',<br>
**confirm**: 'confirm',<br>
**columnchange**: 'columnchange',<br>
**linechange**: 'linechange',<br>
**error**: 'error',<br>
**scrolltoupper**: 'scrolltoupper',<br>
**scrolltolower**: 'scrolltolower',<br>
**scroll**: 'scroll'<br>
复制代码

踩坑注意(官方文档)：

• 列表中没有的原生事件也可使用例如 bindregionchange 事件直接在 dom 上将bind改成@ @regionchange,同时这个事件也很是特殊，它的 event type 有 begin 和 end 两个，致使咱们没法在handleProxy 中区分究竟是什么事件，因此你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName">
• 小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。
• 事件修饰符 .stop 的使用会阻止冒泡，可是同时绑定了一个非冒泡事件，会致使该元素上的 catchEventName 失效！ .prevent 能够直接干掉，由于小程序里没有什么默认事件，好比submit并不会跳转页面 .capture 支持 1.0.9 .self 没有能够判断的标识 .once 也不能作，由于小程序没有 removeEventListener, 虽然能够直接在 handleProxy 中处理，但很是的不优雅，违背了原意，暂不考虑
• 其余 键值修饰符 等在小程序中压根没键盘，因此。。。
  

wepy事件绑定区别于vue,根据原生小程序事件提供了语法优化

绑定事件
bindtap="click" 替换为 @tap="click"，
取消冒泡
原catchtap="click"替换为@tap.stop="click"。

捕获监听事件
capture-bind:tap="click" 替换为 @tap.capture="click"，
中断捕获监听
capture-catch:tap=“click"替换为 @tap.capture.stop="click"。

Taro 元素的事件处理和 DOM 元素的很类似。可是有一点语法上的不一样:

Taro 事件绑定属性的命名采用驼峰式写法，而不是小写。 若是采用 JSX 的语法你须要传入一个函数做为事件处理函数，而不是一个字符串 (DOM 元素的写法)。 例如，传统的微信小程序模板：

Taro 中稍稍有点不一样：

在 Taro 中另外一个不一样是你不能使用 catchEvent 的方式阻止事件冒泡。你必须明确的使用 stopPropagation。例如，阻止事件冒泡你能够这样写：

request请求

wepy对wx.request作了接受参数的修改,值得一提的是它提供了针对全局的intercapter拦截器

拦截器

taro对request进行了二次封装,可使用Taro.request(OBJECT)发起网络请求，支持 Promise 化使用。

mpvue没有对request作特殊优化,与原生相同,能够本身根据须要进行封装

状态管理

• wepy 可引用Redux和Mbox,目前wepy的脚手架内已经集成了redux,选择须要便可;
• mpVue使用vuex;
• taro使用Redux;

如何选择适合本身的项目

• 若是只须要作一个微信小程序则根据本身的擅长框架选择mpvue或taro
• 若是是当前老项目想像向程序迁移同时老项目又是使用vue开发,建议使用mpvue或wepy
• 若是是老项目使用react开发且须要部分迁移小程序,建议使用taro
• 若是是新项目且新项目须要同时支持微信小程序和支付宝小程序, 建议使用原生开发,由于目前框架的转译支付宝小程序支持并非很好,且出了问题很差定位修改, 但若是是小demo不涉及太多逻辑的项目均可以使用框架做为尝鲜; 但若是是涉及太多交互逻辑的则不建议使用框架转译,因为支付宝小程序在视图层基本与小程序一致因此建议手动更改替换部分方法和全局替换一些属性或文件名,如wxml替换为axml这种, 手动转换时间比大概是四比一; 固然若是人手足够一端开发一个是最好的...

时刻前端新鲜技术推送,按期前端精品文章分享，欢迎关注公众号前端小苑。