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

  

 

以上就是我所踩過的坑。

 

願聖光與你同在

 

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM