在微信小程序開發中，在很多地方會用到相似的UI布局時，如果我們每一頁都重寫一遍UI布局，不說效率低下，費時費力，在后期維護中如果需要更改UI布局，哪怕只是一個很小的改動，那么相同頁面就都需要改動，工程量大！所以，這時我們可以將相似的UI做成自定義組件，在需要的頁面引用，方便快捷！

效果圖

自定義picker

自定義picker

Step 1：創建component

這里寫圖片描述

組件目錄

Step 2：繪制component

wxml

<!-- 帶標題的普通選擇器 -->
<block wx:if="{{show}}">
  <view class="we-title-picker-container">
    <view style="width:{{titleWidth}};font-size:{{titleSize}};color:{{titleColor}};">{{ title }}</view>
    <picker class="we-title-picker" 
            style="background:{{pickerBg}};border:{{borderSize}} solid {{borderColor}};" 
            value="{{pickerIndex}}" 
            range="{{pickerRange}}" 
            bindchange="_pickerChangeEvent">
      <view class="we-title-picker-content" style="font-size:{{contentSize}};color:{{contentColor}};">{{ content }}</view>
    </picker>
  </view>
</block>

wxss

.we-title-picker-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.we-title-picker {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 15rpx;
}

.we-title-picker-content {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 110%;
  left: 15rpx;
  top: 15rpx;
  width: calc(100% - 30rpx);
  height: calc(100% - 30rpx);
}

Step 3：JS書寫

重點注意JS文件中的properties: {}以及methods: {}

// 選擇器的選擇方法名
const EVENT_PICKER_CHANGE = 'pickerChange';
// 默認屬性值
const DEF_CONFIG = {
  show: true,
  title: '標題',
  titleWidth: '220rpx',
  titleSize: '34rpx',
  titleColor: '#353535',
  pickerBg: 'white',
  pickerIndex: 0,
  pickerRange: null,
  content: '',
  contentSize: '34rpx',
  contentColor: '#353535',
  borderSize: '1rpx',
  borderColor: '#dadada',
}

Component({

  /**
   * 組件的屬性列表
   */
  properties: {
    // 是否顯示
    show: {
      type: Boolean,
      value: DEF_CONFIG.show
    },
    // 標題文字
    title: {
      type: String,
      value: DEF_CONFIG.title
    },
    // 標題的寬
    titleWidth: {
      type: String,
      value: DEF_CONFIG.titleWidth
    },
    // 標題文字的大小
    titleSize: {
      type: String,
      value: DEF_CONFIG.titleSize
    },
    // 標題文字的顏色
    titleColor: {
      type: String,
      value: DEF_CONFIG.titleColor
    },
    // 選擇器的選擇下標
    pickerIndex: {
      type: Number,
      value: DEF_CONFIG.pickerIndex
    },
    // 選擇器的選擇范圍
    pickerRange: {
      type: null,
      value: DEF_CONFIG.pickerRange
    },
    // 選擇器的背景
    pickerBg: {
      type: String,
      value: DEF_CONFIG.pickerBg
    },
    // 內容
    content: {
      type: String,
      value: DEF_CONFIG.content
    },
    // 內容文字的大小
    contentSize: {
      type: String,
      value: DEF_CONFIG.contentSize
    },
    // 內容文字的顏色
    contentColor: {
      type: String,
      value: DEF_CONFIG.contentColor
    },
    // 邊框的大小
    borderSize: {
      type: String,
      value: DEF_CONFIG.borderSize
    },
    // 邊框的顏色
    borderColor: {
      type: String,
      value: DEF_CONFIG.borderColor
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    /**
     * 公共方法
     */
    // 顯示組件
    show: function (config) {
      this.setData({
        show: true,
        // 如果 config.title 有值，則使用 config.title；如果為空，則使用原來的 title 值，下面屬性類似
        title: config.title ? config.title : this.data.title,
        titleWidth: config.titleWidth ? config.titleWidth : this.data.titleWidth,
        titleSize: config.titleSize ? config.titleSize : this.data.titleSize,
        titleColor: config.titleColor ? config.titleColor : this.data.titleColor,
        pickerIndex: config.pickerIndex ? config.pickerIndex : this.data.pickerIndex,
        pickerRange: config.pickerRange ? config.pickerRange : this.data.pickerRange,
        pickerBg: config.pickerBg ? config.pickerBg : this.data.pickerBg,
        content: config.content ? config.content : this.data.content,
        contentSize: config.contentSize ? config.contentSize : this.data.contentSize,
        contentColor: config.contentColor ? config.contentColor : this.data.contentColor,
        borderSize: config.borderSize ? config.borderSize : this.data.borderSize,
        borderColor: config.borderColor ? config.borderColor : this.data.borderColor,
      });
    },
    // 隱藏組件
    hide: function () {
      this.setData({
        show: false
      });
    },
    /**
     * 內部方法，所有內部方法不適合在外部調用，為區別開公有方法，內部方法可以以 "_" 開頭
     */
    // 選擇器選擇事件，在 picker 中的 bindchange="_pickerChangeEvent" 被調用
    _pickerChangeEvent: function (e) {
      // 獲取事件 e 的 detail 值
      let _detail = { value: e.detail.value }
      // triggerEvent 為觸發事件函數，與 _pickerChangeEvent 綁定，用于外部調用 _pickerChangeEvent 方法
      // 參數 1：EVENT_PICKER_CHANGE ===> 是外部調用時使用的方法名
      // 參數 2：_detail ===> 傳遞給 EVENT_PICKER_CHANGE 方法的 detail 值，  
      // 不傳遞則 EVENT_PICKER_CHANGE  方法的 detail 值為空
      this.triggerEvent(EVENT_PICKER_CHANGE, _detail);
    }
  }
})

Step 4：在頁面中使用

• 1、在頁面的json文件中添加組件引用

"usingComponents": {
    "we-title-picker": "/lib-me/ui/we-title-picker/we-title-picker",
    "we-title-date-picker": "/lib-me/ui/we-title-date-picker/we-title-date-picker",
    "we-simple-toast": "/lib-me/ui/we-simple-toast/we-simple-toast"
}  

引用規則 ===> "自定義組件名（可隨意取名）":"組件在項目中的相對路徑"
注意！注意！注意！ ===> 自定義組件名不能以wx-開頭，否則在頁面中會報"找不到組件標簽"

• 2、在頁面的wxml中調用

<!-- 多元統計頁面 -->
<view class="container">
  <view class="container-main">
    // 省略無關代碼
    ...... 
    <we-title-picker 
       id="customPicker"
       class="multi-hp-picker"   
       title="機器地點"   
       pickerRange="{{machinePosList}}"   
       content="{{machinePos}}"  
       bind:pickerChange="machineChange"   
       contentSize="30rpx" />
    // 省略無關代碼
    ......
  </view>
  <we-simple-toast id="toast" class="we-simple-toast" />
</view>

上述<we-title-picker ... >即為我們的自定義組件

• title、pickerRange、content、contentSize為我們的自定義屬性
• bind:pickerChange="machineChange"為我們在JS中使用this.triggerEvent(EVENT_PICKER_CHANGE, _detail);方法向外暴露的自定義方法，EVENT_PICKER_CHANGE為方法名，即pickerChange。注意：自定義方法前，一定要加bind，可以寫為bind:方法名或者bind方法名。

• 3、在頁面的JS中調用

• 根據id獲取自定義組件對象： customPicker= this.selectComponent('#customPicker');
• 調用自定義組件的方法，即methods: {...}中的方法：customPicker.show();