mpvue 是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗
開發這款小程式主要是為了體驗mpvue框架的開發流程，所以在部分介面功能上借鑑了其他開源專案(mpvue-node)，對此表示非常感謝!
由於涉及個人小程式未允許內容：文娛-資訊（含有評論功能）,所有小程式沒有釋出成功，只能在本地瀏覽
本文主要是為了記錄在使用mpvue開發時所遇到的一些地方
1. vuex 的使用
//在src/main.js 中
import store from './store/index';
Vue.prototype.$store = store;
複製程式碼2. 提示：單個 JS 檔案的體積超過了 500KB，則會跳過 ES6 轉 ES5 以及程式碼壓縮的處理
在開發過程中，微信開發工具會提醒你提示：單個 JS 檔案的體積超過了 500KB，則會跳過 ES6 轉 ES5 以及程式碼壓縮的處理;
其實這個不需要處理，因為mpvue的構建工具已經有 ES6 轉 ES5 和壓縮功能，可以關閉開發者工具的這些功能issues
目前mpvue不支援分包載入，如果需要使用可參考590 672
3.介面請求失敗
小程式開發所用的介面，均來源於cNode社群，在開發中如果提示你介面請求失敗，可能是你沒有設定request合法域名，在小程式開公眾平臺->開發設定->伺服器域名中設定request合法域名
4.this指向問題
在開發中，有時會呼叫小程式的官網api，會導致this指向出錯獲取不到真確資料
//例如
export default {
data(){
return{
accesstoken:null
}
},
methods:{
dd(){
//
let vue = this;
wx.showModal({
content:'這是彈窗'，
showCancel: false,
confirmText: "確定",
complete() {
//掃描二維碼
wx.scanCode({
success(res) {
//這裡的this會指向wx，需要使用上面定義的vue
vue.accesstoken = res.result;
}
});
}
})
}
}
}
複製程式碼5.mpvue 不支援部分複雜的 JavaScript 渲染表示式
也就是你在模板中不能直接只有methods中方法
//這樣寫頁面無法渲染
<div>{{getTimeInfo(item.create_at)}}</div>
複製程式碼需要這樣寫
//template
<div>{{item.createTime}}</div>
//js
//需要在獲取資料的時候，處理資料
this.list = this._normalizeTopics(res)
_normalizeTopics(json) {
return json.map(item => {
return Object.assign(item, {
createTime: formatTime(item.create_at),
});
});
}
複製程式碼6.created生命週期
所有頁面的created會在小程式載入的時候一起執行，不管頁面你是否開啟，
如果需要在頁面載入的時候執行操作，可利用小程式本身的生命週期
async onLoad(){}
複製程式碼7.路由及引數
mpvue中不能使用vue-router，所有需要用小程式自身的api進行頁面跳轉，如
wx.navigateTo({
url: 'test?id=1'
})
複製程式碼如果需要獲取路由引數，有下面兩種方式
async onLoad(option) {
//通過option引數獲取
let id = option.id;
//通過this.$root.$mp.query方式獲取
let id = this.$root.$mp.query.id
}
複製程式碼8.列表渲染時需增加索引，否則會發生警告
<div v-for="(item,index) in list" :key="index">
複製程式碼9. 改變page 標籤的css屬性
在開發時，有時需要設定頁面100%的高度,在平時開發時，只需要
page{
height:100%
}
複製程式碼但是在mpvue中開始不起作用，後來發現是scoped屬性的原因去掉即可
<style lang="scss"></style>
複製程式碼預覽
目前小程式初始的樣子已經開發完成，但是還有很多待完善的地方，由於首次開發小程式，所有在程式碼上還存在很多不足之處，專案純屬自娛自樂，勿噴！！！
專案地址mpvue-node