微信小程序内置组件速查

1. 基础展示组件

1.1 view 组件

• 作用：基础视图容器，类似于HTML中的div，用于页面布局
• 常用属性：
  • hover-class：指定按下去的样式类
  • hover-start-time：按住后多久出现点击态，默认50ms
  • hover-stay-time：手指松开后点击态保留时间，默认400ms
  • hidden：设置组件是否显示

<!-- 基础用法 -->
<view class="container">
  <view hover-class="hover-style">点击有反馈的view</view>
</view>

.hover-style {
  background-color: #f0f0f0;
}

常见问题：

• view组件是块级元素，默认占据整行宽度
• 不要在view中直接放置文本，应该用text组件包裹

1.2 text 组件

• 作用：展示文本内容，支持长按复制
• 常用属性：
  • selectable：文本是否可选，默认false
  • space：控制空格显示方式，可选值：ensp、emsp、nbsp
  • decode：是否解码HTML实体，默认false

<!-- 基础用法 -->
<text selectable="{{true}}">可选中的文本</text>
<text decode="{{true}}">&lt;strong&gt;转义字符&lt;/strong&gt;</text>
<text space="emsp">中文字符间隔</text>

常见问题：

• text组件内只能嵌套text组件
• 连续空格会被合并，需要用space属性控制
• text不会自动换行，需要手动添加\n或使用多个text

1.3 image 组件

• 作用：显示图片
• 常用属性：
  • src：图片资源地址
  • mode：图片裁剪、缩放模式，有13种模式
  • lazy-load：图片懒加载，默认false
  • binderror：图片加载失败事件
  • bindload：图片加载完成事件

<!-- 基础用法 -->
<image src="/images/logo.png" mode="aspectFit" lazy-load="{{true}}" />

常见问题：

• image组件默认宽度320px、高度240px
• 本地图片路径必须使用相对路径
• 网络图片需配置域名白名单
• 使用mode属性控制图片显示方式，避免变形

1.4 swiper 组件

• 作用：滑块视图容器，常用于轮播图
• 常用属性：
  • indicator-dots：是否显示面板指示点
  • autoplay：是否自动切换
  • interval：自动切换时间间隔
  • circular：是否采用衔接滑动

<!-- 基础用法 -->
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" circular="{{true}}">
  <swiper-item wx:for="{{imgUrls}}" wx:key="index">
    <image src="{{item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

常见问题：

• swiper-item不能直接放置其他组件，需要用view包裹
• 设置swiper高度时，注意不同设备适配问题
• 轮播图图片建议使用相同尺寸，避免显示问题

1.5 rich-text 组件

• 作用：富文本组件，支持HTML字符串渲染
• 常用属性：
  • nodes：HTML节点数组或字符串

<!-- 基础用法 -->
<rich-text nodes="{{htmlContent}}"></rich-text>

Page({
  data: {
    htmlContent: '<div style="color:red;">富文本内容</div>'
  }
})

常见问题：

• rich-text不支持所有HTML标签，只支持部分标签
• 不支持复杂的CSS样式
• 图片可能不会按照预期显示，需要特殊处理

2. 表单组件

2.1 button 组件

• 作用：按钮，可以设置不同样式和类型
• 常用属性：
  • type：按钮样式类型，可选值：primary、default、warn
  • size：按钮大小，可选值：default、mini
  • disabled：是否禁用
  • loading：名称前是否带 loading 图标
  • form-type：用于form组件，可选值：submit、reset
  • open-type：微信开放能力，如获取用户信息、手机号等

<!-- 基础用法 -->
<button type="primary" size="default">主要按钮</button>
<button type="default" size="mini">默认小按钮</button>
<button loading="{{true}}">加载中</button>
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>

常见问题：

• button组件有默认的外边距，需要重置样式时使用CSS
• 使用开放能力时需要在小程序后台配置相应的权限
• button在form中的form-type属性会影响表单提交行为

2.2 input 组件

• 作用：输入框
• 常用属性：
  • value：输入框的初始内容
  • type：input的类型，如text、number、idcard等
  • placeholder：输入框为空时占位符
  • placeholder-style：指定placeholder的样式
  • disabled：是否禁用
  • maxlength：最大输入长度
  • confirm-type：设置键盘右下角按钮的文字
  • bindinput：键盘输入时触发
  • bindconfirm：点击完成时触发

<!-- 基础用法 -->
<input placeholder="请输入用户名" bindinput="onInput" />
<input type="number" placeholder="请输入手机号" maxlength="11" />
<input password placeholder="请输入密码" confirm-type="done" bindconfirm="onConfirm" />

