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

引子

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