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

demo源碼

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

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

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

下面來說說我踩的坑。

一、 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

二、v-show不能使用，請使用v-if，具體原因應該是mpvue的問題，可能是編譯的時候出了問題沒有編譯成wx：show

三、canvas保存圖片的時候顯示的是上一張圖片，這里需要做重置處理，這個不是mpvue的問題

四、關於文件命名問題

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

五、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並不會做任何的改變，他們倆沒有關系。

六、canvas 問題

　　因為canvas使用的是原生組件，z-index並不會影響它的層級，永遠是在最上層的，如果需要做彈窗遮罩就需要使用 cover-view 或者cover-image ，這里需要注意的是cover-view 或者cover-image必須要寫在canvas上下文的后面，如果寫在前面還是一樣無法遮住。

 

七、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;
      }
    }

　　

 

以上就是我所踩過的坑。

 

願聖光與你同在