WeChatウィジェットのイベントバインド

前言:
微信ウィジェットのイベントバインドとVueのイベントバインドには実際には多くの類似点があるので、Vueに関する経験があれば、学ぶのは簡単です.
 
jsコード:

//     js      Page       ，
//              

Page({
  parent() {
    console.log('parent')
  },
  father() {
    console.log('father')
  },
  son() {
    console.log('son')
  }
})

 
wxssコード:(つまり対応するスタイル)

.parent{
  width: 500rpx;
  height: 500rpx;
  background-color: red;
  margin-bottom: 20rpx;
}

.father{
  width: 300rpx;
  height: 300rpx;
  background-color: pink;
}

.son{
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
}

 
wxmlコード:

<view class="parent" bind:tap="parent">
  <view class="father" bind:tap="father">
    <view class="son" bind:tap="son">view>
  view>
view>


<view class="parent" catch:tap="parent">
  <view class="father" catch:tap="father">
    <view class="son" catch:tap="son">view>
  view>
view>


<view class="parent" capture-bind:tap="parent">
  <view class="father" capture-bind:tap="father">
    <view class="son" capture-bind:tap="son">view>
  view>
view>



<view class="parent" capture-catch:tap="parent">
  <view class="father" capture-catch:tap="father">
    <view class="son" capture-catch:tap="son">view>
  view>
view>


<view class="parent" mut-bind:tap="parent">
  <view class="father" mut-bind:tap="father">
    <view class="son" mut-bind:tap="son">view>
  view>
view>

 
まとめ:

一般開発で使われることが多いのは、前の2種類の

です.

Vueのコマンドがあれば、入手はすぐに

になります.