Use mpvue and wepy to develop small programs

Recently, in the development of small programs, I used mpvue and wepy , both of which are frameworks for developing WeChat small programs. All are produced by cattle, give a like!

<!-- more-->

Wepy is a set of frameworks open sourced by Tencent with a syntax close to vue.js, and a framework for rapid development of small programs. And have mature UI, such as weui , zan-ui

mpvue is a set of open-sourced front-end frameworks of Meituan that have the same syntax as vue.js and can quickly develop small programs. According to the official website, it can achieve a set of codes for small programs and H5 interfaces. It has just been open sourced recently, and there is little information. Some UI is under development. Such as weui's mpvue implementation .

I recently made two simple small programs, the first one was implemented with wepy + weui. The function is relatively simple. Based on the weui demo , you can run a small program by changing it. The more problems I encountered were that I couldn't use Promise (I wrote Java on the back end, and I felt that the front-end JS code was a bit floating...), and then I finally managed to run it, and I don't know if it was the correct way to write it.

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;
};

I saw the open source news of mpvue last week, and I tried it out. Today is a small program with simple functions. The overall feeling is more complicated than wepy, but the syntax is the syntax of vue (in fact, I don't know much about the syntax of vue). Let's compare the differences between the two frameworks I encountered:

value binding

Look at the code:

// 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;
}
            

In mpvue, the v-bind:value method is used, and e.mp.detail.value is used for the value. Wepy uses double curly braces to bind the value, and e.detail.value is used for the value, which is closer to the native applet , because it is a family?

program directory

The directory structure of mpvue needs to create its own directory under the pages directory, and then there are two files. For example: pages/index/index.vue, pages/index/main.js, configure the page in the pages array like this: 'pages/index/index', only one page can be used in a directory, according to God, this is possible changed, but I haven't succeeded yet. This is not as convenient as wepy.

Wepy is to create a .wpy file in any directory, write css, html, script in this file, and then compile it into three formats required by the applet. For example: pages/index.wpy , configure pages in the pages array like this: 'pages/index/', and multiple files can be in the same directory.

configure

The corresponding data {} in the applet

// mpvue 的写法
export default {
    data () {
      return {
        userInfo: {},
      }
    },
    components: {},
    methods: {}
    // 其他自定义方法
}

// wepy 的写法
export default class List extends wepy.page {
    data = {
        userInfo: {},
    };
    methods = {}
    // 其他自定义方法

Corresponding to the configuration of app.json, mpvue is main.js in the root directory (src), and wepy is app.wpy in the root directory

In general, wepy is simpler, and mpvue display is a bit more complicated (maybe my Vue foundation is poor.)