由浅入深，轻松掌握微信小程序自定义组件开发

2024-01-13 21:05:38

微信小程序自定义组件开发入门

微信小程序自定义组件是一种可重用的组件，它可以帮助开发者快速构建小程序界面，提高开发效率。自定义组件可以被其他组件或页面引用，从而实现代码的复用。

1. 创建自定义组件

要创建自定义组件，首先需要在小程序项目中创建一个组件目录，然后在组件目录下创建一个以 .wxml 结尾的文件，该文件用于定义组件的结构和样式。

<!-- dialog.wxml -->
<view class="dialog-mask" wx:if="{{isShow}}">
  <view class="dialog-wrapper">
    <view class="dialog-header">
      <slot name="title"></slot>
    </view>
    <view class="dialog-content">
      <slot name="content"></slot>
    </view>
    <view class="dialog-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</view>

在 .wxml 文件中，我们定义了自定义组件的结构，包括遮罩层、弹窗主体和弹窗底部。

接下来，我们需要在组件目录下创建一个以 .wxss 结尾的文件，该文件用于定义组件的样式。

/* dialog.wxss */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90%;
  background-color: #fff;
  border-radius: 10px;
}

.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-content {
  padding: 20px;
}

.dialog-footer {
  padding: 20px;
  border-top: 1px solid #eee;
}

在 .wxss 文件中，我们定义了自定义组件的样式，包括遮罩层、弹窗主体和弹窗底部的样式。

2. 使用自定义组件

创建好自定义组件后，就可以在小程序页面中使用它了。在小程序页面中，我们需要先在 .wxml 文件中引用自定义组件。

<!-- index.wxml -->
<view>
  <dialog title="提示" content="这是一个提示框" isShow="{{isShow}}"></dialog>
</view>

在 .wxml 文件中，我们通过

标签引用了自定义组件。

接下来，我们需要在小程序页面中为自定义组件提供数据。在小程序页面中，我们需要先在 .js 文件中定义数据。

/* index.js */
Page({
  data: {
    isShow: false
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        isShow: true
      })
    }, 1000)
  }
})

在 .js 文件中，我们定义了一个 isShow 数据，并通过 setTimeout 函数在 1 秒后将 isShow 的值设置为 true，从而显示自定义组件。

3. 自定义组件的生命周期

自定义组件的生命周期与小程序页面的生命周期类似，也包括 onLoad、onReady、onShow、onHide、onUnload 等生命周期函数。

在自定义组件的生命周期函数中，我们可以执行一些初始化操作、数据更新操作或销毁操作。例如，在 onLoad 生命周期函数中，我们可以初始化组件的数据；在 onReady 生命周期函数中，我们可以获取组件的 DOM 节点；在 onShow 生命周期函数中，我们可以显示组件；在 onHide 生命周期函数中，我们可以隐藏组件；在 onUnload 生命周期函数中，我们可以销毁组件。

4. 自定义组件的通信

自定义组件与小程序页面之间可以通过事件通信。自定义组件可以通过触发事件来通知小程序页面，小程序页面可以通过监听事件来响应自定义组件的通知。

要触发事件，我们需要在自定义组件中使用 triggerEvent 方法。例如，在自定义组件中，我们可以通过以下代码触发一个名为 close 的事件：

/* dialog.js */
Component({
  methods: {
    close() {
      this.triggerEvent('close')
    }
  }
})

在小程序页面中，我们可以通过以下代码监听 close 事件：

/* index.js */
Page({
  data: {
    isShow: false
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        isShow: true
      })
    }, 1000)
  },
  onClose() {
    this.setData({
      isShow: false
    })
  }
})