常用组件

视图容器

`<view>` - 基础视图容器

相当于 HTML 中的 <div>，是一个万能的块级容器。它没有默认样式，主要用于布局和包裹其他内容。

常用属性：

hover-class：指定按下去的样式类，当点击时会给组件加上对应的样式，模拟点击效果。
hover-stop-propagation：是否阻止本节点的祖先节点出现点击态。
hover-start-time/hover-stay-time：控制点击态出现的延迟和停留时间。

html

<view class="container">
  <view hover-class="view-hover" hover-start-time="50" hover-stay-time="400">
    点击我会变色的View
  </view>
</view>

css

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

`<scroll-view>` - 可滚动视图区域

当内容超出容器高度或宽度时，提供滚动功能。必须指定一个方向。

常用属性：

scroll-y：允许纵向滚动。必须给容器设置一个固定高度。
scroll-x：允许横向滚动。必须给容器设置一个固定宽度。
bindscroll：滚动时触发的事件，可以获取滚动的位置等信息。
scroll-top/scroll-left：设置竖向/横向滚动条位置。

html

<!-- 纵向滚动示例 -->
<scroll-view scroll-y style="height: 300px;" bindscroll="onScroll">
  <view style="height: 800px; background: linear-gradient(to bottom, red, blue);">
    很长很长的内容...
  </view>
</scroll-view>

`<swiper>` 和 `<swiper-item>` - 轮播图容器

滑块视图容器，用于制作轮播图、图片浏览器等。<swiper-item> 只能是 <swiper> 的直接子组件。

常用属性：

indicator-dots：是否显示面板指示点（小圆点）。
autoplay：是否自动切换。
interval：自动切换时间间隔（毫秒）。
duration：滑动动画时长（毫秒）。
circular：是否采用衔接滑动（循环播放）。

html

<swiper indicator-dots autoplay interval="3000" duration="500" circular>
  <swiper-item>
    <view class="swiper-item" style="background-color: red;">A</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item" style="background-color: green;">B</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-item" style="background-color: blue;">C</view>
  </swiper-item>
</swiper>

css

