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

　　

 

以上就是我所踩过的坑。

 

愿圣光与你同在