众所周知，高端市场的形态多种多样，如手机Web、ReactNative、微信小程序、支付宝小程序、快捷应用等。每一端都是一个巨大的流量入口。当业务需求需要在不同端同时执行时，为不同端编写多套代码的成本显然非常高。此时，只编写一组代码来适应各种能力是极其必要的。

但是面对市场上成熟的第三方框架小程序，如何选择自己需要的也是一件麻烦的事情。本文对市面上的三种翻译框架进行了全面的对比，希望对大家的技术选择有所帮助。如有不妥，望指正；

小程序开发的痛点是什么？

在频繁调用setData和setData的过程中，页面闪烁组件化的支持能力太弱(几乎没有)，无法使用less、SCS等预编译器的请求并发限制

为什么要使用第三方框架？

只要熟悉vue或者有所反应，就可以快速上手，可以在多端(微信、支付宝、h5、RN)编译运行一套学习成本低的代码。支付宝小程序在组件开发上并不完善，很好地解决了组件隔离、组件嵌套、组件通信等问题。支持使用第三方npm资源，使小程序支持Promise。生成器fu-n-action/class/async函数的特性可以用来解决回调的麻烦，从而提高开发效率。小程序本身的优化，如生命周期补充、性能优化等，支持样式编译器： cs/less、模板编译器、代码编译器：Babel/Typescript。

比较wepy mpvue taro和第三方框架

在这里，我对三个常用的开源小程序框架做了一个全面的比较，还有一个基于react的小程序翻译框架叫nanchi，由于缺失和研究，就不做比较了；

WEPY https://tencent.github.io/wepy/document.html

腾讯的开源小程序框架，类似于vue语法规范，借鉴了Vue的语法风格和功能特点，支持Vue的很多特性，比如父子组件、组件间的通信、计算属性计算、wathcer监听器、道具值传递、槽分布，还有很多高级特性支持：Mixin混合、拦截器等。WePY发布的第一个版本是2016年12月，小程序刚刚上线。到目前为止，WePY已经发布了52个版本，最新版本是1 . 7 . 2；

MpVue http://mpvue.com/mpvue/#-html

美团团队是一个使用Vue.js开发微信小程序的开源前端框架。使用该框架，开发人员将获得完整的Vue.js开发体验，并为H5和小程序提供代码重用能力。Mpvue发布几天就拿下了2.7k的星标，上升速度飞升。到现在，已经有13.7k的明星了；

芋头https://taro.aotu.io/

JD。COM凸凹实验室是一个使用React.js开发微信小程序的开源前端框架。它采用与React一致的组件化思想，其组件生命周期与React一致。同时，它支持使用JSX语法，这使得代码更具表现力。使用芋头可以获得与React一致的开发经验。同时，由于使用了react，除了编译h5之外，小程序也可以编译成ReactNative

星星

生存期

同为vue规范的mpvue和wepy的生命周期和各种方法是不同的

wepy

wepy的生命周期与原生小程序基本相同，并在此基础上结合了vue的一些特性；WePY中的methods属性非常容易被误解，因为它与Vue中的使用习惯不一致。这里需要强调的是，WePY中的methods属性只能声明页面上wxml标签的bind和catch事件，而不能声明自定义方法，这与Vue中的用法不一致。

