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 上拉加載下拉刷新
在
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; } }
以上就是我所踩過的坑。
願聖光與你同在