微信小程序开发——第四章：小程序的组件与模块化开发

第四章：小程序的组件与模块化开发

[4.1 什么是组件](#4.1 什么是组件)

[4.2 内置组件分类概览](#4.2 内置组件分类概览)

[4.3 内置组件使用示例](#4.3 内置组件使用示例)

[（1）布局组件 view](#（1）布局组件 view)

[（2）图片组件 image](#（2）图片组件 image)

[（3）按钮组件 button](#（3）按钮组件 button)

[4.4 自定义组件](#4.4 自定义组件)

（1）创建自定义组件

（2）在页面中使用组件

[4.5 组件之间的数据传递](#4.5 组件之间的数据传递)

[（1）父传子：通过 properties 属性](#（1）父传子：通过 properties 属性)

（2）子传父：使用自定义事件

[4.6 模块化开发](#4.6 模块化开发)

（1）创建模块文件

（2）在页面中导入使用

[4.7 小结](#4.7 小结)

第四章：小程序的组件与模块化开发

本章将介绍微信小程序中最核心的概念之一------组件（Component） 。

组件是小程序开发中实现页面复用、功能封装、结构分层的重要方式。掌握组件思想，才能真正做到"高内聚、低耦合"的开发模式。

4.1 什么是组件

在微信小程序中，组件是构成页面的基本单位 。

每个 <view>、<button>、<image>、<input> 等都属于官方内置组件。

除此之外，开发者还可以创建自定义组件，以便实现可复用的功能模块。

4.2 内置组件分类概览

微信官方提供了大量内置组件，以下是常用分类：

分类	示例组件	功能描述
视图容器	view、scroll-view、swiper	页面结构与布局
基础内容	text、icon、progress	显示文字、图标、进度条
表单组件	button、input、picker、checkbox、form	用户输入与表单交互
导航组件	navigator	页面跳转
媒体组件	image、video、audio	图片、视频、音频展示
地图组件	map	嵌入地图
画布组件	canvas	自定义绘图
开放能力	open-data、web-view	微信特有功能，如展示用户信息

4.3 内置组件使用示例

（1）布局组件 view

XML 复制代码

<view class="box">
  <view class="title">水果列表</view>
  <view class="item">苹果</view>
  <view class="item">香蕉</view>
  <view class="item">橙子</view>
</view>

css 复制代码

.box {
  padding: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.item {
  padding: 10rpx;
  border-bottom: 1px solid #ccc;
}

（2）图片组件 image

XML 复制代码

<image src="/images/apple.png" mode="aspectFit"></image>

mode 属性用于控制图片显示模式，如 aspectFit、aspectFill、widthFix 等。

（3）按钮组件 button

XML 复制代码

<button type="primary" bindtap="onBuy">购买</button>

javascript 复制代码

Page({
  onBuy() {
    wx.showToast({
      title: '购买成功！',
      icon: 'success'
    })
  }
})

4.4 自定义组件

自定义组件允许我们封装独立的逻辑、样式和模板，像使用内置组件一样调用。

（1）创建自定义组件

目录结构示例：

html 复制代码

components/
 └── fruit-card/
      ├── fruit-card.wxml
      ├── fruit-card.wxss
      ├── fruit-card.js
      └── fruit-card.json

fruit-card.json

html 复制代码

{
  "component": true
}

fruit-card.wxml

XML 复制代码

<view class="card">
  <image src="{{img}}" class="fruit-img"></image>
  <text class="fruit-name">{{name}}</text>
</view>

fruit-card.wxss

css 复制代码

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx;
}
.fruit-img {
  width: 150rpx;
  height: 150rpx;
  border-radius: 12rpx;
}
.fruit-name {
  margin-top: 10rpx;
  font-weight: bold;
}

fruit-card.js

javascript 复制代码

Component({
  properties: {
    name: String,
    img: String
  }
})

（2）在页面中使用组件

在页面 json 文件中声明：

bash 复制代码

{
  "usingComponents": {
    "fruit-card": "/components/fruit-card/fruit-card"
  }
}

在 wxml 中调用：

XML 复制代码

<view class="container">
  <fruit-card name="苹果" img="/images/apple.png"></fruit-card>
  <fruit-card name="香蕉" img="/images/banana.png"></fruit-card>
</view>

4.5 组件之间的数据传递

（1）父传子：通过 `properties` 属性

如上例中，name 和 img 就是父组件传给子组件的数据。

（2）子传父：使用自定义事件

在子组件中定义事件并触发：

javascript 复制代码

// fruit-card.js
Component({
  methods: {
    selectFruit() {
      this.triggerEvent('choose', { name: this.properties.name })
    }
  }
})

在父页面监听事件：

XML 复制代码

<fruit-card name="苹果" bind:choose="onFruitSelect"></fruit-card>

javascript 复制代码

Page({
  onFruitSelect(e) {
    wx.showToast({
      title: '你选择了 ' + e.detail.name
    })
  }
})

4.6 模块化开发

随着项目变大，我们可以使用模块化思想，将公共逻辑提取为 JS 模块：

（1）创建模块文件

javascript 复制代码

// utils/tools.js
function formatTime(date) {
  return date.getFullYear() + '-' + (date.getMonth()+1)
}
module.exports = {
  formatTime
}

（2）在页面中导入使用

javascript 复制代码

// index.js
const tools = require('../../utils/tools.js')
Page({
  onLoad() {
    console.log('当前时间：', tools.formatTime(new Date()))
  }
})

4.7 小结

本章我们学习了：

内置组件的类型与使用；
如何创建自定义组件；
父子组件的数据传递；
模块化开发思想。

组件的掌握是从"写页面"走向"构建系统"的关键一步。

在接下来的章节中，我们将进一步学习 小程序的API调用与页面跳转逻辑，让我们的应用真正动起来。