微信小程序，自定義組件實例詳解

類似於購物車加減帶輸入框的微信小程序組件

第一步
新建一個 component 文件夾，我們的所有組件都存放在這裏。因爲我們今天要做一個計數器組件，所以點擊右鍵新建一個 stepper 文件夾，裏面的會生成對應的 json wxml wxss js 4個文件。

第二步
將 stepper.json 中 component 字段設爲 true。

{
  "component": true
}

第三步
stepper.wxml

<view class="stepper">
  <button class="{{minusStatus}}" hover-class='stepper-b' bindtap="bindMinus">-</button>
  <input type="number" bindchange="bindManual" value="{{num}}" />
  <button class="normal" hover-class='stepper-b' bindtap="bindPlus">+</button>
</view>

第四步
stepper.wxss

/*輸入框加減按鈕*/

.stepper {
  flex: 1; 
  height: 88rpx;
  background: #e8e8e8;
  border-radius: 3px;
  position: relative;
  margin: 0 20rpx;
}

.stepper >button {
  width: 84rpx;
  height: 84rpx;
  line-height: 78rpx;
  background: #fff;
  color: #6c6fc0;
  font-size: 56rpx;
  text-align: center; 
  display: block; 
  border-radius: 3px;
}
.stepper >button:first-child {
  position: absolute;
  left: 2rpx;
  top: 2rpx;
}
.stepper >button:last-child {
  position: absolute;
  right: 2rpx;
  top: 2rpx;
}

.stepper >button.stepper-b{
  background: #6c6fc0;
  color: #fff;
}

.stepper input {
  flex: 1;
  height: 88rpx;
  text-align: center;
  font-size: 28rpx;
  margin: 0 88rpx;
}

.stepper .normal {
  color: #6c6fc0;
}

.stepper .disabled {
  color: #aaaaaa;
}

第五步
stepper.js，注意，事件需要寫在methods裏面。

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啓用多slot支持
  },
  /**
   * 組件的屬性列表
   * 用於組件自定義設置
   */
  properties: {
    // 
    num: {            // 屬性名
      type: Number,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: 18     // 屬性初始值（可選），如果未指定則會根據類型選擇一個
    },
    step:{
      type:Number,
      value:1
    }
  },

  /**
   * 私有數據,組件的初始數據
   * 可用於模版渲染
   */
  data: {
    minusStatus: 'normal'
  },


  /**
   * 組件的方法列表
   * 更新屬性和數據的方法與更新頁面數據的方法類似
   */
  methods: {
    /* 點擊減號 */
    bindMinus: function() {
      var num = this.data.num;
      if (num > 1) {
        num-=this.data.step;
      }
      var minusStatus = num <= 1 ? 'disabled' : 'normal';
      this.setData({
        num: num,
        minusStatus: minusStatus
      });
      this.pushValueChange();
    },
    /* 點擊加號 */
    bindPlus: function() {
      var num = this.data.num;
      num += this.data.step;
      var minusStatus = num < 1 ? 'disabled' : 'normal';
      this.setData({
        num: num,
        minusStatus: minusStatus
      });
      this.pushValueChange();
    },
    /* 輸入框事件 */
    bindManual: function(e) {
      var num = e.detail.value;
      this.setData({
        num: num
      });
      this.pushValueChange();
    },pushValueChange:function(){
      const myEventDetail = {val:this.data.num} // detail對象，提供給事件監聽函數       
      this.triggerEvent('valueChange', myEventDetail)
    }
  }

})

組件已經佈置好了。現在如何調用呢？

第一步，首先需要在 index.json 中引入組件：

{
  "usingComponent": {
    "stepper": "/components/stepper/stepper"
  }
}

第二步，在 index.wxml 中引入它

<stepper id="lesson" name='time' num="{{num}}" bindvalueChange="valueChange" style="flex:1;"></stepper>

最後一步，index.js 配置

var app = getApp();
Page({
  data: {
    num: 20
	}
})

這樣，一個簡單的自定義組件就完成了。