从“wepy”导入wepy；导出默认类my page扩展wepy . page {//导出默认类my component扩展wepy . Component { custom data={ }//自定义数据custom function(){ }//自定义方法onLoad () {} //由page和Component {}共享的生命周期函数onshow()//Page生命周期函数config={}只存在于Page中；//仅存在于Page实例中的配置数据对应原始page.json文件数据={ }；//页面需要的数据必须在这里声明，可以用于模板数据绑定组件={ }；//声明页面中引用的组件，或者声明组件中引用的子组件mixins=[]；//声明页面引用的Mixin实例是计算出来的={ }；//声明计算属性(详见后面的介绍)watch={ }；//声明数据观察器(见后面)方法={ }；//在页面wxml中声明标记的事件处理程序。请注意，这仅用于声明页面wxml中标签的bind和catch事件，自定义方法需要以自定义方法的形式声明events={ }；//声明组件之间的事件处理程序}mpvue

除了Vue本身的生命周期，mpvue还兼容小程序的生命周期。这部分的生命周期挂钩来自微信小程序的Page，除了特殊情况不建议使用小程序的生命周期挂钩。

Vue在创建之前创建在挂载之前挂载在更新之前更新之前激活在破坏之前停用在破坏之前应用程序部分在启动时，初始化onShow，当小程序启动时，或从后台到前台显示onHide，当小程序进入后台页面部分onLoad从前台加载时，监视页面加载onShow，监视页面显示onReady，监视页面完成渲染onHide，监视页面隐藏onUnload，监视页面卸载onPullDownRefresh。听听用户在每个页面上的下拉动作，页面下拉事件的onShareAppMessage的处理功能，用户点击右上角分享onPageScroll，页面滚动到onTabItemTap。当前为选项卡页面时，单击选项卡会触发一个简单的示例(mpvue 0.0.16支持)

Newvue ({data: {a: 1}，created () {//` this '指向vm实例console.log('a is:' this.a)}。OnShow () {//`这指向vm实例console.log('a is:' this.a，' applet触发的OnShow ')} })/=' a is : 1 ' taro与react生命周期完全相同

类Clock扩展了Component { constructor(props){ super(props)this . state={ Date : new Date()} } Component did mount(){ } Component willunt(){ } render(){ return(View TextHello，world！/Text Text现在是{这个。state . date . tolocaltimestring()}。/text/view)}}列表呈现

它们在列表呈现中也有不同的应用方法

Wepy当需要循环呈现WePY组件时(类似于通过wx:for循环呈现原生wxml标记)，必须使用WePY定义的辅助标记来重复

模板！-请注意，使用for属性而不是wx:for属性-重复for=' {{list}} '键=' index ' index=' index ' item=' item '！-插入脚本部分声明的子组件，传入item-child : item=' item '/child/repeat/template脚本从' wet '导入wet；//从“”导入子项./components/child '；导出默认类索引扩展了wepy.components { components={//声明页面中要使用的Child组件的ID为Child Child 3360 Child } data={ list :[{ ID 3360 1，Title3360' title1'}，{id: 2，title : ' title 2 ' }]} }/script mpvue使用v-for与vue保持一致，但需要注意的是，嵌套列表呈现必须指定不同的索引！

！-在此嵌套循环中，必须指定索引(如index和itemIndex)，并且它们的别名不能相同。正确的写法如下——模板ul v-for='(卡片，索引)在列表‘Li v-for='中(item，Itemindex)体现为' {item。value}}/Li/ul/templatetaro的列表循环用法与React的基本相同。需要注意的是，在react中，JSX是将被编译成普通JS的执行，而每个JSX元素，实际上会通过createElement函数被创建成一个JavaScript对象(React Element)，所以你实际上可以这样写代码，React完全可以被渲染：

常量列表=这个。state . list . map(l={ if(l . selected){ return Li { l . text }/Li } })。filter (react .是有效元素)。但是在Taro中，JSX会编译成微信小程序模板字符串，所以不能把map函数生成的模板当成数组。当您需要这样做时，您应该首先处理需要循环的数组，然后使用处理过的数组来调用map函数。例如，上面的例子应该写成：

常量列表的事件处理=这个。state.list.filter (l=l.selected)。地图(l={返回Li {l.text}/Li})

目前，mpVue完全支持小程序的事件处理程序，并引入了Vue.js的虚拟DOM，上一个模板中绑定的事件会挂在vnode上，而编译器将小程序的事件绑定在wxml上并进行相应的映射。因此，当您实际点击时，可以在运行时通过handleProxy通过事件类型将它们分发到vnode事件中，这与WEB上vue的机制相同，因此可以实现无损支持。同时，它还支持自定义事件和$emit机制

//事件映射表，左侧WEB事件，小程序对应的事件{click:' tap '、touchstart3360' touchstart '、touchmove:' touchmove '、touchcancel3360' touchcancel '、touchend: 'touchend '、tap: 'tap '、longtap: 'longtap '、input: 'input '、change: ' change '、submit: ' submit '、blur: 'blur '、focus

不在列表中的本机事件也可以在dom上直接从bind更改为@ @regionchange，例如使用bindregionchange事件。同时，这个事件也非常特殊，它的事件类型包括begin和end，这使得我们无法区分handleProxy中有哪些事件。因此，当您监视这类事件时，可以同时监视事件名称和事件类型，这是由map applet @ region change=' function name ' @ end=' function name ' @ begin=' function name '的能力造成的。当bind和catch事件同时绑定时，只会触发bind，不会触发catch，避免踩坑。事件修饰符的使用。stop将防止冒泡，但同时绑定非冒泡事件将导致此元素上的catchEventName无效！防止可以直接被杀，因为小程序中没有默认事件，比如提交不跳转到页面。捕获支持1 . 0 . 9。没有评判标记的自我。一旦做不到，因为小程序没有removeEventListener，虽然可以直接在handleProxy中处理，但是非常优雅，违背初衷，所以暂时不会考虑。

其他键修饰符在小程序中根本没有键盘，所以。

Wepy事件绑定不同于vue，它根据本地applet事件提供语法优化

绑定事件

Bindtap='click '带@tap='click '，

取消冒泡

原来的catchtap='click '被@tap.stop='click '代替。

捕捉收听事件

Capture-bind:tap='click '被@tap.capture='click '替换。

中断捕获监听

capture-catch : tap=" click=" click " with @ tap . capture . stop=' click '。

Taro元素的事件处理类似于DOM元素。但是有一点语法上的不同

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

按钮onclick='激活激光'激活激光/按钮taro略有不同：

按钮onclick={this。activate lasers } activate lasers/button Taro的另一个不同之处是，您不能使用catchEvent来防止事件冒泡。您必须显式地使用停止传播。例如，为了防止事件冒泡，您可以编写：

类Toggle扩展了React。组件{构造函数(道具){ super(道具)this . state={ istogleon : true } } onClick=(e)={ e . stopperpagation(). this . setstate(prev state=({ istogleon :prev state . istogleon }))} render(){ return(按钮onClick={ this . onClick } { this . state . istogleon？On' :' off'}/button)}}请求请求

Wepy修改了wx.request以接受参数，值得一提的是，它提供了一个全局的适配器间拦截器

//原生代码：wx.request ({URL :' XXX '，成功：函数(数据){console.log(数据)；}});//WePY用法，需要开启Promise支持，参考开发规范章节WEPY.request ('xxxx ')。然后((d)=console . log(d))；//异步/等待需要打开Promise和异步/等待支持，请参考wiki异步函数请求(){let d=await wepy.request('