一、自定义组件概述

微信小程序的自定义组件是小程序开发中非常重要的功能，它允许开发者将页面中的功能模块抽象成独立的组件，实现代码复用和项目模块化管理。

为什么需要自定义组件

1. 代码复用：多个页面可以共用相同的UI结构和功能逻辑

2. 项目解耦：将复杂页面拆分为多个组件，便于开发和维护

3. 团队协作：不同开发者可以并行开发不同组件

4. 功能封装：隐藏实现细节，提供清晰的接口

二、创建自定义组件

1. 组件目录结构

一个标准的自定义组件目录结构如下：

components/
  my-component/
    my-component.js     // 组件逻辑
    my-component.json   // 组件配置
    my-component.wxml   // 组件模板
    my-component.wxss   // 组件样式

2. 声明组件

在组件的json文件中进行声明：

{
  "component": true,
  "usingComponents": {}
}

3. 注册组件

在组件的js文件中进行注册：

Component({
  properties: {
    // 定义组件的属性
    title: {
      type: String,
      value: '默认标题'
    }
  },
  data: {
    // 组件的内部数据
    count: 0
  },
  methods: {
    // 组件的方法
    onTap() {
      this.setData({ count: this.data.count + 1 })
      this.triggerEvent('customevent', {count: this.data.count})
    }
  }
})

三、使用自定义组件

1. 在页面中引入组件

首先需要在页面的json文件中声明要使用的组件：

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

2. 在页面中使用组件

<my-component title="自定义标题" bind:customevent="onMyComponentEvent" />

3. 处理组件事件

在页面js中处理组件触发的事件：

Page({
  onMyComponentEvent(e) {
    console.log('组件触发的事件:', e.detail)
  }
})

四、组件通信

1. 父组件向子组件传递数据

通过properties传递：

<my-component prop-a="dataA" prop-b="{{dataB}}" />

2. 子组件向父组件传递数据

通过triggerEvent触发事件：

this.triggerEvent('eventname', {data: 'value'}, {})

3. 获取组件实例

通过selectComponent获取组件实例：

const child = this.selectComponent('.my-component')
child.someMethod() // 调用组件方法

五、组件生命周期

自定义组件有特定的生命周期函数：

Component({
  lifetimes: {
    created() {
      // 组件实例刚刚被创建时执行
    },
    attached() {
      // 组件实例进入页面节点树时执行
    },
    ready() {
      // 组件在视图层布局完成后执行
    },
    detached() {
      // 组件实例被从页面节点树移除时执行
    }
  },
  pageLifetimes: {
    show() {
      // 页面被展示时执行
    },
    hide() {
      // 页面被隐藏时执行
    }
  }
})

六、组件插槽

自定义组件支持插槽(slot)功能，用于内容分发：

1. 定义插槽

在组件wxml中：

<view class="wrapper">
  <slot name="before"></slot>
  <view>组件内容</view>
  <slot name="after"></slot>
</view>

2. 使用插槽

在页面中使用组件时：

<my-component>
  <view slot="before">这是插入到before的内容</view>
  <view slot="after">这是插入到after的内容</view>
</my-component>

七、组件样式

1. 组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响其他组件和页面。可以通过options配置样式隔离：

Component({
  options: {
    styleIsolation: 'isolated' // 可选值: isolated, apply-shared, shared
  }
})

2. 外部样式类

组件可以接受外部传入的样式类：

Component({
  externalClasses: ['my-class']
})

使用：

<my-component my-class="red-text" />

八、最佳实践

1. 合理拆分组件：将可复用的UI和功能拆分为组件

2. 明确组件职责：每个组件应专注于单一功能

3. 良好的接口设计：properties和events要设计得清晰易用

4. 性能优化：避免不必要的渲染，合理使用纯数据字段

5. 文档注释：为组件编写清晰的文档和使用示例

九、高级特性

1. 纯数据字段

标记某些数据字段不参与界面渲染：

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有_开头的数据字段为纯数据字段
  },
  data: {
    _internalData: '不参与渲染的数据'
  }
})

2. 抽象节点

用于动态指定组件类型：

Component({
  options: {
    virtualHost: true
  }
})

十、总结

微信小程序自定义组件是构建复杂小程序应用的基础，通过合理使用组件化开发，可以显著提高代码的可维护性和开发效率。掌握自定义组件的创建、通信、生命周期和高级特性，能够帮助开发者构建更加健壮和灵活的小程序应用。