mpvue開發cnode社區問題記錄

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