常见问题：

• input的placeholder样式在不同平台可能表现不一致
• 获取input值需要在bindinput事件中使用e.detail.value
• 使用input组件时注意键盘弹起对页面布局的影响
• 某些type类型在iOS和Android上表现不同

2.3 checkbox 组件

• 作用：多选项目
• 常用属性：
  • checked：当前是否选中
  • disabled：是否禁用
  • color：checkbox的颜色
  • value：checkbox标识，选中时触发checkbox-group的change事件

<!-- 基础用法 -->
<checkbox-group bindchange="checkboxChange">
  <label wx:for="{{items}}" wx:key="name">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</checkbox-group>

常见问题：

• checkbox必须与checkbox-group配合使用
• checkbox的change事件返回的是选中的value数组
• 自定义checkbox样式较为困难，建议使用默认样式

2.4 radio 组件

• 作用：单选项目
• 常用属性：
  • checked：当前是否选中
  • disabled：是否禁用
  • color：radio的颜色
  • value：radio标识，选中时触发radio-group的change事件

<!-- 基础用法 -->
<radio-group bindchange="radioChange">
  <label wx:for="{{items}}" wx:key="name">
    <radio value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>

常见问题：

• radio必须与radio-group配合使用
• radio的change事件返回的是选中的value值
• 自定义radio样式较为困难，建议使用默认样式

2.5 switch 组件

• 作用：开关选择器
• 常用属性：
  • checked：是否选中
  • disabled：是否禁用
  • type：开关样式，可选值：switch、checkbox
  • color：switch的颜色
  • bindchange：checked改变时触发

<!-- 基础用法 -->
<switch checked="{{switchChecked}}" bindchange="switchChange" />
<switch type="checkbox" color="#FF0000" />

常见问题：

• switch组件在iOS和Android上样式可能略有差异
• switch的change事件返回的是checked布尔值
• switch组件的宽度固定，无法通过CSS修改

2.6 slider 组件

• 作用：滑动选择器
• 常用属性：
  • min：最小值
  • max：最大值
  • value：当前值
  • step：步长，取值必须大于0
  • disabled：是否禁用
  • color：滑块颜色
  • selected-color：已选择的颜色
  • backgroundColor：背景条颜色
  • bindchange：完成一次拖动后触发
  • bindchanging：拖动过程中触发

<!-- 基础用法 -->
<slider min="0" max="100" value="{{sliderValue}}" bindchange="sliderChange" />
<slider step="10" show-value />

常见问题：

• slider组件的滑块大小无法通过CSS修改
• slider的change事件只发生在滑动结束后
• 使用show-value属性可以显示当前值

2.7 picker 组件

• 作用：从底部弹起的滚动选择器
• 常用属性：
  • mode：选择器类型，可选值：selector、multiSelector、time、date、region
  • range：mode为selector或multiSelector时，range有效
  • range-key：当range是一个Object Array时，通过range-key来指定Object中key的值作为选择器显示内容
  • value：表示选择了range中的第几个
  • bindchange：value改变时触发change事件
  • bindcancel：取消选择或点遮罩层收起picker时触发

<!-- 基础用法 -->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange">
  <view class="picker">当前选择：{{array[index]}}</view>
</picker>

<picker mode="date" value="{{date}}" start="2020-01-01" end="2030-12-31" bindchange="bindDateChange">
  <view class="picker">当前选择: {{date}}</view>
</picker>

常见问题：

• 不同mode的picker使用方式和数据格式不同
• 日期选择器的start和end参数需要特定格式
• picker在iOS和Android上表现可能略有差异

2.8 form 组件

• 作用：表单，将组件内的用户输入的switch、input、checkbox、slider、radio、picker提交
• 常用属性：
  • bindsubmit：携带form中的数据触发submit事件，event.detail = {value : {'name': 'value'} , formId: ''}
  • bindreset：表单重置时会触发reset事件
  • report-submit：是否返回formId用于发送模板消息

<!-- 基础用法 -->
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch" />
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

常见问题：

• 只有button组件的formType为submit时才会触发表单提交
• 表单提交时只会收集带有name属性的表单组件的值
• formId在小程序基础库2.10.0版本后不再返回

3. 导航组件

3.1 navigator 组件

• 作用：页面链接
• 常用属性：
  • url：应用内的跳转链接
  • open-type：跳转方式，可选值：navigate、redirect、switchTab、reLaunch、navigateBack
  • delta：当open-type为’navigateBack’时有效，表示回退的层数
  • hover-class：指定点击时的样式类

