微信小程序提供了丰富的内置组件库，用于构建页面结构、交互逻辑和样式展示。这些组件在 WXML 中使用，并通过 WXSS 进行样式控制。

以下是常见的微信小程序组件分类及使用示例，最后以表格形式总结其用途和特性。

---

一、基础组件

1. view：视图容器（类似 div）

<!-- index.wxml -->
<view class="container">
  <text>这是一个视图容器</text>
</view>

/* index.wxss */
.container {
  width: 750rpx;
  padding: 20rpx;
  background-color: #f0f0f0;
}

---

2. text：文本显示组件

<!-- index.wxml -->
<text class="title">这是一段文字</text>

.title {
  font-size: 36rpx;
  color: #333;
}

---

3. scroll-view：可滚动视图区域

<!-- index.wxml -->
<scroll-view scroll-x style="width: 100%">
  <view wx:for="{{items}}" wx:key="index" class="item">{{item}}</view>
</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：输入框

<!-- index.wxml -->
<input type="text" placeholder="请输入用户名" bindinput="onInput" value="{{username}}" />
<text>当前输入：{{username}}</text>

Page({
  data: {
    username: ''
  },
  onInput(e) {
    this.setData({ username: e.detail.value });
  }
});

---

5. button：按钮组件

<!-- index.wxml -->
<button type="primary" bindtap="onClick">点击提交</button>

Page({
  onClick() {
    wx.showToast({ title: '提交成功' });
  }
});

---

6. checkbox：复选框

<!-- index.wxml -->
<checkbox-group bindchange="onChange">
  <label wx:for="{{options}}" wx:key="index">
    <checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.label}}
  </label>
</checkbox-group>

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：图片组件

<!-- index.wxml -->
<image src="/images/logo.png" mode="aspectFit" bindtap="previewImage"></image>

Page({
  previewImage() {
    wx.previewImage({
      urls: ['https://example.com/image.jpg']
    });
  }
});

---

8. video：视频播放器

<!-- index.wxml -->
<video src="https://example.com/video.mp4" enable-danmu danmu-btn controls></video>

---

四、导航与布局组件

9. navigator：页面跳转组件

<!-- index.wxml -->
<navigator url="/pages/detail/detail" hover-class="none">跳转到详情页</navigator>

---

10. swiper：滑块视图容器

<!-- index.wxml -->
<swiper indicator-dots autoplay interval="{{3000}}">
  <swiper-item wx:for="{{images}}" wx:key="index">
    <image src="{{item}}"></image>
  </swiper-item>
</swiper>

Page({
  data: {
    images: [
      '/images/banner1.jpg',
      '/images/banner2.jpg',
      '/images/banner3.jpg'
    ]
  }
});

---

五、工具类组件

11. loading：加载状态提示（需自定义实现）

<!-- index.wxml -->
<view wx:if="{{isLoading}}" class="loading">加载中...</view>

Page({
  data: {
    isLoading: true
  }
});

---

12. rich-text：富文本渲染

<!-- index.wxml -->
<rich-text nodes="{{richText}}"></rich-text>

Page({
  data: {
    richText: '<p style="color:red;">这是一段<b>红色加粗</b>的富文本内容。</p>'
  }
});

---

六、组件功能对比总结表

组件名	类型	功能说明	是否支持交互	常用属性/事件
view	容器	基础布局容器	❌	class, style
text	文本	显示文字内容	❌	selectable, space
scroll-view	滚动	可滚动区域	✅	scroll-x/y, bindscroll
input	表单	输入框	✅	type, placeholder, bindinput
button	按钮	触发操作	✅	type, size, disabled, bindtap
checkbox	表单	多选框	✅	checked, value, bindchange
image	媒体	图片展示	✅	src, mode, bindtap
video	媒体	视频播放	✅	src, enable-danmu, danmu-btn
navigator	导航	页面跳转	✅	url, open-type
swiper	布局	轮播图容器	✅	autoplay, interval, current
loading	工具	加载动画（需自定义）	❌	-
rich-text	工具	渲染 HTML 内容	❌	nodes

---

如需了解如何封装自定义组件（如 custom-header, modal-dialog），或如何结合 Component 构造器开发复杂组件，请继续提问！