mpvue使用一周踩坑合集

  使用mpvue开发小程序差不多整整一周了。在此总结一下使用过程遇到的一些坑和比较特别的用法。

mpvue不支持在组件上定义v-show

  这一点官方文档也有提到并建议使用v-if代替。但v-if与v-show有一个最大的不同就是，v-if的切换过程，实际上有子组件的销毁和重建。而v-show只是简单的通过display这个CSS属性进行切换。
  这个不同带来的影响是：如果在组件的生命周期里定义了一些操作，并使用v-if代替v-show，每一次切换都会触发执行这些生命周期函数中的操作。而与我们想使用v-show的本意不同（v-show只在初次渲染时触发执行一次）。
  解决办法：
（1）将父组件中一个Boolean类型的属性通过prop传递给子组件
（2）在子组件的最顶级元素上设置display属性
（3）通过父组件传来的prop控制display属性值的切换（三目运算符）
（4）在父组件中修改这个Boolean类型的属性的值来实现子组件的显示和隐藏

//father.vue
<template>
  <div>
    <my-child :is-show="isShow"></my-child>
    <button @click="changeShow">显示/隐藏</button>
  </div>
</template>
<script>
import MyChild from "./child.vue";
export default {
  components: { MyChild },
  data() {
    return { isShow: false };
  },
  methods: {
    changeShow() {  //点击按钮，将isShow的值取反
      this.isShow = !this.isShow;
    }
  }

//child.vue
<template>
  <div :style="{ display: isShow ? 'block' : 'none' }"> 
  //如果父组件传递的prop值改变，则display的值也改变
    <span>hi!</span>
  </div>
</template>
<script>
  export default {
    props: {
      isShow: { type: Boolean }
    }
  }
</script>

mpvue中新增页面的步骤

（1）新建一个文件夹，并且在文件夹下新建index.vue、main.js、main.json。main.js的内容复制之前的就好。main.json是对页面的配置。
（2）在项目src/app.json中的pages或subpackages字段中添加新增页面的路径。之前我没有做一步，结果配置的页面标题无效，标题栏是空的。
（3）重新npm run dev

mpvue不支持ref

  有一次想使用ref访问子组件的方法，但父组件的$ref属性始终是空的。后来查了mpvue在GitHub的上issue得知，还不支持ref。目前还没有找到好的解决办法。

页面数据的问题

  从页面X返回页面Y，然后再从页面Y进入页面X时，页面X中数据属性依然存在。如果想确保每次进入页面时数据属性都是空的，可以onLoad中手动清空或重置。

设置radio组件的大小

  为小程序中的radio组件设置width和height属性不会改变radio的大小。而使用：

   transform: scale(0.8);   //0.8是它的缩放比例，0.几都可以

只有一个radio时，选中后无法取消

  radio单选按钮组件只有一个时，选中后就取消不了。
  原因：radio单选按钮本身导致，它本身的特性就是必须保持一个选中。
  解决办法：
（1）将radio的checked属性绑定到一个Boolean类型的数据属性上。
（2）监听radio的click事件，当点击radio时，将绑定的Boolean类型的属性值取反。以实现改变radio选中状态的效果。

<radio-group @click="changeChecked">
  <radio :checked="isChecked"></radio>
  <span>是否选中</span>
</radio-group>

export default {
    data() {
        return { isChecked: false }
    },
    methods: {
        changeChecked() {
            this.isChecked = !this.isChecked;
        }
    }
}