2019獨角獸企業重金招聘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="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基礎差吧。）

轉載于:https://my.oschina.net/thinker4self/blog/1647338

總結

以上是生活随笔為你收集整理的使用mpvue和wepy开发小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。