独角兽企业重金招聘Python工程师标准>>>
最近在开发小程序,分别使用了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="-09-01" end="-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="-09-01" end="-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基础差吧。)