小程序核心组件详解与实践应用
组件基础结构与常用属性
在微信小程序中，组件是构建用户界面的基本单元。每个组件都遵循类似 HTML 的标签语法：
<标签名 属性名="属性值">内容</标签名>
- id：唯一标识符，确保页面内不重复，通常用于事件绑定或样式定位。
- class：关联 WXSS 样式文件中的类选择器，实现外观定制。
- style：设置内联 CSS 样式，支持动态更新。
- hidden：控制组件是否可见，默认为 false（显示）。
- data-\*：自定义数据属性，在触发事件时可传递给处理函数。
布局容器组件
主要包括 view、scroll-view 和 swiper，用于组织和展示内容区块。
view 组件
作为基础布局容器，支持 Flex 布局。示例如下：
<view style="display: flex; justify-content: center;">
<view style="flex: 1; border: 1px solid red;">区域 1</view>
<view style="flex: 1; border: 1px solid red;">区域 2</view>
<view style="flex: 1; border: 1px solid red;">区域 3</view>
</view>
通过调整 flex-direction 可实现垂直或水平排列，嵌套使用可构建复杂布局。
scroll-view 滚动视图
允许内容超出屏幕时滚动查看，需显式设置高度以启用滚动监听。常见属性包括：
scroll-y：启用纵向滚动bindscrolltolower：滚动到底部触发加载更多bindscrolltoupper：滚动到顶部刷新数据
JavaScript 实现分页加载逻辑：
Page({
data: {
list: [],
page: 0,
loading: false
},
loadNextPage() {
const { page } = this.data;
wx.request({
url: 'https://example.com/api/list',
data: { page: page + 1 },
success: (res) => {
this.setData({
list: [...this.data.list, ...res.data.items],
page: page + 1
});
}
});
},
onScrollToLower() {
this.loadNextPage();
}
});
swiper 轮播图组件
常用于图片轮播、引导页等场景。由 <swiper> 和 <swiper-item> 配合使用：
<swiper autoplay interval="3000" indicator-dots>
<swiper-item><image src="/images/banner1.jpg" mode="widthFix"/></swiper-item>
<swiper-item><image src="/images/banner2.jpg" mode="widthFix"/></swiper-item>
<swiper-item><image src="/images/banner3.jpg" mode="widthFix"/></swiper-item>
</swiper>
关键属性如 autoplay 自动播放、interval 切换间隔、indicator-dots 显示指示点。
基础信息展示组件
icon 图标
内置状态图标，适用于提示成功、警告、等待等情况：
<icon type="success" size="24" color="#09bb07"/>
<icon type="warn" size="24" color="#f89a1c"/>
<icon type="loading" size="24" color="#10aeff"/>
text 文本
行内文本容器，支持长按选中和空格处理：
<text selectable>这段文字可以被选中</text>
<text space="nbsp">保留多个 空格</text>
progress 进度条
显示任务完成进度：
<progress percent="60" show-info stroke-width="6" />
<progress percent="100" activeColor="#4cd964" active />
表单交互组件
button 按钮
提供多种类型增强操作引导性：
<button type="primary">主要操作</button>
<button type="default">普通按钮</button>
<button type="warn" plain>警告按钮（镂空）</button>
<button loading="{{isLoading}}" bindtap="onSubmit">提交</button>
radio 单选框
配合 radio-group 使用，限制一组选项中仅能选择一项：
<radio-group bindchange="onRadioChange">
<label wx:for="{{options}}" class="radio-label">
<radio value="{{item.value}}" /> {{item.name}}
</label>
</radio-group>
checkbox 多选框
使用 checkbox-group 包裹多个选项：
<checkbox-group bindchange="onCheckChange">
<label wx:for="{{cities}}" class="check-label">
<checkbox value="{{item.code}}" /> {{item.name}}
</label>
</checkbox-group>
switch 开关
切换二元状态：
<switch checked color="#09bb07" bindchange="onToggle"/>
slider 滑块
滑动调节数值：
<slider min="0" max="100" value="{{value}}" show-value bindchange="onSlide"/>
picker 选择器
支持多种模式：
- selector：普通列表选择
- multiSelector：多列联动选择（如省市区）
- time/date：时间日期选择
- region：地理位置三级选择
示例 - 时间选择：
<picker mode="time" value="{{time}}" start="09:00" end="18:00" bindchange="onTimeChange">
当前时间：{{time}}
</picker>
input 与 textarea
输入控件，分别用于单行和多行文本输入：
<input placeholder="请输入用户名" bindinput="onInput" maxlength="20"/>
<textarea placeholder="请输入反馈内容" auto-height bindblur="onBlur"/>
label 标签
提升表单可用性，点击 label 可聚焦对应输入项：
<label for="username">用户名：<input id="username"/></label>
form 表单
包裹表单项并统一提交：
<form bindsubmit="onFormSubmit">
<input name="name" />
<radio-group name="gender">...</radio-group>
<button form-type="submit">提交</button>
</form>
多媒体组件
image 图片
支持多种缩放模式：
aspectFit：完整显示图片aspectFill：填充容器，可能裁剪widthFix：宽度固定，高度自适应
<image src="/assets/photo.jpg" mode="widthFix" lazy-load />
audio 音频
音频播放控制：
<audio src="{{audioSrc}}" name="歌曲名称" author="歌手" controls />
通过 JS 控制播放行为：
const audioCtx = wx.createAudioContext('myAudio');
audioCtx.play();
audioCtx.pause();
video 视频
支持本地或网络视频播放：
<video src="{{videoPath}}" controls poster="/images/loading.jpg"/>
camera 相机
调用设备摄像头拍照或录像：
<camera device-position="back" flash="auto" binderror="onCameraError"/>
<button bindtap="takeSnapshot">拍摄</button>
takeSnapshot() {
const ctx = wx.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({ photo: res.tempImagePath });
}
});
}
地图与绘图组件
map 地图
显示地理位置信息：
<map
latitude="{{lat}}"
longitude="{{lng}}"
scale="14"
markers="{{markers}}"
polyline="{{routes}}"
style="width: 100%; height: 300px;"
/>
可在地图上添加标记点和路线路径。
canvas 画布
用于绘制图形图表：
<canvas canvas-id="chartCanvas" style="width: 300px; height: 200px;"/>
onReady() {
const ctx = wx.createCanvasContext('chartCanvas');
ctx.setFillStyle('#369');
ctx.fillRect(20, 20, 150, 100);
ctx.draw();
}
