mpvue開發cnode社群問題記錄

xuj發表於2018-07-23
Vue

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>
複製程式碼

預覽

preview
preview
preview
preview
preview

目前小程式初始的樣子已經開發完成，但是還有很多待完善的地方，由於首次開發小程式，所有在程式碼上還存在很多不足之處，專案純屬自娛自樂，勿噴！！！

專案地址mpvue-node

相關文章