微信小程序 自定义组件

微信小程序是一种基于微信平台的应用程序，它可以在微信中直接运行，无需下载安装。而自定义组件是小程序中的一种重要功能，它允许开发者将一些常用的UI元素封装成组件，以便在不同的页面中复用。

自定义组件具有以下特点：
1. 组件是由wxml、wxss和js文件组成，可以独立定义样式和逻辑。
2. 组件可以接受外部传入的数据，通过属性进行配置。
3. 组件可以触发事件，向外部传递消息。
4. 组件可以包含子组件，形成组件的嵌套结构。

使用自定义组件的步骤如下：
1. 在小程序项目中创建一个新的文件夹，用于存放自定义组件的相关文件。
2. 在该文件夹中创建一个wxml文件，定义组件的结构。
3. 在同一文件夹中创建一个wxss文件，定义组件的样式。
4. 在同一文件夹中创建一个js文件，定义组件的逻辑。
5. 在需要使用该组件的页面中引入组件，并在wxml中使用组件标签。

例如，我们创建一个名为"custom-component"的自定义组件，其文件结构如下：

custom-component/
  ├── custom-component.wxml
  ├── custom-component.wxss
  └── custom-component.js

在custom-component.wxml中定义组件的结构，例如：

<view class="custom-component">
  <text>{{text}}</text>
  <button bindtap="handleClick">点击按钮</button>
</view>

在custom-component.wxss中定义组件的样式，例如：

.custom-component {
  background-color: #f5f5f5;
  padding: 10px;
}

在custom-component.js中定义组件的逻辑，例如：

Component({
  properties: {
    text: {
      type: String,
      value: '默认文本'
    }
  },
  methods: {
    handleClick() {
      this.triggerEvent('click', { message: '按钮被点击了' });
    }
  }
})

在需要使用该组件的页面中引入组件，并在wxml中使用组件标签，例如：

<custom-component text="Hello World" bind:click="handleCustomComponentClick"></custom-component>

以上就是微信小程序自定义组件的简单介绍。