Vant Weapp小程序蹲坑之使用checkbox组件

Posted 2021-02-08

引子

checkbox-group及checkbox组件是开发小程序中频繁使用的组件，当然在vant weapp组件库中对应的分别是van-checkbox-group和van-checkbox。遗憾的是，官方提供的仅是组件在原生微信小程序框架下的用法，但我们所关注的是如何把这些组件改写到mpvue框架中。有关此二组件常用属性，在文后引用地址（官方）都有详细介绍，在此省略。

问题1：数据绑定与模板字符串问题

这个问题困绕了我很长时间，搜索网络，包括google英文搜索，几乎没有找到相应的答案。首先，请看下面官方提供的组件在原生微信小程序框架下的用法：

<van-checkbox-group value="{{ result }}" bind:change="onChange">
  <van-cell-group >
    <van-cell
      wx:for="{{ list }}"
      wx:key="index"
      title="复选框 {{ item }}"
      clickable
      data-name="{{ item }}"
      bind:click="toggle"
    >
      <van-checkbox catch:tap="noop" class="checkboxes-{{ item }}" name="{{ item }}" />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

请注意上面van-cell组件的title组件与van-checkbox组件的class属性表达方式，在转换成mpvue框架下的表达时，我相当然地表达成下面这样：

<van-checkbox-group :value="result" @change="onChange">
  <van-cell-group >
    <van-cell
      v-for="item in list"
      :key="index"
      :title=`复选框${item}`
      clickable
      :data-name="item"
      @click="toggle"
    >
      <van-checkbox @tap="noop" :class=`checkboxes-${item}` :name="item" />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

结果编译都通过不了！

解答：

通过美团开源官方上问题集处（引用地址2）得到初步答案提示，说：
“目前是直接把 template 转译成 wxml ，wxml 不支持 ``，所以目前暂无法支持”
即由于微信小程序官方（时间是2018年8月，至今仍然不支持）的wxml语法中不支持ES6的模板字符串表达方式，所以mpvue官方（因为其最终也是走转换成wxml的路子）也宣布不支持，只是没有在醒目的文档说明中提到（这真正是一个“坑”啊）。那么，如何修改上面非常明确的常用需求呢？经过反复试验，方式如下（只写关键部分）：

:title="‘复选框‘+item"
:class="‘checkboxes-‘+item"

有上述需求的同学可要好好观察一下了！这里没有使用到模板字符串中反向单引号，在双引号的里面可以归纳成由单引号字符串组成的通过加号连接的字符串加法，只不过参与加法的一些部分是字符串变量而已。

问题2：selectComponent方法的使用

官方资料中提到：selectComponent用于微信小程序开发中获取自定义子组件，详情见引用资料3。那么，官方示例中提到的方法（如下）如何改写呢？

toggle(event) {
    const { name } = event.currentTarget.dataset;
    const checkbox = this.selectComponent(`.checkboxes-${name}`);
    checkbox.toggle();
  }

请看下面的答案。
# 解答：

   toggle(event) {
        const {name} = event.mp.currentTarget.dataset;
        const box =this.$mp.page.selectComponent(`.checkboxes-${name}`)
        box.toggle();
      }

注意，上面使用了标准的ES6中模板字符串表达方式，因为这里不是wxml文件中，而是vue文件中的<script>脚本片断中，是没有问题的。有兴趣的同学可以详细调试分析这里提到的几个值，例如this.$mp；恕在此不赘述。

补充1

van-checkbox组件默认情况下显示的是单选按钮形式的图标，因此需要使用shape属性修正一下为好，如下所示：

<van-checkbox v-for="item in list" :key="index" :name="item"  shape="square">
          选项 {{ item }}
        </van-checkbox>

这里的shape属性值默认为circle。经上述修改即成为常见的方形的复选框图标了。

补充2

在同学们学习官方提供的checkbox定制图标示例中，如果是使用本地图标文件，记得要使用绝对地址方式，相对地址出现找不到的错误提示。正确方式类似如下表达：

    ```

icon: {
normal:‘/static/images/custom_normal_checkbox.png‘,
active:‘/static/images/custom_active_checkbox.png‘
}

# 引用
1.https://youzan.github.io/vant-weapp/#/checkbox
2.https://github.com/Meituan-Dianping/mpvue/issues/845
3.https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html?search-key=selectComponent