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

　　

 

以上就是我所踩过的坑。

 

愿圣光与你同在