微信小程序-封装日历组件与组件传值

封装日历组件

基于封装日历组件，学会封装业务组件到使用的流程

1. 新建baseCalendar文件夹(具体步骤👉微信小程序-二次封装组件和自定义组件)
2. 在该文件夹下的json文件中添加

   {
     "component": true,
     "styleIsolation": "shared",
     "usingComponents": {
   		"van-calendar": "@vant/weapp/calendar/index" // 要封装组件的路径
     }
   }

3. 从原组件的js文件中将props中需要的内容复制到封装组件的js文件中的properties中
4. 在封装组件的wxml文件下使用原组件和添加插槽
5. 在app.json中的usingComponents定义的封装组件标签名和路径
6. 页面通过使用封装组件的标签来使用原组件加自定义的方法和样式
7. 更改组件的样式，通过官方的文档找到对应组件的样式和属性进行更改

组件的传值

页面使用

• 如：页面中的组件要使用这个属性或方法minDate="{{ minTimestamp }}"

页面数据初始化

• 在页面的js文件中的data定义一个初始值minTimestamp: 0

组件类型初始化

• 在组件的js文件的properties中写上属性名及其类型,两种写法

  方式一：minDate: Number
  方式二：minDate:{
    type: Number,
    value: 0
  }

组件使用

• 组件页面中也要使用到minDate="{{ minDate }}"

页面更改—完成传值（简单类型）

• 页面js文件就可以通过函数方法去更改minTimestamp的值，来更新数据

调接口获取数据后 页面向组件传值（以动态显示该日期是否约满为例）

页面引入api文件，

• 发请求，获取约满的数据，data中要初始化一下fullTimes: []

  async getFullTimes() {
    const result = await API.getFullTimes()
  	this.setData({
      fullTimes: result.result.list
    })
  }

页面初始化

• 在onLoad()中调用初始化：onLoad() {this.getFullTimes()}

页面组件的使用

• 页面的组件中使用这个属性或方法fullTimes="{{ fullTimes }}"

自定义组件中使用

• 在自定义组件js文件中的properties中写上属性名及其类型

  fullTimes: {
    type: Array,
    value: [],
    // 监听这边是否接收到fullTimes，有数据才初始化，防止二次初始化
    observer(newFullTimes) {
      if (newFullTimes.length) {
        this.initCalendarDateFormat()
      }
    },
  }

• 组件wxml文件也要使用到这个formatter="{{ formatter }}"
• 在组件的js文件中的data初始化formatter: null

自定义组件中初始化日历的状态

methods：{
  initCalendarDateFormat() {
    const fullTimes = this.data.fullTimes
    const formatter = (day) => {
      // 此处使用了封装的函数
      const today = isTodday(Date.now(), day.date.valueOf())
      // includes() 方法:判断fullTimes是否包含一个day.date.valueOf()值
      if (fullTimes.includes(day.date.valueOf())) {
        day.type = 'disabled'
        day.bottomInfo = '约满'
      }
      if (today) {
        day.type = 'disabled'
        day.bottomInfo = '今天'
      }
      return day
    }
        
    this.setData({
      formatter
    })
  }
}

自定义组件的生命周期的lifetimes中的ready再次初始化 — 完成传值（复杂类型）