微信小程序填坑之路(五):简单的自定义组件

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

效果图

自定义picker
自定义picker

Step 1:创建component

这里写图片描述

组件目录

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

Step 2:绘制component

wxml



  
    {{ title }}
    
      {{ content }}
    
  

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中调用


  
    // 省略无关代码
    ...... 
    
    // 省略无关代码
    ......
  
  

上述即为我们的自定义组件

  • titlepickerRangecontentcontentSize为我们的自定义属性
  • 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();

你可能感兴趣的:(微信小程序填坑之路(五):简单的自定义组件)