.swiper-item {
  height: 150px; /* 通常需要设置高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

基础内容

`<text>` - 文本

相当于 HTML 中的 <span>，但功能更强大。

核心特性：

长按选中：只有 <text> 组件内的文本才可以被长按选中（通过 user-select 属性开启）。
内嵌元素：支持内嵌 <image>，实现图文混排。
空格解码：通过 decode 属性可以显示 HTML 实体（如  ）。
点击事件：支持 bindtap 事件。

html

<text user-select decode>
  这段文字可以长按选中。 
  这里显示空格：&nbsp;&nbsp;&nbsp; 
  <image src="/images/icon.png" style="width: 20px; height: 20px;"/> 图文混排
</text>

`<rich-text>` - 富文本

用于渲染 HTML 字符串或节点数组。可以将服务器返回的 HTML 内容直接渲染出来。

核心属性：

nodes：要渲染的 HTML 字符串或节点数组。

html

<rich-text nodes="{{htmlContent}}"></rich-text>

javascript

Page({
  data: {
    htmlContent: `
      <h1>这是一个标题</h1>
      <p>这是一个段落，包含一个<strong>加粗</strong>的文字和一个<a href="https://www.example.com">链接</a>。</p>
      <img src="/images/demo.jpg" alt="图片" />
    `
  }
})

表单组件

`<button>` - 按钮

常用属性：

type：按钮样式类型，primary（绿色）、default（白色）、warn（红色）。
size：按钮大小，default、mini。
plain：按钮是否镂空，背景色透明。
disabled：是否禁用。
loading：名称前是否带 loading 图标。
form-type：用于 <form> 组件，可选 submit（提交表单）或 reset（重置表单）。
open-type：微信开放能力，如 getUserInfo（获取用户信息）、share（分享）、contact（客服会话）等，非常重要。

html

<button type="primary" bindtap="onTapPrimary">主要按钮</button>
<button type="default" plain>默认镂空按钮</button>
<button type="warn" disabled>禁用警告按钮</button>
<button open-type="share" data-name="分享内容">分享按钮</button>

`<input>` - 单行输入框

常用属性：

value：输入框的当前内容。
type：输入框类型，text（默认）、number、idcard、digit（带小数点的数字键盘）。
password：是否是密码类型。
placeholder：输入框为空时占位符。
bindinput：键盘输入时触发，event.detail = {value}。
bindfocus/bindblur：输入框聚焦/失去焦点时触发。
maxlength：最大输入长度。

html

<input 
  value="{{inputValue}}" 
  bindinput="onInput" 
  type="number" 
  placeholder="请输入数字"
  maxlength="10"
/>

`<textarea>` - 多行输入框

多行输入框，比 <input> 更适合长文本。

常用属性：与 <input> 类似，还有：

auto-height：是否自动增高，设置时样式 height 不生效。
fixed：如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true。

`<label>` - 标签

用来改进表单组件的可用性。for 属性指向一个组件的 id，点击<label>时，会自动聚焦到对应的组件上。

常用场景：与 checkbox、radio、switch 搭配使用，可以增大点击区域。

html

<label for="male">
  <radio id="male" value="male" checked/> 男
</label>
<label for="female">
  <radio id="female" value="female"/> 女
</label>

`<picker>` - 选择器

从底部弹起的滚动选择器，有多种模式。

模式：

普通选择器 (mode = selector)：从一组数据中选择。
多列选择器 (mode = multiSelector)：多列选择。
时间选择器 (mode = time)：选择时间。
日期选择器 (mode = date)：选择日期。
省市区选择器 (mode = region)：选择省市区。

html

<!-- 普通选择器 -->
<picker 
  range="{{array}}" 
  value="{{index}}" 
  bindchange="onPickerChange"
>
  <view>当前选择：{{array[index]}}</view>
</picker>

<!-- 日期选择器 -->
<picker mode="date" value="{{date}}" bindchange="onDateChange">
  <view>生日：{{date}}</view>
</picker>

`<radio>` 和 `<radio-group>` - 单选项目

<radio-group> 包裹一组 <radio>，bindchange 事件触发在 <radio-group> 上。

html

<radio-group bindchange="onRadioChange">
  <label wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/> {{item.value}}
  </label>
</radio-group>

`<checkbox>` 和 `<checkbox-group>` - 多选项目

与 radio 类似，但可以多选。

html

<checkbox-group bindchange="onCheckboxChange">
  <label wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/> {{item.value}}
  </label>
</checkbox-group>

`<switch>` - 开关选择器

表示两种状态的切换。

常用属性：checked（是否选中）、bindchange（切换时触发）。

html

<switch checked="{{isSwitchOn}}" bindchange="onSwitchChange" />

url：要跳转的页面路径（必须在 app.json 中已定义），以 / 开头。
open-type：跳转方式，默认为 navigate。
- navigate：保留当前页面，跳转到新页面（不能跳转到 tabBar 页面）。
- redirect：关闭当前页面，跳转到新页面（不能跳转到 tabBar 页面）。
- switchTab：跳转到 tabBar 页面，并关闭所有非 tabBar 页面。
- reLaunch：关闭所有页面，打开到应用内的某个页面。
- navigateBack：关闭当前页面，返回上一页面或多级页面。需要通过 delta 属性指定返回的层数。

html

<!-- 普通跳转 -->
<navigator url="/pages/detail/detail?id=1">跳转到详情页</navigator>

<!-- 跳转并关闭当前页 -->
<navigator url="/pages/index/index" open-type="redirect">重定向到首页</navigator>

<!-- 跳转到TabBar页面 -->
<navigator url="/pages/logs/logs" open-type="switchTab">切换到日志页</navigator>

媒体组件

`<image>` - 图片

相当于 HTML 中的 <img>，但有重要区别。

核心特性与属性：

默认尺寸：默认宽度 300px、高度 225px，必须通过 WXSS 设置宽高。
mode：图片裁剪、缩放模式，这是最重要的属性！
- scaleToFill：默认。不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
- aspectFit：常用。保持纵横比缩放图片，使图片的长边能完全显示出来。
- aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。
- widthFix：常用。宽度不变，高度自动变化，保持原图宽高比不变。
lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。
binderror/bindload：当错误发生/图片加载完毕时触发。

html

<!-- 保持原图比例显示完整图片 -->
<image 
  src="{{imageUrl}}" 
  mode="aspectFit" 
  style="width: 300rpx;"
  bindload="onImageLoad"
/>

<!-- 宽度固定，高度自适应 -->
<image 
  src="{{imageUrl}}" 
  mode="widthFix" 
  style="width: 100%;"
/>

`<video>` - 视频

用于播放视频。

常用属性：

src：要播放视频的资源地址。
controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间等）。
danmu-list：弹幕列表。
enable-danmu：是否显示弹幕按钮。
autoplay/loop/muted：自动播放、循环播放、静音播放。
bindplay/bindpause/bindended：播放/暂停/播放到末尾时触发。

html

<video 
  src="http://example.com/demo.mp4" 
  controls 
  danmu-list="{{danmuList}}"
  enable-danmu
  bindplay="onVideoPlay"
  style="width: 100%;"
/>

常用组件

视图容器

`<view>` - 基础视图容器

`<scroll-view>` - 可滚动视图区域

`<swiper>` 和 `<swiper-item>` - 轮播图容器

基础内容

`<text>` - 文本

`<rich-text>` - 富文本

表单组件

`<button>` - 按钮

`<input>` - 单行输入框

`<textarea>` - 多行输入框

`<label>` - 标签

`<picker>` - 选择器

`<radio>` 和 `<radio-group>` - 单选项目

`<checkbox>` 和 `<checkbox-group>` - 多选项目

`<switch>` - 开关选择器

导航

`<navigator>` - 页面链接

媒体组件

`<image>` - 图片

`<video>` - 视频

常用组件 ​

视图容器 ​

<view> - 基础视图容器 ​

<scroll-view> - 可滚动视图区域 ​

<swiper> 和 <swiper-item> - 轮播图容器 ​

基础内容 ​

<text> - 文本 ​

<rich-text> - 富文本 ​

表单组件 ​

<button> - 按钮 ​

<input> - 单行输入框 ​

<textarea> - 多行输入框 ​

<label> - 标签 ​

<picker> - 选择器 ​

<radio> 和 <radio-group> - 单选项目 ​

<checkbox> 和 <checkbox-group> - 多选项目 ​

<switch> - 开关选择器 ​

导航 ​

<navigator> - 页面链接 ​

媒体组件 ​

<image> - 图片 ​

<video> - 视频 ​

常用组件

视图容器

`<view>` - 基础视图容器

`<scroll-view>` - 可滚动视图区域

`<swiper>` 和 `<swiper-item>` - 轮播图容器

基础内容

`<text>` - 文本

`<rich-text>` - 富文本

表单组件

`<button>` - 按钮

`<input>` - 单行输入框

`<textarea>` - 多行输入框

`<label>` - 标签

`<picker>` - 选择器

`<radio>` 和 `<radio-group>` - 单选项目

`<checkbox>` 和 `<checkbox-group>` - 多选项目

`<switch>` - 开关选择器

导航

`<navigator>` - 页面链接

媒体组件

`<image>` - 图片

`<video>` - 视频