微信小程序提供了丰富的内置组件库，用于构建页面结构、交互逻辑和样式展示。这些组件在 WXML 中使用，并通过 WXSS 进行样式控制。
以下是常见的微信小程序组件分类及使用示例，最后以表格形式总结其用途和特性。
一、基础组件
1. view：视图容器（类似 div）
/* index.wxss */
.container {
width: 750rpx;
padding: 20rpx;
background-color: #f0f0f0;
}
2. text：文本显示组件
.title {
font-size: 36rpx;
color: #333;
}
3. scroll-view：可滚动视图区域
// index.js
Page({
data: {
items: ['项目1', '项目2', '项目3', '项目4', '项目5']
}
});
.item {
display: inline-block;
width: 200rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
margin-right: 20rpx;
background-color: #ddd;
}
二、表单组件
4. input：输入框
Page({
data: {
username: ''
},
onInput(e) {
this.setData({ username: e.detail.value });
}
});
5. button：按钮组件
Page({
onClick() {
wx.showToast({ title: '提交成功' });
}
});
6. checkbox：复选框
Page({
data: {
options: [
{ label: '选项A', value: 'a', checked: false },
{ label: '选项B', value: 'b', checked: true },
{ label: '选项C', value: 'c', checked: false }
]
},
onChange(e) {
console.log('选中项索引:', e.detail.value);
}
});
三、媒体组件
7. image：图片组件
Page({
previewImage() {
wx.previewImage({
urls: ['https://example.com/image.jpg']
});
}
});
8. video：视频播放器
四、导航与布局组件
9. navigator：页面跳转组件
10. swiper：滑块视图容器
Page({
data: {
images: [
'/images/banner1.jpg',
'/images/banner2.jpg',
'/images/banner3.jpg'
]
}
});
五、工具类组件
11. loading：加载状态提示（需自定义实现）
Page({
data: {
isLoading: true
}
});
12. rich-text：富文本渲染
Page({
data: {
richText: '
这是一段红色加粗的富文本内容。
'}
});
六、组件功能对比总结表
组件名类型功能说明是否支持交互常用属性/事件view容器基础布局容器❌class, styletext文本显示文字内容❌selectable, spacescroll-view滚动可滚动区域✅scroll-x/y, bindscrollinput表单输入框✅type, placeholder, bindinputbutton按钮触发操作✅type, size, disabled, bindtapcheckbox表单多选框✅checked, value, bindchangeimage媒体图片展示✅src, mode, bindtapvideo媒体视频播放✅src, enable-danmu, danmu-btnnavigator导航页面跳转✅url, open-typeswiper布局轮播图容器✅autoplay, interval, currentloading工具加载动画（需自定义）❌-rich-text工具渲染 HTML 内容❌nodes
如需了解如何封装自定义组件（如 custom-header, modal-dialog），或如何结合 Component 构造器开发复杂组件，请继续提问！