← 返回多端学习对照表

小程序常用组件

小程序开发中“常用组件”通常分两层：微信官方基础组件（底层能力）和第三方 UI 库组件（封装好的业务模块）。实际项目里，大家一般会混合使用。

微信官方基础组件 高频必用

这些是小程序原生提供的“原子级”组件，任何项目都绕不开：

01视图与布局

view基础容器 scroll-view滚动区域 swiper轮播图

02表单交互

button按钮 input输入框 textarea多行输入 picker底部选择器 switch开关 slider滑块 checkbox多选 radio单选

03内容展示

text文本 image图片 icon图标 progress进度条 rich-text富文本

04导航与媒体

navigator页面跳转 video视频 map地图 canvas画布

第三方 UI 库常用组件 业务高频

原生组件偏基础，实际开发中为了效率，大家会直接调用 UI 库封装好的“业务组件”。目前主流的两大选择是 Vant Weapp（有赞）和 TDesign（腾讯）。

Vant Weapp 有赞 50+ 组件

基础与布局5 个

Button按钮 Cell单元格 Icon图标 Popup弹出层 Toast轻提示

表单类6 个

Field输入框 Search搜索 Checkbox复选框 Radio单选框 Stepper步进器 Uploader文件上传

反馈与展示6 个

Dialog弹出框 ActionSheet动作面板 Loading加载 Empty空状态 Skeleton骨架屏 SwipeCell滑动单元格

业务专用4 个

Card商品卡片 SubmitBar提交订单栏 GoodsAction商品导航 Area省市区选择
TDesign 小程序版 腾讯 ≈ 65 组件

基础7 个

Button按钮 Divider分割线 Fab悬浮按钮 Icon图标 Layout栅格 Link链接 Typography排版

导航8 个

BackTop返回顶部 Drawer抽屉 Navbar导航条 SideBar侧边栏 Steps步骤条 TabBar底部标签栏 Tabs选项卡 +1

输入17 个

Calendar日历 Cascader级联选择 DateTimePicker日期选择 Form表单 Input输入框 Picker选择器 Search搜索 Stepper步进器 Upload上传 +8

数据展示与反馈常用

Avatar头像 Badge徽标 Collapse折叠面板 Empty空状态 Skeleton骨架屏 Dialog对话框 Loading加载 Message消息提示 Toast轻提示
选型建议

如果是微信生态内的常规电商或工具类小程序，Vant Weapp 非常成熟且组件够用；如果项目需要跨端（如同时做 H5）或想要更统一的腾讯系设计风格，TDesign 是更好的选择。