微信小程序开发入门 5 组件开发与使用

微信小程序采用组件化开发，通过组件组织界面和功能逻辑，不仅能提升代码复用性，也更利于模块管理和维护。

本章将讲解：

• 官方组件的介绍与使用
• 自定义组件的创建与调用
• 组件之间的数据传递与通信（按钮点击改变状态 + 通知页面）

---

一、官方组件的介绍与使用

微信小程序提供了丰富的官方基础组件，如：

• 视图类：view, scroll-view, swiper
• 表单类：button, input, checkbox
• 媒体类：image, video, audio

示例：使用 button 组件

<button type="primary" bindtap="sayHi">点我一下</button>

Page({
  sayHi() {
    wx.showToast({
      title: '你好！',
      icon: 'none'
    })
  }
})

---

二、自定义组件的创建与调用

示例：自定义彩色按钮组件

我们创建一个名为 myButton 的自定义组件，它具有以下特点：

• 默认显示蓝色按钮，点击后变绿色
• 支持父页面传入按钮文字
• 点击按钮后触发自定义事件，通知父页面

1. 创建组件文件夹及结构

components/
└── myButton/
    ├── myButton.js
    ├── myButton.json
    ├── myButton.wxml
    └── myButton.wxss

---

2. 编写组件文件

🔹 myButton.json

{
  "component": true
}

🔹 myButton.js

Component({
  properties: {
    label: {
      type: String,
      value: '点击我'
    }
  },
  data: {
    active: false
  },
  methods: {
    onButtonClick() {
      this.setData({ active: !this.data.active }) // 切换按钮状态
      this.triggerEvent('press', { label: this.properties.label }) // 通知父页面
    }
  }
})

🔹 myButton.wxml

<view class="btn" 
      style="background-color: {{active ? '#4CAF50' : '#2196F3'}};" 
      bindtap="onButtonClick">
  <text class="btn-text">{{active ? '已点击' : label}}</text>
</view>

🔹 myButton.wxss

.btn {
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  text-align: center;
  margin: 20rpx auto;
  width: 300rpx;
  color: white;
  font-size: 32rpx;
}

---

3. 父页面中调用组件

🔹 注册组件：index.json

{
  "usingComponents": {
    "my-button": "/components/myButton/myButton"
  }
}

🔹 页面结构：index.wxml

<view class="container">
  <my-button label="点我试试看" bind:press="handlePress" />

  <view style="margin-top: 40rpx; font-size: 28rpx; text-align: center;">
    <text>{{message}}</text>
  </view>

  <view style="margin-top: 40rpx; font-size: 28rpx; text-align: center; color: gray;">
    当前用户：{{globalUser}}
  </view>
</view>

🔹 页面逻辑：index.js

const app = getApp()

Page({
  data: {
    message: '',
    globalUser: ''
  },

  onLoad() {
    this.setData({
      globalUser: app.globalData.userInfo?.name || '未知用户'
    })
  },

  handlePress(e) {
    wx.showToast({
      title: '你点击了按钮: ' + e.detail.label,
      icon: 'none'
    })
    this.setData({
      message: '按钮已被点击！'
    })
  }
})

---

三、组件之间的数据传递与通信（按钮示例）

1. 父向子传值（传入按钮文字）

在父页面中传入组件属性：

<my-button label="开始按钮"></my-button>

组件通过 properties 获取：

properties: {
  label: String
}

---

2. 子向父通信（通知点击事件）

在组件内部点击按钮时触发事件：

this.triggerEvent('press', { label: this.properties.label })

父页面中绑定事件：

<my-button label="点我" bind:press="handlePress"></my-button>

父页面定义响应函数：

handlePress(e) {
  wx.showToast({
    title: '你点击了按钮: ' + e.detail.label
  })
}

---

3. 使用全局数据（globalData）

在 app.js 中定义全局数据：

App({
  globalData: {
    userInfo: {
      name: 'Tom'
    }
  }
})

在页面中访问：

onLoad() {
  this.setData({
    globalUser: app.globalData.userInfo?.name
  })
}

---

小结

本章通过一个按钮状态切换组件的完整案例，讲解了：

• 官方组件与自定义组件的区别
• 如何封装可复用的组件
• 如何实现父传子、子传父通信
• 如何在组件与页面中共享全局数据

---

练习题

1. 修改按钮组件，支持自定义颜色（通过属性传入）；
2. 添加点击次数统计，父页面记录总点击次数；
3. 多个按钮共用同一个组件，点击不同按钮显示不同消息。