微信小程序开发——第四章：小程序的组件与模块化开发
目录
第四章：小程序的组件与模块化开发
4.1 什么是组件
4.2 内置组件分类概览
4.3 内置组件使用示例
（1）布局组件 view
（2）图片组件 image
4.4 自定义组件
（1）创建自定义组件
（2）在页面中使用组件
4.5 组件之间的数据传递
（1）父传子：通过 properties 属性
（2）子传父：使用自定义事件
4.6 模块化开发
（1）创建模块文件
（2）在页面中导入使用
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
<view class="box"><view class="title">水果列表</view><view class="item">苹果</view><view class="item">香蕉</view><view class="item">橙子</view>
</view>
.box {padding: 20rpx;
}
.title {font-size: 32rpx;font-weight: bold;margin-bottom: 20rpx;
}
.item {padding: 10rpx;border-bottom: 1px solid #ccc;
}
（2）图片组件 image
<image src="/images/apple.png" mode="aspectFit"></image>
mode属性用于控制图片显示模式，如aspectFit、aspectFill、widthFix等。
（3）按钮组件 button
<button type="primary" bindtap="onBuy">购买</button>
Page({onBuy() {wx.showToast({title: '购买成功！',icon: 'success'})}
})
4.4 自定义组件
自定义组件允许我们封装独立的逻辑、样式和模板，像使用内置组件一样调用。
（1）创建自定义组件
目录结构示例：
components/└── fruit-card/├── fruit-card.wxml├── fruit-card.wxss├── fruit-card.js└── fruit-card.json
fruit-card.json
{"component": true
}
fruit-card.wxml
<view class="card"><image src="{{img}}" class="fruit-img"></image><text class="fruit-name">{{name}}</text>
</view>
fruit-card.wxss
.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
Component({properties: {name: String,img: String}
})
（2）在页面中使用组件
在页面 json 文件中声明：
{"usingComponents": {"fruit-card": "/components/fruit-card/fruit-card"}
}
在 wxml 中调用：
<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）子传父：使用自定义事件
在子组件中定义事件并触发：
// fruit-card.js
Component({methods: {selectFruit() {this.triggerEvent('choose', { name: this.properties.name })}}
})
在父页面监听事件：
<fruit-card name="苹果" bind:choose="onFruitSelect"></fruit-card>
Page({onFruitSelect(e) {wx.showToast({title: '你选择了 ' + e.detail.name})}
})
4.6 模块化开发
随着项目变大，我们可以使用模块化思想，将公共逻辑提取为 JS 模块：
（1）创建模块文件
// utils/tools.js
function formatTime(date) {return date.getFullYear() + '-' + (date.getMonth()+1)
}
module.exports = {formatTime
}
（2）在页面中导入使用
// index.js
const tools = require('../../utils/tools.js')
Page({onLoad() {console.log('当前时间：', tools.formatTime(new Date()))}
})
4.7 小结
本章我们学习了：
-
内置组件的类型与使用；
-
如何创建自定义组件；
-
父子组件的数据传递；
-
模块化开发思想。
组件的掌握是从“写页面”走向“构建系统”的关键一步。
在接下来的章节中，我们将进一步学习 小程序的API调用与页面跳转逻辑，让我们的应用真正动起来。