通过mpvue编写微信小程序遇到的一些坑（持续更新）

1.mpvue把一个页面中相似的写成组件，如何通过借用微信小程序api使每个组件跳转的页面不相同？

通常写一个页面跳转：

 <div class="hb-container" @click="gogogo">

methods:{
		gogogo(){
            wx.navigateTo({
                url:"/pages/learn"
            })
		}
		}

即可实现跳转；当写成组件，为使组件里的各个模块跳转不一致，应做如下修改：

 <div class="hb-container"  v-for="(list,index) in contents" :key="index"     	    @click="gogogo(list.path)">

methods:{
		gogogo(path){
            const url = `${path}?index=${this.index}`
            wx.navigateTo({url})
		}
		}

contents:[
    {
         img: "../../../static/img/shijuan.png",
         text: "章节练习",
         path: '/pages/model',
         index: 0
    }

若要给跳转后的页面可做如下修改：

methods:{
		gogogo(path){
            const abc = 'asdasdadads';
            const url = `${path}?index=${this.index}&ddd=${abc} `
            wx.navigateTo({url})
		}
		}

跳转后的页面：

import { getQuery } from '@libs/utils';

mounted() {
    const { index, ddd } = getQuery();
    console.log(index)
    console.log(ddd)
  }

2.picker在mpvue如何使用：

  <picker :value="index" :range="array" @change="bindPickerChange">
           <view class="picker">
              {{array[index]}}
            </view>
   </picker>

methods:{
      bindPickerChange(e) {
      console.log('picker发送选择改变，携带值为', e.mp.detail.value);
      this.index = e.mp.detail.value;
    },
}

3.如何把背景图平铺

只需添加一行代码 ：
background-size: cover;