最近在开发小程序,分别使用了mpvue 和 wepy 这两个都是开发微信小程序的框架。都是牛人出品,给个赞!
<!-- more-->
wepy 是腾讯开源的一套语法接近vue.js、快速开发小程序的一套框架,开源的较早,网上有很多资源,也有一些大厂使用。并有成熟的UI,如weui 、zan-ui
mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码。最近刚刚开源,资料较少。一些UI正在开发中。如 weui的mpvue实现。
最近做两个简单的小程序,第一个是用wepy + weui 实现的。功能比较简单。基于weui demo 改一改就可以跑起来个小程序了。 遇到的比较多问题就是不会使用Promise (本人是后端写Java的,感觉前端JS代码有点飘.....),后来总算是能跑起来了,也不知道是不是正确的写法。
wxlogin() {
console.log('weixin login...');
const login = new Promise(function(resolve, reject) {
wx.login({
success: res => {
console.log('weixin login success.');
resolve(res);
}
});
});
return login;
};
上周看到mpvue的开源消息,下来试了一下,今天也算是跑一个功能简单的小程序。总体感觉比wepy要复杂,但语法是vue的语法(其实vue的语法我不知道多少)。下面对比一下我遇到这两个框架使用上不一样的地方:
值绑定
看代码:
// picker 组件的绑定 mpvue的使用方式
<picker mode="date" name="activity.endDate" v-bind:value="activity.endDate" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="weui-input">{{activity.endDate}}</view>
</picker>
// methos 中的方法
bindDateChange (e) {
console.log(e)
this.activity.endDate = e.mp.detail.value
}
<picker mode="date" name="activity.endDate" value="{{activity.endDate}}" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="weui-input">{{activity.endDate}}</view>
</picker>
// methos 中的方法
bindDateChange(e) {
this.activity.endDate = e.detail.value;
}
mpvue中要使用v-bind:value的方式,并且取值要使用e.mp.detail.value. wepy使用双花括号来绑定值,取值使用e.detail.value,这个比较接近原生小程序,因为是一家吗?
程序目录
mpvue 的目录结构要在pages目录下创建自己的目录,然后有两个文件。比如:pages/index/index.vue,pages/index/main.js, 在pages数组中配置页面是这样:'pages/index/index',一个目录下只能使用一个页面,据大神说这是可以改的,但我还没有成功过。这点感觉没有wepy方便。
wepy 是在任何目录创建一个.wpy的文件,把css、html、script 都写在这个文件里,然后编译成小程序需要的三种格式的文件。比如: pages/index.wpy ,在pages数组中配置页面是这样:'pages/index/',而且多个文件可以在同一个目录下。
配置
在小程序中对应的 data {}
// mpvue 的写法
export default {
data () {
return {
userInfo: {},
}
},
components: {},
methods: {}
// 其他自定义方法
}
// wepy 的写法
export default class List extends wepy.page {
data = {
userInfo: {},
};
methods = {}
// 其他自定义方法
对应 app.json的配置,mpvue 是在根目录(src)下的main.js,wepy是根目录下的app.wpy
总体来说,wepy更简单一些,mpvue显示要复杂一点(可能是本人的vue基础差吧。)