mpvue 開發微信小程序遇到的問題

demo源碼

mpvue可使用vue的基本語法來開發小程序，可使用vux，flyio等來輔助開發，方便快捷高效開發。固然這其中還有諸多限制。

官方文檔指出的問題就不一一羅列了，不清楚的童鞋請看這裏 mpvue官方文檔

另外看到了一份寫的還不錯的踩坑指南 ，共勉

下面來講說我踩的坑。

1、 swiper組件的問題

　　1. swiper組件自適應高度問題

　　　　解決思路是：獲取屏幕寬度，獲取圖片的寬高，而後等比設置當前屏幕寬度下swiper的高度。由於load事件只在圖片第一次加載的時候執行，因此取全部圖片高度的最大值便可

    <swiper :current="currSwiperItem" skip-hidden-item-layout="true" @change="switchItem('switchItem',$event)" :style="swiperImgH">
      <swiper-item v-for="(list,index) in swiperList" :key="index">
        <img  class="img" :src="list.imgPath" @load="calcImgH" mode="widthFix" alt="">
      </swiper-item>
    </swiper>

　　

/**
     * 動態計算swiper圖片的高度
     */
    calcImgH: async function (e) {
      let winWidth = wx.getSystemInfoSync().windowWidth; // 獲取當前屏幕的寬度
      let imgH = e.mp.detail.height; // 圖片高度
      let imgW = e.mp.detail.width;
      if (imgH > this.curImgH) {
        this.curImgH = imgH;
      }

      this.swiperImgH = `height:${winWidth * this.curImgH / imgW}px`;
    },

　　2. swiper組件的current必定要寫，若是不寫就會出現只顯示兩張圖片，從第三張開始高度均爲0.若是出現這種問題，請優先查看是否認義了current

2、v-show不能使用，請使用v-if，具體緣由應該是mpvue的問題，多是編譯的時候出了問題沒有編譯成wx：show

3、canvas保存圖片的時候顯示的是上一張圖片，這裏須要作重置處理，這個不是mpvue的問題

4、關於文件命名問題

　　例如：我想把 /pages/list/index.vue 中的js代碼提出來 單獨放在 /pageslist/index.js中，這個時候這個index.js文件命名就有問題了，在微信開發工具中會提示找不到/pages/list/main.wxml 文件，我想多是由於list下出現了兩個index文件mpvue不知道編譯哪個，因此纔出現了問題的吧，把js文件改爲除了index外的任何名字就行了。

5、vux的使用，在utils等純js文件中使用store,在vue中咱們會使用引入文件的方式使用，沒有任何問題，

例如：

import store from './store.js'  

console.log(store.status);

　　

可是在mpvue中這樣直接引入store使用是有問題的,這樣寫不會報錯，在mpvue中這裏的store和vue實例中的this.$store不是同一個實例，即 這裏的store.status !== this.$store.status。也就是說修改store.status的值，this.$store.status並不會作任何的改變，他們倆沒有關係。

6、canvas 問題

　　由於canvas使用的是原生組件，z-index並不會影響它的層級，永遠是在最上層的，若是須要作彈窗遮罩就須要使用 cover-view 或者cover-image ，這裏須要注意的是cover-view 或者cover-image必需要寫在canvas上下文的後面，若是寫在前面仍是同樣沒法遮住。

 

7、scroll-view 上拉加載下拉刷新

　　在

@touchend="scrollTouchEnd" 事件中 對知足條件的 scroll-top 賦值以後並無 並無頁面作出實質對的改變，由於對同一個值作相同的複製操做的時候mpvue並無執行這個賦值動做，解決方法是再賦一個不一樣的值，這樣就會作出改變了，代碼以下：

 

scrollTouchEnd() {
      console.log('scrollTouchEnd');

      if (this.scrollingTop < 80) {
        console.log('下拉刷新');
        this.refresh();
        this.scrolledTop = 0;
        this.scrolledTop = 80;
      }

      if (this.scrollHeight - this.scrollingTop - this.scrollWrapHeight <= 80) {
        console.log('上拉加載');
        this.loadMore();
        this.scrolledTop = this.scrollHeight - this.scrollWrapHeight;
        this.scrolledTop = this.scrollHeight - this.scrollWrapHeight - 80;
      }
    }

　　

 

以上就是我所踩過的坑。

 

願聖光與你同在