微信小程序填坑之路（五）：简单的自定义组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liyi1009365545/article/details/80282086

在微信小程序开发中，在很多地方会用到相似的UI布局时，如果我们每一页都重写一遍UI布局，不说效率低下，费时费力，在后期维护中如果需要更改UI布局，哪怕只是一个很小的改动，那么相同页面就都需要改动，工程量大！所以，这时我们可以将相似的UI做成自定义组件，在需要的页面引用，方便快捷！

目录

1.创建component
2.绘制component
3.component的JS书写
4.在页面中调用component

• 4.1在页面json中添加引用
• 4.2在页面wxml中调用
• 4.3在页面js中调用

效果图

Step 1：创建component

上图中，创建的component一共有四个文件，分别是js文件、json文件、wxml文件以及wxss文件

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();