WeChat小程式交流（QQ群：769977169）

效果圖

xxx.wxml結構程式碼示例

<view class='view'>{{clickMsg}}</view>
<view class='view0' id="view0" bindtap='clickMe'>點選view0</view>
<view class='view1' id="view1" bindtap='clickMe'>點選view1</view>

xxx.wxss樣式程式碼示例

.view{
  margin: 20rpx 20rpx auto;

  background-color: Thistle;

  height: 88rpx;
}

.view0{
  margin: 20rpx auto;

  border-radius: 20rpx;

  background-color: LightPink;

  text-align: center;
  line-height: 88rpx;

  width: 60%;
  height: 88rpx;
}

.view1{
  margin: 20rpx auto;

  border-radius: 20rpx;

  background-color: MediumSlateBlue;

  text-align: center;
  line-height: 88rpx;

  width: 60%;
  height: 88rpx;
}
 

xxx.js業務邏輯程式碼示例

var count = 0;

Page({

  /**
   * 頁面的初始資料
   */
  data: {    
    clickMsg: "顯示點選的內容"
  },

  clickMe: function (even) {
    console.log(even);

    var id = even.currentTarget.id;
    count++;
    this.setData({
      clickMsg: "顯示點選內容" + id + "點選了" + count + "次",
    });
  }
}