使用mpvue和wepy开发小程序

最近在开发小程序，分别使用了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基础差吧。）