小程序第三方框架对比 ( wepy / mpvue / taro )(转)
文章转自 https://www.cnblogs.com/Smiled/p/9806781.html
众所周知如今市面上端的形态多种多样,手机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 https://tencent.github.io/wepy/document.html
- https://github.com/Tencent/wepy
腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等;WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本, 最新版本为1.7.2;
MpVue http://mpvue.com/mpvue/#-html
- https://github.com/Meituan-Dianping/mpvue
美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。mpvue在发布后的几天间获得2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;
Taro https://taro.aotu.io/
- https://github.com/NervJS/taro
京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative;
滴滴的 mpx https://github.com/didi/mpx
Star
生命周期
同为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, 除特殊情况外,不建议使用小程序的生命周期 钩子。
1Vue
3 beforeCreate
4 created
5 beforeMount
6 mounted
7 beforeUpdate
8 updated
9 activated
10 deactivated
11 beforeDestroy
12 destroyed
13 app 部分
15 onLaunch,初始化
16 onShow,当小程序启动,或从后台进入前台显示
17 onHide,当小程序从前台进入后台
18 page 部分
20 onLoad,监听页面加载
21 onShow,监听页面显示
22 onReady,监听页面初次渲染完成
23 onHide,监听页面隐藏
24 onUnload,监听页面卸载
25 onPullDownRefresh,监听用户下拉动作
26 onReachBottom,页面上拉触底事件的处理函数
27 onShareAppMessage,用户点击右上角分享
28 onPageScroll,页面滚动
29 onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)
简单示例
new Vue({
data: {
a: 1
},
created () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
},
onShow () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a, '小程序触发的 onshow')
}
})
// => "a is: 1"
taro与react生命周期完全相同
class Clock extends Component {
constructor (props) {
super(props)
this.state = { date: new Date() }
} componentDidMount() { } componentWillUnmount() { } render () {
return (
<View>
<Text>Hello, world!</Text>
<Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
</View>
)
}
}
列表渲染
在列表渲染上三者也分别有不同的应用方法
wepy当需要循环渲染WePY组件时(类似于通过wx:for
循环渲染原生的wxml标签),必须使用WePY定义的辅助标签<repeat>
<template>
<!-- 注意,使用for属性,而不是使用wx:for属性 -->
<repeat for="{{list}}" key="index" index="index" item="item">
<!-- 插入<script>脚本部分所声明的child组件,同时传入item -->
<child :item="item"></child>
</repeat>
</template> <script>
import wepy from 'wepy';
// 引入child组件文件
import Child from '../components/child'; export default class Index extends wepy.component {
components = {
// 声明页面中要使用到的Child组件的ID为child
child: Child
} data = {
list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
}
}
</script>
mpvue使用v-for与vue一致,只是需要注意一点,嵌套列表渲染,必须指定不同的索引!
<!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 -->
<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template>
taro的列表循环用法基本与react相同,有一点需要注意,在 React 中,JSX 是会编译成普通的 JS 的执行,每一个 JSX 元素,其实会通过 createElement
函数创建成一个 JavaScript 对象(React Element),因此实际上你可以这样写代码 React 也是完全能渲染的:
const list = this.state.list.map(l => {
if (l.selected) {
return <li>{l.text}</li>
}
}).filter(React.isValidElement)
但是 Taro 中,JSX 会编译成微信小程序模板字符串,因此你不能把 map
函数生成的模板当做一个数组来处理。当你需要这么做时,应该先处理需要循环的数组,再用处理好的数组来调用 map 函数。例如上例应该写成:
const list = this.state.list
.filter(l => l.selected)
.map(l => {
return <li>{l.text}</li>
})
事件处理
mpvue目前全支持小程序的事件处理器,引入了 Vue.js 的虚拟 DOM ,在前文模版中绑定的事件会被挂在到 vnode 上,同时 compiler 在 wxml 上绑定了小程序的事件,并做了相应的映射,所以你在真实点击的时候通过 runtime 中 handleProxy
通过事件类型分发到 vnode 的事件上,同 Vue 在 WEB 的机制一样,所以可以做到无损支持。同时还顺便支持了自定义事件和 $emit
机制
// 事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
踩坑注意(官方文档):
- 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@
@regionchange
,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy
中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
- 小程序能力所致,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 元素的写法)。 例如,传统的微信小程序模板:
<button onclick="activateLasers">
Activate Lasers
</button>
Taro 中稍稍有点不同:
<button onClick={this.activateLasers}>
Activate Lasers
</button>
在 Taro 中另一个不同是你不能使用 catchEvent
的方式阻止事件冒泡。你必须明确的使用 stopPropagation
。例如,阻止事件冒泡你可以这样写:
class Toggle extends React.Component {
constructor (props) {
super(props)
this.state = {isToggleOn: true}
} onClick = (e) => {
e.stopPropagation()
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}))
} render () {
return (
<button onClick={this.onClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}
request请求
wepy对wx.request做了接受参数的修改,值得一提的是它提供了针对全局的intercapter拦截器
// 原生代码: wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
}); // WePY 使用方式, 需要开启 Promise 支持,参考开发规范章节
wepy.request('xxxx').then((d) => console.log(d)); // async/await 的使用方式, 需要开启 Promise 和 async/await 支持,参考 WIKI
async function request () {
let d = await wepy.request('xxxxx');
console.log(d);
}
拦截器
import wepy from 'wepy'; export default class extends wepy.app {
constructor () {
// this is not allowed before super()
super();
// 拦截request请求
this.intercept('request', {
// 发出请求时的回调函数
config (p) {
// 对所有request请求中的OBJECT参数对象统一附加时间戳属性
p.timestamp = +new Date();
console.log('config request: ', p);
// 必须返回OBJECT参数对象,否则无法发送请求到服务端
return p;
}, // 请求成功后的回调函数
success (p) {
// 可以在这里对收到的响应数据对象进行加工处理
console.log('request success: ', p);
// 必须返回响应数据对象,否则后续无法对响应数据进行处理
return p;
}, //请求失败后的回调函数
fail (p) {
console.log('request fail: ', p);
// 必须返回响应数据对象,否则后续无法对响应数据进行处理
return p;
}, // 请求完成时的回调函数(请求成功或失败都会被执行)
complete (p) {
console.log('request complete: ', p);
}
});
}
}
taro对request进行了二次封装,可以使用Taro.request(OBJECT)发起网络请求,支持 Promise
化使用。
import Taro from '@tarojs/taro' Taro.request({
url: 'http://localhost:8080/test',
data: {
foo: 'foo',
bar: 10
},
header: {
'content-type': 'application/json'
}
})
.then(res => console.log(res.data))
mpvue没有对request做特殊优化,与原生相同,可以自己根据需要进行封装
状态管理
wepy 可引用Redux和Mbox,目前wepy的脚手架内已经集成了redux,选择需要即可;
mpVue使用vuex
taro使用Redux
如何选择适合自己的项目
- 如果只需要做一个微信小程序则根据自己的擅长框架选择mpvue或taro
- 如果是当前老项目想像向程序迁移同时老项目又是使用vue开发,建议使用mpvue或wepy
- 如果是老项目使用react开发且需要部分迁移小程序,建议使用taro
- 如果是新项目且新项目需要同时支持微信小程序和支付宝小程序, 建议使用原生开发,因为目前框架的转译支付宝小程序支持并不是很好,且出了问题不好定位修改, 但如果是小demo不涉及太多逻辑的项目都可以使用框架作为尝鲜; 但如果是涉及太多交互逻辑的则不建议使用框架转译,由于支付宝小程序在视图层基本与小程序一致所以建议手动更改替换部分方法和全局替换一些属性或文件名,如wxml替换为axml这种, 手动转换时间比大概是四比一; 当然如果人手足够一端开发一个是最好的...
时刻前端新鲜技术推送,定期前端精品文章分享,欢迎关注公众号前端小苑。
小程序第三方框架对比 ( wepy / mpvue / taro )(转)的更多相关文章
- 小程序第三方框架对比 ( wepy / mpvue / taro )
众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
- 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?
小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)? 自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Androi ...
- 基于mpvue搭建小程序项目框架
简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...
- 微信小程序 wafer2框架摘要
微信小程序 wafer2框架摘要 帮助文档:https://github.com/tencentyun/wafer2-startup/wiki 使用了knex.js进行数据库交互,使用了koa.js进 ...
- 学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone
听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...
- 小程序开发总结一:mpvue框架及与小程序原生的混搭开发
mpvue-native:小程序原生和mpvue代码共存 问题描述 mpvue和wepy等框架是在小程序出来一段时间之后才开始有的,所以会出现的问题有:需要兼容已有的老项目,有些场景对小程序的兼容要求 ...
- 小程序的初次遇见,使用mpvue搭建模板
由于公司业务需求的需要,在这一周需要开发小程序,加急看了下小程序的文档,发现用其原生来编写程序不是很顺手,公司前端用的技术栈是vue, 询问了谷哥和度娘发现大部分推荐了 wepy和 mpvue,对比了 ...
随机推荐
- ELK-Logstash采集日志和输送日志流程测试
讲解Logstash采集日志和输送日志流程测试,包括input,filter和output元素的测试 配置一:从elasticsearch日志文件读取日志信息,输送到控制台 $ cd /home/es ...
- Django 系列博客(十)
Django 系列博客(十) 前言 本篇博客介绍在 Django 中如何对数据库进行增删查改,主要为对单表进行操作. ORM简介 查询数据层次图解:如果操作 mysql,ORM 是在 pymysql ...
- Odd-e CSD Course Day 4
今天有一部分是透過 Code Review 來引發我們對於下面幾個方向的想法 Good Unit Tests 在今天的 Code Review 裡,Stanly 翻出了一個我們寫的 Unit Test ...
- JSON 数据转换
JSON概述 JSON(Java Script Object Notation)JS对象符号,通常JSON和XML是二选一的,JSON的数据格式很类似于JavaScript的对象 { &qu ...
- vs2017安装pygame,vs2017安装python第三方包
vs2017有独立的python环境:所以想在vs2017开发python并使用第三方包,需要在vs2017中操作,完成第三方包的安装. 一,查看vs2017有哪些版本的python,当前使用的是哪个 ...
- java集合架构
Collection接口 与 Map接口 1 .collection接口 特点:元素是 无序可重复的集合,无索引的,元素是单例值 子类 :set接口 list接口 1.1 set接口 特点: ...
- Java 由浅入深GUI编程实战练习(一)
项目简介: 1.实现利用下拉菜单的方式选择发送快捷语句: 2.实现对留言信息内容的置顶处理以及至尾处理: 3.实现清屏处理或现实保留部分留言内容: 运行界面: 代码展示: import java.aw ...
- Flask 系列之 Blueprint
说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 学习如何使用 Blueprint 介绍 接触过 DotN ...
- 安卓开发:UI组件-Button和EditText
2.3Button Button继承自TextView,除了通过属性设置按钮样式,还可以通过绑定drawable文件的方式来实现不同样式. 2.3.1按钮样式 新建Activity:ButtonAct ...
- [aspnetcore.apidoc]一款很不错的api文档生成工具
AspNetCore.ApiDoc 简单徐速一下为什么选用了aspnetcore.apidoc 而没有选用swagger 最初我们也有在试用swagger,但总是有些感觉,感觉有点不满意,就但从api ...