<!-- 基础用法 -->
<navigator url="/pages/logs/logs" hover-class="navigator-hover">跳转到日志页面</navigator>
<navigator open-type="switchTab" url="/pages/index/index">切换到首页</navigator>
<navigator open-type="redirect" url="/pages/logs/logs">跳转到日志页面(不返回)</navigator>

常见问题：

• 跳转到tabBar页面必须使用switchTab方式
• navigate方式会保留当前页面历史
• url参数需要正确编码，避免特殊字符导致的问题

4. 媒体组件

4.1 audio 组件

• 作用：音频
• 常用属性：
  • src：要播放音频的资源地址
  • controls：是否显示默认控件
  • loop：是否循环播放
  • autoplay：是否自动播放
  • bindplay：当开始/继续播放时触发play事件
  • bindpause：当暂停播放时触发pause事件

<!-- 基础用法 -->
<audio src="{{audioSrc}}" controls="{{true}}" loop="{{true}}" bindplay="onAudioPlay" />

常见问题：

• 微信小程序不支持自动播放音频，需要用户手动触发
• iOS系统下音频播放可能有延迟
• 音频资源需要配置域名白名单

4.2 video 组件

• 作用：视频
• 常用属性：
  • src：要播放视频的资源地址
  • controls：是否显示默认播放控件
  • autoplay：是否自动播放
  • loop：是否循环播放
  • muted：是否静音播放
  • initial-time：指定视频初始播放位置
  • duration：指定视频时长
  • bindplay：当开始/继续播放时触发play事件
  • bindpause：当暂停播放时触发pause事件
  • bindended：当播放到末尾时触发ended事件

<!-- 基础用法 -->
<video src="{{videoSrc}}" controls="{{true}}" autoplay="{{false}}" bindplay="onVideoPlay" />

常见问题：

• 视频组件在小程序中有最小尺寸限制
• 视频资源需要配置域名白名单
• 视频播放会占用较多系统资源，避免同时播放多个视频

5. 地图组件

5.1 map 组件

• 作用：地图
• 常用属性：
  • longitude：中心经度
  • latitude：中心纬度
  • scale：缩放级别，取值范围为3-20
  • markers：标记点
  • polyline：路线
  • circles：圆
  • include-points：缩放视野以包含所有给定的坐标点
  • bindmarkertap：点击标记点时触发
  • bindregionchange：视野发生变化时触发

<!-- 基础用法 -->
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" bindmarkertap="onMarkerTap" />

Page({
  data: {
    longitude: 113.324520,
    latitude: 23.099994,
    scale: 14,
    markers: [{
      id: 0,
      longitude: 113.324520,
      latitude: 23.099994,
      iconPath: '/images/marker.png'
    }]
  },
  onMarkerTap(e) {
    console.log('标记点被点击', e.markerId)
  }
})

常见问题：

• 使用地图组件需要申请相关权限
• 地图组件会消耗较多资源，不建议在一个页面中放置多个地图
• 自定义标记点图标有大小限制

6. 画布组件

6.1 canvas 组件

• 作用：画布
• 常用属性：
  • canvas-id：canvas组件的唯一标识符
  • disable-scroll：当在canvas中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
  • bindtouchstart：手指触摸动作开始
  • bindtouchmove：手指触摸后移动
  • bindtouchend：手指触摸动作结束
  • bindtouchcancel：手指触摸动作被打断

<!-- 基础用法 -->
<canvas canvas-id="myCanvas" disable-scroll="{{true}}" bindtouchstart="onTouchStart" />

Page({
  onReady: function() {
    // 使用wx.createContext获取绘图上下文
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setStrokeStyle('#00ff00')
    ctx.setLineWidth(5)
    ctx.rect(0, 0, 200, 200)
    ctx.stroke()
    ctx.draw()
  }
})

常见问题：

• canvas组件在自定义组件中使用时需要特殊处理
• canvas绘制是异步的，需要在draw回调中处理后续操作
• canvas组件在不同平台上的表现可能略有差异

7. 总结

微信小程序提供了丰富的内置组件，覆盖了常见的UI需求。在使用这些组件时，需要注意以下几点：

1. 组件属性的使用：仔细阅读官方文档，正确使用组件属性
2. 平台差异：注意iOS和Android平台上的差异表现
3. 样式限制：某些组件的样式可能无法完全自定义
4. 性能考虑：合理使用媒体组件和地图组件，避免性能问题
5. 权限配置：使用某些组件需要在小程序后台配置相应权限

掌握这些内置组件的使用方法和常见问题，对于微信小程序开发至关重要，也是面试中的常见考点。