微信小程序 自己制作小组件

1. 简介

在微信小程序的开发过程中，我们会遇到很多需要重复使用的组件，例如弹窗、时间选择器、轮播图等等。为了提高开发效率，我们可以自己制作小组件，实现代码的可复用性和模块化。小组件可以理解为是一个封装好的模块，包含了样式、逻辑、组件之间的交互等方面的实现。本文将介绍如何自己制作小组件。

2. 创建小组件

2.1. 创建组件页面

在小程序开发工具的项目文件夹里，右键新建文件夹，起名为components。然后在components文件夹下新建一个文件夹，如：my-component。在my-component文件夹下创建my-component.wxml、my-component.wxss、my-component.js、my-component.json四个文件。

|-- components
      |-- my-component
            |-- my-component.wxml
            |-- my-component.wxss
            |-- my-component.js
            |-- my-component.json

其中，my-component.wxml是组件的结构，my-component.wxss是组件的样式，my-component.js是组件的逻辑，my-component.json是组件的配置文件。

2.2. 编写组件结构

在my-component.wxml文件中，先编写组件的基本结构，例如：

<view class="my-component">
  <text>{{title}}</text>
  <button bindtap="onBtnClick">按钮</button>
  <slot></slot>
</view>

上面的结构中，可以看到组件包含一个文本、一个按钮和一个插槽。其中，{{title}}表示是引用外部数据传入的。<slot></slot>是一个插槽，用于组件接收外部传入的组件或数据。

2.3. 编写组件样式

在my-component.wxss文件中，编写组件的样式。例如：

.my-component {
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
  padding: 24rpx;
}

上面的代码中，设置了组件的背景色、圆角、阴影和边距。

2.4. 编写组件逻辑

在my-component.js文件中，编写组件的逻辑。例如：

Component({
  properties: {
    title: String
  },
  methods: {
    onBtnClick: function() {
      console.log('按钮被点击了');
    }
  }
})

上面的代码中，定义了组件的属性title，和方法onBtnClick。

2.5. 配置组件

在my-component.json文件中，配置组件的相关信息。例如：

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

上面的代码中，"component": true表示这是一个组件，"usingComponents": {}是用来引入子组件的。

3. 使用小组件

3.1. 引入小组件

在需要使用组件的页面中，使用<using-components>标签引入组件。例如：

<using-components name="my-component" src="../components/my-component/my-component"></using-components>

上面的代码中，name表示组件的名称，src表示组件的路径。

3.2. 调用小组件

在需要使用组件的页面中，使用组件。例如：

<my-component title="这是一个小组件">
  <view>组件的内容</view>
</my-component>

上面的代码中，<my-component></my-component>就是调用组件的标签。

4. 总结

以上就是自己制作小组件的步骤。通过制作小组件，可以使代码的可复用性得到提高，同时也能使代码逻辑更加清晰，方便维护与更新。