微信小程序核心控件元素信息表

OpenTK 2026-01-16 09:15:22
控件名称（标签）核心属性列表（含特有属性）各属性取值及含义（精准说明）属性作用及使用示例（分属性详细说明）备注（适用场景、兼容性、注意事项）
ad（广告组件）1. 基础属性：class、id、style、hidden、data-*、bindload、binderror、bindclose2. 特有属性：unit-id、type、ad-intervals1. unit-id：string类型，广告单元ID（从小程序后台广告管理中获取），必填；2. type：string类型，广告类型，可选"banner"（Banner广告）、"interstitial"（插屏广告）、"rewarded-video"（激励视频广告）等，默认"banner"；3. ad-intervals：number类型，Banner广告自动刷新间隔，单位s，范围30-120，默认60；4. bindload：广告加载成功时触发的事件；5. binderror：广告加载失败时触发的事件（返回错误码和错误信息）；6. bindclose：广告关闭时触发的事件（仅插屏、激励视频等可关闭的广告有效）。1. 广告展示场景：作用：用于在小程序内展示微信广告（如Banner广告、插屏广告、激励视频广告），实现流量变现；示例（WXML代码）：<!-- Banner广告（底部展示） --> <ad class="banner-ad" unit-id="adunit-1234567890abcdef" type="banner" ad-intervals="60" bindload="handleAdLoad" binderror="handleAdError"/> <!-- 插屏广告触发按钮（点击后展示） --> <button bindtap="showInterstitialAd" class="ad-btn">展示插屏广告</button> <!-- 激励视频广告触发按钮（点击后展示） --> <button bindtap="showRewardedVideoAd" class="ad-btn">观看激励视频获取奖励</button> <!-- WXSS样式 --> .banner-ad { width: 100%; height: 120rpx; position: fixed; bottom: 0; left: 0; } .ad-btn { margin: 20rpx; height: 80rpx; line-height: 80rpx; font-size: 32rpx; } <!-- JS逻辑示例（插屏和激励视频广告） --> // Page({ // data: { // interstitialAd: null, // rewardedVideoAd: null // }, // onLoad() { // // 初始化插屏广告 // if (wx.createInterstitialAd) { // this.data.interstitialAd = wx.createInterstitialAd({ // adUnitId: 'adunit-0987654321fedcba' // }) // this.data.interstitialAd.onLoad(() => {}) // this.data.interstitialAd.onError(err => {console.log('插屏广告加载失败', err)}) // } // // 初始化激励视频广告 // if (wx.createRewardedVideoAd) { // this.data.rewardedVideoAd = wx.createRewardedVideoAd({ // adUnitId: 'adunit-abcdef0123456789' // }) // this.data.rewardedVideoAd.onLoad(() => {}) // this.data.rewardedVideoAd.onError(err => {console.log('激励视频广告加载失败', err)}) // this.data.rewardedVideoAd.onClose(res => { // if (res && res.isEnded) { // console.log('观看完成，发放奖励') // // 发放奖励逻辑 // } else { // console.log('未观看完成，不发放奖励') // } // }) // } // }, // showInterstitialAd() { // if (this.data.interstitialAd) { // this.data.interstitialAd.show().catch(err => { // this.data.interstitialAd.load().then(() => { // this.data.interstitialAd.show() // }) // }) // } // }, // showRewardedVideoAd() { // if (this.data.rewardedVideoAd) { // this.data.rewardedVideoAd.show() // } // }, // handleAdLoad() { // console.log('Banner广告加载成功') // }, // handleAdError(err) { // console.log('Banner广告加载失败', err) // } // })说明：Banner广告固定在页面底部，自动刷新间隔60秒；插屏广告和激励视频广告通过按钮触发展示，在JS中初始化广告实例，监听加载、错误和关闭事件，激励视频广告在用户观看完成后发放奖励。1. 适用场景：小程序流量变现（Banner广告嵌入页面、插屏广告弹窗展示、激励视频广告兑换奖励）；2. 兼容性：基础库2.1.0及以上版本支持，不同广告类型兼容性略有差异；3. 注意事项：- 必须先在小程序后台“广告管理”中创建广告单元，获取正确的unit-id，否则广告无法加载；- 广告类型需与unit-id对应的广告单元类型一致（如Banner广告unit-id对应type="banner"）；- Banner广告需设置固定的width和height，建议宽度为100%，高度根据广告规格设置（通常120rpx左右）；- 插屏广告和激励视频广告建议在页面加载时初始化，提前加载广告资源，提升展示速度；- 激励视频广告的奖励发放需在onClose事件中判断用户是否观看完成（res.isEnded），避免未观看完成也发放奖励；- 广告加载失败时（binderror），需处理错误逻辑（如隐藏广告位、提示用户）；- 广告展示需符合微信小程序广告规范，避免过度展示、遮挡核心内容，否则可能被处罚；- 部分广告类型（如激励视频）有一定的展示条件（如用户活跃度、小程序等级），需提前了解相关规则。
ad-custom（自定义广告组件）class、id、style、hidden1. ad-unit-id：string类型，广告单元ID，必填；<br>2. ad-intervals：number类型，广告刷新间隔（秒），默认30；<br>3. bindload：广告加载成功触发；<br>4. binderror：广告加载失败触发，返回错误码作用：展示自定义样式的广告（如信息流广告、插屏广告），适配页面布局<br>示例（WXML）：<br><ad-custom class="ad-custom" ad-unit-id="adunit-1234567890abcdef" ad-intervals="60" binderror="handleAdError"></ad-custom><br>WXSS：<br>.ad-custom { width: 100%; margin: 20rpx 0; border-radius: 10rpx; }适用场景：信息流页面广告、内容页底部广告、个人中心广告等；<br>兼容性：基础库2.10.0及以上支持；<br>注意事项：1. ad-unit-id需在微信广告后台申请；2. 广告刷新间隔需≥30秒；3. 加载失败时需隐藏组件或展示兜底内容
address-picker（地址选择器控件）class、id、style、hidden、disabled1. model-value：array类型，绑定的选中地址值，格式为[省编码, 市编码, 区编码]，支持双向绑定，必填；2. level：string类型，地址选择层级，可选"province"/"city"/"district"，默认"district"（省市区三级）；3. placeholder：string类型，未选择时占位提示，默认"请选择地址"；4. show-detail：boolean类型，是否显示详细地址输入框，默认false；5. detail-placeholder：string类型，详细地址占位提示，默认"请输入详细地址"；6. bindchange：地址选中变化时触发事件，回调含fullValue（编码数组）和fullLabel（名称数组）；7. bindconfirm：确认选择地址时触发事件作用：集成省市区三级地址选择功能，支持地址层级控制和详细地址输入，无需手动维护地址数据源，简化地址选择开发流程示例（WXML）：<address-picker class="address-picker" model-value="{{selectedAddress}}" level="district" show-detail detail-placeholder="请输入街道、门牌号等" bindconfirm="onAddressConfirm"><address-picker>JS：Page({ data: { selectedAddress: ["110000", "110100", "110101"] // 默认选中北京市东城区 }, onAddressConfirm(e) { console.log("完整地址编码：", e.detail.fullValue); console.log("完整地址名称：", e.detail.fullLabel.join("-")); console.log("详细地址：", e.detail.detail); }})WXSS：.address-picker { width: 100%; padding: 20rpx 0;}.address-picker .detail-input { margin-top: 16rpx; padding: 16rpx 20rpx; border: 1rpx solid #e5e5e5; border-radius: 8rpx;}适用场景：收货地址填写、用户所在地选择、商家地址登记、表单地址信息采集等场景；兼容性：基础库2.23.0及以上支持；注意事项：1. 地址数据源为内置标准省市区数据，无需额外引入；2. 选择层级level根据业务需求设置，如仅需选择省份则设为"province"；3. 开启show-detail后，需在事件回调中获取detail字段（详细地址）；4. 绑定的model-value需与选择层级匹配，三级选择传3位数组，二级传2位，一级传1位；5. 禁用状态下，地址选择和详细地址输入均不可操作
amount-input（金额输入控件）class、id、style、hidden、disabled、placeholder1. model-value：number类型，绑定的金额值，支持双向绑定，必填；2. currency-symbol：string类型，货币符号，默认"¥"，可设为"$"、"€"等；3. decimal-length：number类型，保留小数位数，默认2，仅支持0-2；4. min：number类型，最小金额，默认0；5. max：number类型，最大金额，默认Infinity；6. show-limit：boolean类型，是否显示金额范围提示，默认false；7. bindinput：金额输入过程中触发事件；8. bindconfirm：点击确认按钮（键盘回车）触发事件；9. bindblur：输入框失焦时触发事件作用：专门用于金额输入场景，自动处理货币符号显示、小数位数限制、金额范围校验，避免手动处理金额格式问题示例（WXML）：<amount-input class="amount-input" model-value="{{payAmount}}" currency-symbol="¥" decimal-length="2" min="0.01" max="10000" show-limit placeholder="请输入支付金额" bindblur="onAmountBlur"><amount-input>JS：Page({ data: { payAmount: 0 }, onAmountBlur(e) { const amount = e.detail.value; if (amount < 0.01 || amount > 10000) { wx.showToast({ title: "金额需在0.01-10000元之间", icon: "none" }); } }})WXSS：.amount-input { width: 100%; padding: 16rpx 20rpx; border: 1rpx solid #e5e5e5; border-radius: 8rpx; box-sizing: border-box;}.amount-input .symbol { color: #f00; font-weight: bold;}适用场景：支付金额输入、充值金额设置、订单金额填写、退款金额输入等涉及金额的表单场景；兼容性：基础库2.19.0及以上支持；注意事项：1. 小数位数decimal-length仅支持0-2，符合常见货币格式规范；2. 金额值会自动过滤非数字字符，仅保留数字和小数点；3. 开启show-limit后，会在输入框下方显示"金额范围：min-max货币符号"的提示；4. 最小金额min建议设为0.01（分），避免输入0金额；5. 失焦时会自动对金额进行四舍五入处理，确保小数位数正确
audio（音频播放控件）1. 基础属性：class、id、style、hidden、data-*、bindplay、bindpause、bindended、bindtimeupdate2. 特有属性：src、loop、controls、poster、name、author、initial-time、duration1. src：string类型，音频资源路径（本地/网络/云存储），必填；2. loop：boolean类型，是否循环播放，默认false；3. controls：boolean类型，是否显示默认播放控件（播放/暂停、进度条、时长等），默认true；4. poster：string类型，音频封面图片路径；5. name：string类型，音频名称（显示在控件上）；6. author：string类型，音频作者（显示在控件上）；7. initial-time：number类型，初始播放位置，单位s，默认0；8. duration：number类型，音频总时长，单位s（自动获取，可手动指定）。1. 音频播放场景：作用：用于在小程序内播放音频文件（如音乐、有声读物、语音消息），支持默认控件和自定义控件，提供完整的播放事件监听；示例（WXML代码）：<!-- 带封面和信息的音频播放控件 --> <audio class="audio-player" src="https://example.com/audio/music.mp3" loop="{{false}}" controls="{{true}}" poster="https://example.com/audio/poster.jpg" name="小幸运" author="田馥甄" initial-time="10" bindplay="handleAudioPlay" bindpause="handleAudioPause" bindended="handleAudioEnded" bindtimeupdate="handleAudioTimeUpdate"></audio> <!-- 隐藏默认控件，自定义播放控制 --> <view class="custom-audio"> <image src="{{audioPoster}}" class="audio-poster"/> <view class="audio-info"> <text class="audio-name">{{audioName}}</text> <text class="audio-author">{{audioAuthor}}</text> <view class="audio-progress"> <text>{{currentTime}}/{{totalTime}}</text> <slider value="{{progress}}" bindchange="handleAudioSeek"/> </view> </view> <button bindtap="handleCustomPlayPause">{{isPlaying ? '暂停' : '播放'}}</button> </audio> <!-- WXSS样式 --> .audio-player { width: 100%; margin: 20rpx 0; } .custom-audio { display: flex; align-items: center; padding: 20rpx; border: 1rpx solid #eee; border-radius: 10rpx; } .audio-poster { width: 120rpx; height: 120rpx; border-radius: 10rpx; } .audio-info { flex: 1; margin: 0 20rpx; } .audio-name { font-size: 32rpx; color: #333; } .audio-author { font-size: 28rpx; color: #666; margin: 5rpx 0; display: block; } .audio-progress { margin-top: 10rpx; }说明：第一个audio使用默认控件，展示封面、音频名称和作者，初始播放位置从10秒开始，监听播放、暂停、结束和进度更新事件；第二个隐藏默认控件，通过自定义按钮、滑块实现播放控制，更灵活适配页面风格。1. 适用场景：音乐播放、有声读物、语音消息播放、音频教程；2. 兼容性：全基础库版本支持；3. 注意事项：- 网络音频资源需配置小程序后台的“合法域名”，否则无法播放；- controls=true时显示默认控件，包含播放/暂停、进度条、音量调节等功能，无需额外开发；- 自定义控件需设置controls=false，通过wx.createAudioContext或wx.createInnerAudioContext API控制播放逻辑；- 音频播放事件（play/pause/ended等）可用于同步页面状态（如播放按钮文本切换、进度条更新）；- 后台播放需在app.json中配置"requiredBackgroundModes": ["audio"]，并通过InnerAudioContext实现；- 避免在scroll-view内使用audio，可能出现控件显示或交互异常。
audio-list（音频列表控件）class、id、style、hidden1. list：array类型，音频列表数据，必填，格式为[{src: '音频地址', title: '标题', author: '作者', cover: '封面图'}]；2. current-index：number类型，当前播放音频索引，默认-1；3. auto-play：boolean类型，是否自动播放下一首，默认false；4. show-progress：boolean类型，是否显示进度条，默认true；5. show-duration：boolean类型，是否显示时长，默认true；6. bindplay：音频播放触发事件；7. bindpause：音频暂停触发事件；8. bindended：音频播放结束触发事件；9. bindchange：播放音频切换触发事件作用：实现音频列表展示和播放管理，支持单个音频控制和切换，适用于多音频展示场景示例（WXML）：<audio-list class="audio-list" list="{{audioList}}" current-index="{{currentIndex}}" auto-play show-progress bindchange="onAudioChange"><audio-list>JS：Page({ data: { currentIndex: -1, audioList: [ { src: "https:/example.com/audio/1.mp3", title: "清晨", author: "轻音乐", cover: "https://example.com/cover/1.jpg" }, { src: "https://example.com/audio/2.mp3", title: "星空", author: "轻音乐", cover: "https:/example.com/cover/2.jpg" } ] }, onAudioChange(e) { console.log("当前播放索引：", e.detail.currentIndex); }})WXSS：.audio-list { width: 100%; padding: 20rpx; box-sizing: border-box;}.audio-list .audio-item { display: flex; align-items: center; padding: 16rpx 0; border-bottom: 1rpx solid #eee;}适用场景：有声书列表、音乐列表、语音课程列表、播客列表等；兼容性：基础库2.17.0及以上支持；注意事项：1. 音频地址src需符合小程序安全域名规范，支持HTTPS；2. 封面图cover建议尺寸统一，提升页面美观度；3. 自动播放auto-play仅在当前音频播放结束后生效；4. 点击列表项会切换到对应音频并播放；5. 可通过current-index控制初始播放音频，-1表示默认不播放
audio-player（音频播放器控件）class、id、style、hidden1. src：string类型，音频资源地址，必填；2. title：string类型，音频标题，可选；3. author：string类型，音频作者，可选；4. cover：string类型，音频封面图地址，可选；5. autoplay：boolean类型，是否自动播放，默认false；6. loop：boolean类型，是否循环播放，默认false；7. show-progress：boolean类型，是否显示进度条，默认true；8. show-duration：boolean类型，是否显示时长，默认true；9. bindplay：播放触发事件；10. bindpause：暂停触发事件；11. bindended：播放结束触发事件；12. bindtimeupdate：播放进度更新触发事件作用：增强版音频播放控件，集成标题、作者、封面、进度条等功能，替代原生audio控件，提升用户体验示例（WXML）：<audio-player class="audio-player" src="{{audioSrc}}" title="童年" author="罗大佑" cover="{{audioCover}}" show-progress show-duration bindplay="onAudioPlay" bindpause="onAudioPause"></audio-player>JS：data: { audioSrc: "https:/example.com/audio/childhood.mp3", audioCover: "https:/example.com/cover/childhood.jpg"},onAudioPlay() { console.log("音频开始播放"); },onAudioPause() { console.log("音频暂停播放"); }WXSS：.audio-player { width: 100%; padding: 20rpx; background-color: #f5f5f5; border-radius: 10rpx; }适用场景：有声书播放、音乐播放器、语音消息播放、课程音频播放等；兼容性：基础库2.17.0及以上支持；注意事项：1. 音频资源地址需符合小程序安全域名规范，支持HTTPS；2. 自动播放autoplay需用户交互后触发（如点击按钮后设置为true），否则可能被浏览器拦截；3. 封面图建议尺寸统一（如100rpx×100rpx），提升美观度；4. 可通过bindtimeupdate事件实时获取播放进度，实现自定义进度展示；5. 支持的音频格式与原生audio控件一致，如mp3、wav、aac等
avatar（头像控件）class、id、style、hidden1. src：string类型，头像图片地址，必填；<br>2. size：number类型，头像尺寸，默认80rpx；<br>3. shape：string类型，头像形状，可选"circle"/"square"，默认"circle"；<br>4. fallback：string类型，加载失败兜底图地址，可选；<br>5. border：boolean类型，是否显示边框，默认false；<br>6. binderror：头像加载失败触发事件作用：标准化头像展示，集成圆形/方形、兜底图、边框等功能，避免重复编写样式<br>示例（WXML）：<br><avatar class="avatar" src="{{userAvatar}}" size="100rpx" shape="circle" fallback="https://example.com/default-avatar.png"></avatar><br>WXSS：<br>.avatar { margin: 10rpx; }适用场景：用户头像、评论者头像、商家头像、列表项左侧头像等；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. size为正方形尺寸，圆形头像自动按尺寸裁剪；2. 兜底图建议为纯色简约样式，提升体验；3. 头像地址需符合小程序安全域名规范，避免加载失败；4. 边框样式可通过WXSS自定义，覆盖默认属性
badge（徽章控件）class、id、style、hidden1. count：number/string类型，徽章数字，必填；2. maxCount：number类型，最大显示数字，默认99；3. type：string类型，徽章样式，可选"primary""success"/"warning"/"danger"/"info"，默认"danger"；4. dot：boolean类型，是否显示红点（不显示数字），默认false；5. bindtap：点击徽章触发事件作用：展示未读消息数、提醒标识，用于消息通知、待办提示等示例（WXML）：<view class="badge-container"> <icon type="notification" size="40rpx"/> <badge class="badge" count="{{unreadCount}}" maxCount="99" type="danger"></badge><view>JS：data: { unreadCount: 12 }WXSS：.badge-container { position: relative; padding: 20rpx; }.badge { position: absolute; top: 10rpx; right: 10rpx; }适用场景：消息中心未读提示、购物车商品数量、待办事项提醒、通知标识等；兼容性：基础库1.9.0及以上支持；注意事项：1. count为0时建议隐藏徽章；2. dot为true时，count失效，仅显示红点；3. 建议结合相对定位使用，避免遮挡其他元素
badge-count（数字徽章控件）class、id、style、hidden1. count：number类型，徽章显示的数字，必填；2. max-count：number类型，最大显示数字，超过则显示"max-count+"，默认99；3. size：string类型，徽章尺寸，可选"small"/"middle"/"large"，默认"middle"；4. color：string类型，徽章背景色，默认#f00；5. text-color：string类型，徽章文字颜色，默认#fff；6. position：string类型，相对于父元素的位置，可选"top-left"/"top-right"/"bottom-left"/"bottom-right"，默认"top-right"；7. offset：array类型，位置偏移量，格式为[水平偏移, 垂直偏移]，单位rpx，默认[0, 0]；8. bindtap：点击徽章触发事件作用：用于显示数字提示，如未读消息数、未处理事项数等，支持位置调整和溢出数字处理，提升提示清晰度示例（WXML）：<view class="icon-container"> <icon type="message" size="40rpx" color="#333"> <badge-count class="msg-badge" count="{{unreadCount}}" max-count="99" size="small" position="top-right" offset="[10rpx, -10rpx]" ><view>JS：Page({ data: { unreadCount: 126 / 超过max-count，显示"99+" }})WXSS：.icon-container { position: relative; padding: 20rpx;}.msg-badge { position: absolute; border-radius: 50%; padding: 0 8rpx; line-height: 24rpx; font-size: 20rpx;}适用场景：消息中心未读提示、购物车商品数量、订单待处理数、通知未读数等数字提示场景；兼容性：基础库2.16.0及以上支持；注意事项：1. count为0时，徽章默认隐藏，无需手动控制hidden属性；2. max-count建议设置为99或999，符合用户认知习惯；3. 父元素需设置position: relative，否则徽章位置偏移会异常；4. 偏移量offset需根据父元素尺寸调整，确保徽章不遮挡核心内容；5. 徽章尺寸不宜过大，避免影响页面美观
badge-dot（红点徽章控件）class、id、style、hidden1. show：boolean类型，是否显示红点，默认false；2. size：number类型，红点尺寸，默认16rpx；3. color：string类型，红点颜色，默认#f00；4. position：string类型，红点位置，可选"top-left"/"top-right"/"bottom-left"/"bottom-right"，默认"top-right"；5. offset：array类型，红点偏移量，默认[0,0]，格式[水平偏移, 垂直偏移]；6. bindtap：点击红点触发事件作用：专门用于展示红点提醒，支持位置调整和偏移量设置，替代自定义红点样式示例（WXML）：<view class="icon-container"> <icon type="notification" size="40rpx"/> <badge-dot class="badge-dot" show="{{hasUnread}}" size="16rpx" position="top-right" offset="[10rpx,-10rpx]"></badge-dot><view>JS：data: { hasUnread: true }WXSS：.icon-container { position: relative; padding: 20rpx; }.badge-dot { position: absolute; border-radius: 50%; }适用场景：未读消息提醒、新功能提示、待办事项红点、更新提醒等；兼容性：基础库2.16.0及以上支持；注意事项：1. 红点尺寸建议12rpx-20rpx，过大影响页面美观；2. 位置和偏移量需根据父元素大小和位置合理设置，确保红点不遮挡核心内容；3. 仅需要提示存在未读信息，不需要显示具体数量时使用，需要显示数量建议用badge控件；4. 可通过show属性动态控制红点的显示和隐藏
button（按钮控件）1. 基础属性：class、id、style、hidden、data-*、bindtap、catchtap2. 特有属性：type、size、plain、disabled、loading、form-type、open-type1. type：string类型，按钮样式类型，可选值"primary"（绿色主按钮）、"default"（灰色默认按钮）、"warn"（红色警告按钮），默认"default"；2. size：string类型，按钮大小，可选值"mini"（小尺寸）、"default"（默认尺寸），默认"default"；3. plain：boolean类型，是否为镂空按钮，默认false；4. disabled：boolean类型，是否禁用按钮，默认false；5. loading：boolean类型，是否显示加载状态，默认false；6. form-type：string类型，表单提交相关，可选值"submit"（提交表单）、"reset"（重置表单），仅在form内有效；7. open-type：string类型，开放能力，如"getUserInfo"（获取用户信息）、"getPhoneNumber"（获取手机号）等。1. 交互按钮场景：作用：用于触发用户交互操作（如提交表单、跳转页面、调用开放能力），支持多种样式和状态切换；示例（WXML代码）：<!-- 不同类型和状态的按钮 --> <button class="primary-btn" type="primary" bindtap="handleSubmit"> 主按钮（提交） </button> <button class="warn-btn" type="warn" plain="{{true}}" size="mini"> 镂空警告小按钮 </button> <button class="disabled-btn" disabled="{{true}}"> 禁用按钮 </button> <button class="loading-btn" loading="{{true}}" loading-color="#fff"> 加载中按钮 </button> <!-- 调用开放能力的按钮 --> <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo"> 获取用户信息 </button> <!-- WXSS样式 --> .primary-btn, .disabled-btn, .loading-btn { margin: 10rpx 0; height: 80rpx; line-height: 80rpx; font-size: 32rpx; } .warn-btn { margin: 10rpx; }说明：展示了主按钮、镂空警告小按钮、禁用按钮、加载中按钮等多种样式，以及调用获取用户信息开放能力的按钮，覆盖常见的按钮使用场景。1. 适用场景：表单提交/重置、页面跳转触发、调用微信开放能力（获取用户信息、手机号等）、操作确认/取消；2. 兼容性：open-type部分取值需特定基础库版本（如getPhoneNumber需基础库2.21.2及以上）；3. 注意事项：- 按钮默认有微信原生样式，自定义样式时需注意优先级，可通过::after伪元素修改按钮内部图标；- loading状态下，按钮会自动禁用，无需额外设置disabled；- open-type对应的开放能力需在小程序后台配置相关权限（如获取手机号需完成主体认证）；- form-type属性仅在button嵌套在form控件内时生效。
calendar（日历控件）class、id、style、hidden1. value：string类型，选中日期，格式"YYYY-MM-DD"，默认当前日期；<br>2. range：boolean类型，是否范围选择，默认false；<br>3. min-date：string类型，最小可选日期，默认"1970-01-01"；<br>4. max-date：string类型，最大可选日期，默认"2100-12-31"；<br>5. bindselect：日期选择触发事件；<br>6. bindmonthchange：月份切换触发事件作用：实现日期选择功能，支持单日/范围选择，替代picker日期选择器<br>示例（WXML）：<br><calendar class="calendar" value="{{selectedDate}}" range="false" min-date="2024-01-01" bindselect="onCalendarSelect"></calendar><br>JS：<br>onCalendarSelect(e) {<br> this.setData({ selectedDate: e.detail.value });<br> wx.showToast({ title: 选中日期：${e.detail.value} });<br>}<br>WXSS：<br>.calendar { width: 100%; padding: 10rpx; }适用场景：日期选择、预约时间、行程规划、订单日期筛选等；<br>兼容性：基础库2.25.0及以上支持；<br>注意事项：1. range为true时，value为数组["开始日期","结束日期"]；2. 需注意日期格式为"YYYY-MM-DD"；3. 可自定义日历样式（如选中日期颜色）
camera（相机控件）class、id、style、hidden1. mode：string类型，相机模式，可选"normal"（普通）、"scanCode"（扫码），默认"normal"；<br>2. device-position：string类型，摄像头方向，可选"front"（前置）、"back"（后置），默认"back"；<br>3. flash：string类型，闪光灯，可选"auto"（自动）、"on"（开启）、"off"（关闭），默认"off"；<br>4. bindstop：相机启动失败时触发；<br>5. bindscancode：扫码模式下识别到二维码/条形码时触发作用：调用手机摄像头，支持拍照、扫码功能，无需跳转外部页面<br>示例（WXML）：<br><camera class="camera" mode="normal" device-position="back" flash="auto" bindstop="handleCameraStop"></camera><br><button bindtap="takePhoto">拍照</button><br>JS（核心方法）：<br>takePhoto() {<br> const ctx = wx.createCameraContext();<br> ctx.takePhoto({<br> quality: 'high',<br> success: (res) => { console.log('照片路径', res.tempImagePath) }<br> })<br>}<br>WXSS：<br>.camera { width: 100%; height: 600rpx; background: #000; }适用场景：扫码登录、拍照上传（如身份证、商品照片）、实时扫码核销等；<br>兼容性：基础库1.6.0及以上支持；<br>注意事项：1. 需要在app.json中配置"permission"：{"scope.camera": {"desc": "用于拍照/扫码"}}；2. 部分机型可能不支持扫码模式；3. 拍照后返回临时路径，需及时上传服务器或保存；4. 需适配不同手机屏幕比例，避免拉伸
canvas（画布控件）class、id、style、hidden1. type：string类型，画布类型，可选"2d"/"webgl"，默认"2d"；<br>2. disable-scroll：boolean类型，是否禁止画布滚动，默认false；<br>3. bindtouchstart/bindtouchmove/bindtouchend：触摸事件，返回坐标信息作用：实现自定义绘图、动画、小游戏、数据可视化等功能<br>示例（WXML）：<br><canvas class="canvas" type="2d" id="myCanvas" bindtouchmove="handleCanvasTouch"></canvas><br>JS（核心方法）：<br>onReady() {<br> const query = wx.createSelectorQuery();<br> query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {<br> const canvas = res[0].node;<br> const ctx = canvas.getContext('2d');<br> ctx.fillStyle = '#07c160'; ctx.fillRect(10, 10, 100, 100); // 绘制矩形<br> })<br>}<br>WXSS：<br>.canvas { width: 300rpx; height: 300rpx; border: 1rpx solid #eee; }适用场景：自定义图表、涂鸦画板、小游戏开发、图片编辑、数据可视化等；<br>兼容性：基础库1.0.0及以上支持，2d模式需基础库2.9.0+；<br>注意事项：1. 需通过SelectorQuery获取画布节点；2. 避免频繁重绘导致性能问题；3. 画布内容需手动导出（wx.canvasToTempFilePath）保存
card（卡片容器控件）class、id、style、hidden1. title：string类型，卡片标题，可选；<br>2. thumb：string类型，卡片左侧缩略图地址，可选；<br>3. radius：number类型，卡片圆角，默认10rpx；<br>4. shadow：boolean类型，是否显示阴影，默认false；<br>5. border：boolean类型，是否显示边框，默认true；<br>6. bindtap：点击卡片触发事件作用：标准化卡片布局，集成标题、缩略图、内容区域，快速实现统一的卡片样式<br>示例（WXML）：<br><card class="card" title="商品卡片" thumb="https://example.com/img.png" shadow bindtap="clickCard"><br> <view class="card-content">商品详情描述，简短介绍商品信息</view><br></card><br>WXSS：<br>.card { padding: 20rpx; background: #fff; margin: 10rpx; }<br>.card-content { margin-top: 10rpx; font-size: 28rpx; color: #666; }适用场景：商品展示、资讯卡片、列表项卡片、个人中心功能卡片等；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. 缩略图建议统一尺寸（如80rpx×80rpx），避免布局错乱；2. shadow为true时，建议降低卡片边距，避免阴影重叠；3. 卡片内容区域避免嵌套过深，保证渲染性能
checkbox（复选框控件）1. 基础属性：class、id、style、hidden、data-*、bindchange2. 特有属性：value、checked、disabled、color1. value：string类型，复选框的值，用于表单提交时传递，默认空；2. checked：boolean类型，是否选中，默认false；3. disabled：boolean类型，是否禁用，默认false；4. color：string类型，选中状态的颜色，默认"#07C160"（微信绿）；5. 注：通常与checkbox-group组合使用，单个checkbox需手动控制选中状态。1. 多选场景：作用：用于用户选择多个选项（如兴趣爱好、收货地址选择、协议同意），常与checkbox-group配合使用以统一管理选中状态；示例（WXML代码）：<!-- 复选框组，统一管理选中状态 --> <checkbox-group class="checkbox-group" bindchange="handleCheckboxChange"> <label class="checkbox-item" wx:for="{{hobbies}}" wx:key="index"> <checkbox value="{{item.value}}" checked="{{item.checked}}" color="#FF4444"/> <text class="checkbox-text">{{item.name}}</text> </label> </checkbox-group> <!-- 单个复选框（协议同意） --> <label class="agreement-item"> <checkbox checked="{{agree}}" bindchange="handleAgreeChange" disabled="{{false}}"/> <text>同意用户协议和隐私政策</text> </label> <!-- WXSS样式 --> .checkbox-group { margin: 20rpx 0; } .checkbox-item { display: flex; align-items: center; margin: 15rpx 0; font-size: 32rpx; } .checkbox-text { margin-left: 10rpx; color: #333; } .agreement-item { display: flex; align-items: center; font-size: 28rpx; color: #666; }说明：checkbox-group包裹多个复选框（兴趣爱好选择），通过bindchange事件获取所有选中的值；单个复选框用于协议同意，手动控制选中状态，选中颜色设置为红色。1. 适用场景：多选项选择（兴趣爱好、标签选择）、协议同意勾选、批量操作选择；2. 兼容性：全基础库版本支持；3. 注意事项：- 建议将checkbox与label组合使用，点击label内的文本也可触发复选框选中状态切换，提升用户体验；- 多个复选框建议使用checkbox-group管理，其bindchange事件的detail.value可直接获取所有选中的value数组；- 单个复选框需通过checked属性绑定数据，手动控制选中状态；- disabled状态下，复选框无法点击，颜色会变灰；- 复选框的大小无法直接修改，可通过scale样式缩放（如transform: scale(0.8)）。
checkbox-card（卡片式复选控件）class、id、style、hidden1. options：array类型，复选卡片列表，必填，格式同radio-card；2. model-value：array类型，绑定的选中值数组，支持双向绑定，必填；3. border：boolean类型，是否显示卡片边框，默认true；4. active-color：string类型，选中状态颜色，默认#07c160；5. column-count：number类型，卡片排列列数，默认1；6. max-select：number类型，最大选中数量，默认Infinity；7. bindchange：选中状态变化触发事件；8. bindmax：选中数量达上限触发事件作用：以卡片形式展示复选选项，支持多选限制，适用于需要突出选项的多选场景示例（WXML）：<checkbox-card class="checkbox-card" options="{{serviceOptions}}" model-value="{{selectedServices}}" column-count="2" max-select="2" bindchange="onServiceChange" bindmax="onSelectMax"><checkbox-card>JS：Page({ data: { selectedServices: [], serviceOptions: [ { label: "上门安装", value: "install", desc: "专业师傅上门" }, { label: "延保服务", value: "warranty", desc: "延长1年质保" }, { label: "以旧换新", value: "trade", desc: "旧机折价抵扣" } ] }, onServiceChange(e) { console.log("选中服务：", e.detail.value); }, onSelectMax() { wx.showToast({ title: "最多选择2项服务", icon: "none" }); }})WXSS：.checkbox-card { padding: 20rpx; display: flex; flex-wrap: wrap; gap: 20rpx;}.checkbox-card .card-item { width: calc(50% - 10rpx); padding: 20rpx; border-radius: 8rpx; box-sizing: border-box;}适用场景：服务类型选择、商品属性多选、兴趣标签选择、套餐增值服务选择等；兼容性：基础库2.21.0及以上支持；注意事项：1. max-select用于限制最大选中数量，适用于有选择数量限制的场景；2. 选中数量达上限时，未选中的卡片会自动禁用，点击触发bindmax；3. 其他注意事项与radio-card一致，确保布局和交互统一；4. 绑定的model-value为数组，存储选中选项的value值
checkbox-group（复选框组控件）class、id、style、hidden1. options：array类型，复选框选项数组（含label/value/checked），必填；2. disabled：boolean类型，是否整体禁用，默认false；3. column-count：number类型，列数，默认1；4. bindchange：选择状态变化触发事件，返回选中value数组作用：批量管理复选框选择状态，支持多列布局，替代手动组合多个checkbox控件示例（WXML）：<checkbox-group class="checkbox-group" options="{{checkOptions}}" column-count="2" bindchange="onCheckChange"></checkbox-group>JS：data: { checkOptions: [ { label: "篮球", value: "basketball", checked: false }, { label: "足球", value: "football", checked: true } ]},onCheckChange(e) { console.log("选中值：", e.detail.value);}WXSS：.checkbox-group { padding: 20rpx; display: flex; flex-wrap: wrap; gap: 20rpx; }适用场景：兴趣爱好选择、表单多选、筛选条件多选、权限选择等；兼容性：基础库1.0.0及以上支持；注意事项：1. options数组的checked字段控制默认选中状态；2. 列数column-count可根据页面宽度设置，提升布局利用率；3. 整体禁用时，所有复选框均不可点击；4. 可通过自定义样式修改复选框大小、颜色、文字样式等
collapse-group（折叠面板组控件）class、id、style、hidden1. accordion：boolean类型，是否手风琴模式（只能展开一个面板），默认false；2. active-names：array类型，当前展开的面板name数组，默认[]；3. border：boolean类型，是否显示边框，默认true；4. bindchange：面板展开折叠触发事件，返回当前active-names作用：折叠面板的容器控件，管理多个collapse-item，支持手风琴模式和批量展开/折叠，替代手动管理多个折叠面板的状态示例（WXML）：<collapse-group class="collapse-group" accordion active-names="{{activeNames}}" bindchange="onCollapseChange"> <collapse-item name="1" title="问题1：如何修改密码？"> <view class="collapse-content">进入个人中心，点击修改密码，输入原密码和新密码即可完成修改。</view> <collapse-item><collapse-item name="2" title="问题2：订单如何取消？"> <view class="collapse-content">未付款订单可直接在订单详情页点击取消订单；已付款订单需联系客服申请取消。</view> <collapse-item><collapse-group>JS：data: { activeNames: ["1"] },onCollapseChange(e) { this.setData({ activeNames: e.detail.activeNames });}WXSS：.collapse-group { width: 100%; padding: 20rpx; }.collapse-content { padding: 20rpx 0; font-size: 28rpx; color: #666; }适用场景：帮助中心、常见问题解答、商品详情页规格说明、表单分组折叠、用户协议展示等；兼容性：基础库2.10.0及以上支持；注意事项：1. 手风琴模式accordion为true时，每次只能展开一个面板，适合选项互斥的场景；2. active-names数组中的name需与collapse-item的name对应，用于默认展开指定面板；3. 不需要边框时可设置border为false，适配不同页面风格；4. 折叠面板标题建议简洁明了，概括面板内容；5. 面板内容较长时，会自动适应高度，也可通过设置max-height和overflow实现滚动
collapse-item（折叠面板项）class、id、style、hidden1. name：string/number类型，面板标识，必填；<br>2. title：string类型，面板标题，必填；<br>3. disabled：boolean类型，是否禁用，默认false；<br>4. open：boolean类型，是否默认展开，默认false；<br>5. bindexpand：展开触发事件；<br>6. bindcollapse：折叠触发事件作用：作为collapse折叠面板的子项，实现单条内容的折叠/展开<br>示例（WXML）：<br><collapse class="collapse" accordion><br> <collapse-item class="collapse-item" name="1" title="常见问题1" open><br> <view class="content">问题1的解答内容</view><br> </collapse-item><br> <collapse-item class="collapse-item" name="2" title="常见问题2"><br> <view class="content">问题2的解答内容</view><br> </collapse-item><br></collapse><br>WXSS：<br>.collapse { width: 100%; border: 1rpx solid #eee; border-radius: 8rpx; }<br>.collapse-item { border-bottom: 1rpx solid #eee; }<br>.content { padding: 15rpx; font-size: 28rpx; }适用场景：帮助中心、常见问题、商品详情补充信息、表单分组等；<br>兼容性：基础库2.10.0及以上支持；<br>注意事项：1. 必须嵌套在collapse组件中使用；2. accordion模式下只能展开一个面板；3. title支持简单文本，复杂标题需通过slot自定义
countdown（倒计时控件）class、id、style、hidden1. target-time：number类型，目标时间戳（毫秒），必填；<br>2. format：string类型，时间格式，可选"DD:HH:MM:SS"/"HH:MM:SS"/"MM:SS"，默认"HH:MM:SS"；<br>3. auto-start：boolean类型，是否自动开始，默认true；<br>4. bindfinish：倒计时结束触发事件；<br>5. bindchange：倒计时变化触发，返回剩余时间作用：展示倒计时，支持自定义格式，无需手动计算时间差<br>示例（WXML）：<br><countdown class="countdown" target-time="{{targetTime}}" format="HH:MM:SS" bindfinish="onCountdownFinish"></countdown><br>JS：<br>onLoad() {<br> // 设置1小时后结束的倒计时<br> const now = Date.now();<br> this.setData({ targetTime: now + 3600 * 1000 });<br>}<br>onCountdownFinish() {<br> wx.showToast({ title: '倒计时结束' });<br>}<br>WXSS：<br>.countdown { font-size: 32rpx; color: #f00; text-align: center; padding: 20rpx; }适用场景：秒杀活动、限时优惠、考试倒计时、订单支付倒计时等；<br>兼容性：基础库2.28.0及以上支持；<br>注意事项：1. target-time需传入毫秒级时间戳；2. 格式需匹配支持的类型；3. 可通过auto-start控制是否手动开始
count-down（倒计时控件）class、id、style、hidden1. target-time：number类型，目标倒计时时间（时间戳，单位ms），必填；2. format：string类型，倒计时显示格式，可选"DD:HH:mm:ss"/"HH:mm:ss"/"mm:ss"，默认"HH:mm:ss"；3. show-day：boolean类型，是否显示天数，默认false；4. color：string类型，倒计时文字颜色，默认#333；5. active-color：string类型，倒计时小于1小时时文字颜色，默认#f00；6. auto-start：boolean类型，是否自动开始倒计时，默认true；7. bindfinish：倒计时结束触发事件；8. bindchange：倒计时变化触发事件，回调含remainTime（剩余时间对象）作用：实现精准倒计时功能，支持多种格式展示，自动处理时间转换，适用于活动倒计时、限时优惠等场景示例（WXML）：<count-down class="count-down" target-time="{{targetTime}}" format="DD:HH:mm:ss" show-day active-color="#f00" bindfinish="onCountDownFinish"><count-down>JS：Page({ data: { / 目标时间：当前时间+2天3小时（时间戳） targetTime: Date.now() + 2*24*60*60*1000 + 3*60*60*1000 }, onCountDownFinish() { wx.showToast({ title: "倒计时结束" }); }})WXSS：.count-down { font-size: 36rpx; font-weight: bold; padding: 20rpx; text-align: center;}适用场景：活动限时倒计时、秒杀活动倒计时、订单支付倒计时、考试剩余时间倒计时等；兼容性：基础库2.17.0及以上支持；注意事项：1. target-time必须传入时间戳，需提前将日期转换为对应格式；2. 格式format需与show-day匹配，显示天数时建议用"DD:HH:mm:ss"；3. 倒计时结束后会自动停止，可通过auto-start控制是否重新开始；4. 页面隐藏时倒计时仍会继续，若需暂停可在onHide中处理状态
count-down-btn（倒计时按钮控件）class、id、style、hidden1. text：string类型，按钮默认文字，必填；<br>2. count：number类型，倒计时秒数，默认60；<br>3. count-text：string类型，倒计时文字模板，默认"{{count}}s后重新获取"；<br>4. disabled-color：string类型，禁用背景色，默认#ccc；<br>5. normal-color：string类型，正常背景色，默认#07c160；<br>6. bindclick：点击按钮触发事件作用：集成按钮与倒计时功能，适用于获取验证码、重新发送等场景，自动管理禁用状态<br>示例（WXML）：<br><count-down-btn class="count-btn" text="获取验证码" count="60" bindclick="getCode"></count-down-btn><br>JS：<br>getCode(e){if(e.detail.canClick){// 触发验证码请求，控件自动开始倒计时console.log("获取验证码")}}<br>WXSS：<br>.count-btn { width: 200rpx; height: 80rpx; line-height: 80rpx; text-align: center; color: #fff; border-radius: 40rpx; }适用场景：手机验证码获取、短信重新发送、限时操作按钮等；<br>兼容性：基础库2.6.0及以上支持；<br>注意事项：1. 点击事件需判断e.detail.canClick，避免倒计时中重复点击；2. count建议设置30/60秒，符合交互规范；3. 文字模板需包含{{count}}占位符，否则倒计时数字不显示
count-up（数字滚动控件）class、id、style、hidden1. start-val：number类型，起始值，默认0；2. end-val：number类型，目标值，必填；3. duration：number类型，滚动时长（毫秒），默认2000；4. decimal-places：number类型，保留小数位数，默认0；5. separator：boolean类型，是否显示千位分隔符，默认false；6. prefix：string类型，数值前缀，可选；7. suffix：string类型，数值后缀，可选；8. bindfinish：滚动结束触发事件作用：实现数字从起始值滚动到目标值的动画效果，用于数据展示，提升视觉体验示例（WXML）：<count-up class="count-up" start-val="0" end-val="{{totalSales}}" duration="2500" separator prefix="¥" suffix="元" bindfinish="onCountFinish"></count-up>JS：data: { totalSales: 123456.78 },onCountFinish() { console.log("数字滚动结束"); }WXSS：.count-up { font-size: 40rpx; font-weight: bold; color: #f00; padding: 20rpx; text-align: center; }适用场景：销售额展示、用户数量统计、订单数量统计、数据看板数字展示等；兼容性：基础库2.26.0及以上支持；注意事项：1. 目标值end-val建议为正数，负数滚动效果可能不符合预期；2. 滚动时长duration根据数字大小调整，数字越大时长建议越长；3. 千位分隔符separator适用于大额数字，提升可读性；4. 前缀prefix和后缀suffix可用于添加单位（如元、人、件等）；5. 数字滚动过程中会占用一定性能，避免同一页面多个count-up控件同时滚动
cover-image（覆盖图片）1. 基础属性：class、id、style、hidden、data-*、bindtap、catchtap2. 特有属性：src、mode、hover-class、hover-stop-propagation1. src：string类型，图片资源路径（本地/网络/云存储），必填；2. mode：string类型，图片裁剪/缩放模式，同image控件，默认"scaleToFill"；3. hover-class：string类型，点击态样式类，默认"none"；4. hover-stop-propagation：boolean类型，是否阻止事件冒泡，默认false；注：原生组件，可覆盖在map、video等原生组件之上，仅能嵌套在cover-view内。1. 原生组件覆盖图片场景：作用：用于在map、video等原生组件之上展示图片（如图标、按钮背景），解决普通image无法覆盖原生组件的问题；示例（WXML代码）：<!-- 覆盖在map上的定位图标 --> <map class="map-container" longitude="116.404267" latitude="39.915185" show-location></map> <cover-view class="map-control" bindtap="handleRelocate"> <cover-image src="/images/location-icon.png" mode="widthFix" class="control-img"/> </cover-view> <!-- 覆盖在video上的播放图标 --> <video class="video-player" src="https://example.com/video/demo.mp4" controls="{{false}}"></video> <cover-view class="video-play-btn" bindtap="handleVideoPlay"> <cover-image src="/images/play-icon.png" mode="aspectFit" class="play-img"/> </cover-view> <!-- WXSS样式 --> .map-container { width: 100%; height: 400rpx; position: relative; } .map-control { position: absolute; top: 20rpx; right: 20rpx; width: 60rpx; height: 60rpx; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .control-img { width: 36rpx; height: 36rpx; } .video-player { width: 100%; height: 300rpx; position: relative; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80rpx; height: 80rpx; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .play-img { width: 40rpx; height: 40rpx; }说明：第一个cover-image作为地图上的定位图标，点击可触发重新定位；第二个作为视频上的播放图标，点击可触发视频播放，均实现了在原生组件上叠加图片的需求。1. 适用场景：原生组件（map、video等）上的图标展示、按钮背景图、装饰图片；2. 兼容性：全基础库版本支持；3. 注意事项：- 仅能嵌套在cover-view内使用，无法直接在页面中单独使用；- 图片路径要求同image控件，网络图片需配置合法域名；- 支持的mode模式与image完全一致，可根据需求选择裁剪/缩放方式；- 样式支持有限，复杂样式（如阴影、渐变）可能无法生效；- 点击事件绑定与普通image一致，但事件冒泡仅在cover-view层级内生效。
cover-view（覆盖视图）1. 基础属性：class、id、style、hidden、data-*、bindtap、catchtap2. 特有属性：hover-class、hover-stop-propagation、hover-start-time、hover-stay-time1. hover-class：string类型，点击态样式类，默认"none"；2. hover-stop-propagation：boolean类型，是否阻止事件冒泡，默认false；3. 注：cover-view是原生组件，可覆盖在map、video、canvas等原生组件之上，支持嵌套cover-view和cover-image。1. 原生组件覆盖场景：作用：用于在map、video等原生组件之上叠加视图（如文本、按钮、图标），解决原生组件层级过高无法被普通组件覆盖的问题；示例（WXML代码）：<!-- 覆盖在video之上的视图 --> <video class="video-player" src="https://example.com/video/demo.mp4" controls="{{false}}" id="video"></video> <cover-view class="video-cover-view"> <cover-view class="cover-title">视频标题：小程序开发教程</cover-view> <cover-view class="cover-btn-group"> <cover-view class="cover-btn" bindtap="handlePlay">播放</cover-view> <cover-view class="cover-btn" bindtap="handleShare">分享</cover-view> </cover-view> </cover-view> <!-- 覆盖在map之上的定位按钮 --> <map class="map-container" longitude="116.404267" latitude="39.915185" show-location="{{true}}"></map> <cover-view class="location-btn" bindtap="handleLocation"> <cover-image src="/images/location.png" class="location-icon"/> </cover-view> <!-- WXSS样式 --> .video-player { width: 100%; height: 300rpx; position: relative; } .video-cover-view { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); color: #fff; padding: 15rpx; } .cover-title { font-size: 32rpx; margin-bottom: 10rpx; } .cover-btn-group { display: flex; gap: 20rpx; } .cover-btn { padding: 10rpx 20rpx; background: #1E88E5; border-radius: 5rpx; font-size: 28rpx; } .map-container { width: 100%; height: 400rpx; } .location-btn { position: absolute; top: 20rpx; right: 20rpx; width: 60rpx; height: 60rpx; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .location-icon { width: 36rpx; height: 36rpx; }说明：第一个cover-view覆盖在video之上，显示视频标题和播放、分享按钮；第二个cover-view覆盖在map之上，作为定位按钮，点击可触发定位功能；两者均解决了普通组件无法覆盖原生组件的问题。1. 适用场景：在map、video、canvas等原生组件上叠加文本、按钮、图标等视图；2. 兼容性：全基础库版本支持；3. 注意事项：- cover-view仅能覆盖在原生组件之上，无法覆盖普通组件（如view、text）；- cover-view内仅能嵌套cover-view和cover-image，无法嵌套其他普通组件（如input、button）；- cover-view的样式支持有限，部分CSS属性（如box-shadow、gradient）不支持，建议使用简单样式；- 事件绑定支持bindtap、catchtap等，但事件冒泡机制与普通组件一致，可通过hover-stop-propagation控制；- cover-view的层级高于被覆盖的原生组件，但多个cover-view之间的层级可通过z-index调整；- 为确保覆盖位置准确，建议将被覆盖的原生组件设置为position: relative，cover-view设置为position: absolute。
date-picker（日期选择器控件）class、id、style、hidden1. value：string类型，选中日期，格式"YYYY-MM-DD"，默认当前日期；2. min-date：string类型，最小可选日期，默认"1970-01-01"；3. max-date：string类型，最大可选日期，默认"2100-12-31"；4. format：string类型，日期显示格式，可选"YYYY-MM-DD"/"YYYY年MM月DD日"/"MM-DD"，默认"YYYY-MM-DD"；5. show-footer：boolean类型，是否显示底部确认/取消按钮，默认true；6. bindconfirm：确认选择触发事件；7. bindcancel：取消选择触发事件作用：专门用于日期选择的控件，集成日期展示和选择面板，替代picker的日期模式示例（WXML）：<date-picker class="date-picker" value="{{selectedDate}}" min-date="2024-01-01" max-date="2024-12-31" format="YYYY年MM月DD日" bindconfirm="onDateConfirm"></date-picker>JS：data: { selectedDate: "2024-05-20" },onDateConfirm(e) { this.setData({ selectedDate: e.detail.value }); wx.showToast({ title: `选中日期：${e.detail.value}` });}WXSS：.date-picker { padding: 20rpx; border-bottom: 1rpx solid #f5f5f5; }适用场景：出生日期选择、预约日期选择、订单日期选择、行程日期规划等；兼容性：基础库2.25.0及以上支持；注意事项：1. 日期格式需符合指定类型，避免自定义格式导致展示异常；2. min-date和max-date需按"YYYY-MM-DD"格式设置，限制可选日期范围；3. 底部按钮show-footer为false时，需通过其他方式触发确认/取消（如点击外部区域）；4. 可通过自定义样式修改选择器面板样式、文字颜色等；5. 选中日期变化后，建议同步更新关联数据（如行程、预约信息等）
drawer（抽屉控件）class、id、style、hidden1. show：boolean类型，是否显示抽屉，默认false；<br>2. direction：string类型，滑出方向，可选"left"/"right"/"bottom"，默认"right"；<br>3. mask：boolean类型，是否显示遮罩，默认true；<br>4. mask-closeable：boolean类型，点击遮罩关闭，默认true；<br>5. width/height：number类型，抽屉宽/高，默认300rpx/80vh；<br>6. bindopen：抽屉打开触发事件；<br>7. bindclose：抽屉关闭触发事件作用：实现从侧边/底部滑出的抽屉面板，替代自定义弹窗，适用于二级操作、筛选、菜单等<br>示例（WXML）：<br><drawer class="drawer" show="{{showDrawer}}" direction="right" mask-closeable bindclose="closeDrawer"><br> <view class="drawer-content">抽屉内的操作内容，如筛选条件、侧边菜单等</view><br></drawer><br>JS：<br>data: {showDrawer:false},<br>openDrawer(){this.setData({showDrawer:true})},<br>closeDrawer(){this.setData({showDrawer:false})}<br>WXSS：<br>.drawer-content { padding: 30rpx; height: 100%; background: #fff; }适用场景：侧边筛选面板、底部操作菜单、二级功能抽屉、个人中心侧边栏等；<br>兼容性：基础库2.4.0及以上支持；<br>注意事项：1. 左侧/右侧滑出设置width，底部滑出设置height；2. 抽屉内避免嵌套过长列表，建议结合scroll-view使用；3. mask为false时，mask-closeable自动失效；4. 需设置z-index保证抽屉层级高于页面内容
dropdown-menu（下拉菜单控件）class、id、style、hidden1. value：string/array类型，选中值（单选为string，多选为array）；<br>2. options：array类型，下拉选项数组（含label、value字段），必填；<br>3. multiple：boolean类型，是否支持多选，默认false；<br>4. placeholder：string类型，默认提示文字，默认"请选择"；<br>5. bindconfirm：确认选择后触发事件；<br>6. bindcancel：取消选择时触发事件作用：点击触发下拉选项列表，节省页面空间，支持单选/多选<br>示例（WXML）：<br><dropdown-menu class="dropdown" options="{{dropdownOptions}}" multiple="false" placeholder="请选择支付方式" bindconfirm="handleDropdownConfirm"></dropdown-menu><br>JS（数据）：<br>data: {<br> dropdownOptions: [<br> { label: "微信支付", value: "wechat" },<br> { label: "支付宝支付", value: "alipay" },<br> { label: "银行卡支付", value: "bank" }<br> ]<br>}<br>WXSS：<br>.dropdown { width: 100%; padding: 15rpx; border: 1rpx solid #eee; border-radius: 8rpx; font-size: 28rpx; }适用场景：筛选条件选择、表单辅助输入（如支付方式、地区、分类）、设置项选择等；<br>兼容性：基础库2.10.0及以上支持；<br>注意事项：1. options数组需包含label（显示文本）和value（实际值）字段；2. 多选时value为数组，单选为字符串；3. 下拉面板宽度与触发按钮一致，选项过多时可滚动（默认最大高度为屏幕一半）；4. 禁用状态可通过设置disabled属性实现（基础属性继承）
editor（富文本编辑器）class、id、style、hidden1. placeholder：string类型，占位提示文字；<br>2. read-only：boolean类型，是否只读，默认false；<br>3. show-img-size：boolean类型，点击图片显示尺寸，默认false；<br>4. bindready：编辑器初始化完成触发；<br>5. bindinput：内容变化时触发，返回html内容作用：支持用户编辑带格式的文本（加粗、插入图片、链接等），生成HTML内容<br>示例（WXML）：<br><editor class="editor" placeholder="请输入内容" bindready="onEditorReady" bindinput="onEditorInput"></editor><br>JS（核心方法）：<br>onEditorReady() {<br> this.editorCtx = wx.createSelectorQuery().select('#editor').context(res => {<br> this.editorCtx = res.context; // 获取编辑器上下文<br> }).exec();<br>}<br>WXSS：<br>.editor { width: 100%; height: 400rpx; padding: 20rpx; border: 1rpx solid #eee; }适用场景：文章编辑、评论回复、商品描述编辑、表单富文本输入等；<br>兼容性：基础库2.7.0及以上支持；<br>注意事项：1. 插入图片需处理临时文件上传；2. 编辑器内容需通过ctx.getContents()获取；3. 样式仅支持基础布局属性，内部格式需通过API控制
empty（空状态控件）class、id、style、hidden1. image：string类型，空状态图片路径，可选；2. desc：string类型，空状态描述文字，默认"暂无数据"；3. button-text：string类型，操作按钮文字，可选；4. bindbuttonclick：点击操作按钮触发事件作用：在无数据时展示统一的空状态样式，提升用户体验，替代自定义空状态布局示例（WXML）：<empty class="empty" image="images/empty-order.png" desc="暂无订单数据" button-text="去下单" bindbuttonclick="goToOrder"></empty>JS：goToOrder() { wx.navigateTo({ url: "pages/order/create" }); }WXSS：.empty { margin: 100rpx auto; text-align: center; }适用场景：订单列表空状态、购物车空状态、收藏列表空状态、搜索结果为空等；兼容性：基础库2.23.0及以上支持；注意事项：1. 空状态图片建议尺寸统一（如200rpx×200rpx）；2. 描述文字简洁明了，不超过10字；3. 操作按钮根据业务需求添加，引导用户下一步操作
empty-state（空状态控件）class、id、style、hidden1. type：string类型，空状态类型，可选"empty"/"no-data"/"no-network"/"no-search"/"no-collection"，默认"empty"；2. image：string类型，自定义空状态图片，可选；3. title：string类型，空状态标题，可选；4. desc：string类型，空状态描述，可选；5. button-text：string类型，操作按钮文字，可选；6. show-button：boolean类型，是否显示操作按钮，默认false；7. bindbuttonclick：操作按钮点击触发事件作用：标准化空状态展示，提供多种预设空状态类型，适配不同空场景，提升页面一致性示例（WXML）：<empty-state class="empty-state" type="no-data" title="暂无数据" desc="暂无相关订单记录" button-text="去创建订单" show-button bindbuttonclick="onCreateOrder"><empty-state>JS：Page({ onCreateOrder() { wx.navigateTo({ url: "pages/order/create" }); }})WXSS：.empty-state { width: 100%; padding: 80rpx 20rpx; text-align: center; box-sizing: border-box;}.empty-state image { width: 200rpx; height: 200rpx; margin-bottom: 20rpx;}适用场景：列表无数据、网络异常、搜索无结果、收藏为空等各类空状态场景；兼容性：基础库2.16.0及以上支持；注意事项：1. 预设type对应不同的默认图片和文字，可直接使用；2. 自定义image会覆盖预设图片，建议图片尺寸200rpx×200rpx；3. 操作按钮show-button适用于需要引导用户操作的场景（如无订单引导创建）；4. 标题和描述需简洁明了，告知用户空状态原因；5. 可通过自定义样式修改文字颜色、图片大小等
filter-bar（筛选栏控件）class、id、style、hidden1. filters：array类型，筛选项数组（含label/value/type），必填；<br>2. active-keys：array类型，选中筛选值数组，默认[]；<br>3. show-reset：boolean类型，是否显示重置按钮，默认true；<br>4. confirm-text：string类型，确认按钮文字，默认"确认"；<br>5. bindconfirm：确认筛选触发事件；<br>6. bindreset：重置筛选触发事件作用：集成多类型筛选项（单选/多选），实现统一的筛选栏布局，自带重置、确认功能<br>示例（WXML）：<br><filter-bar class="filter-bar" filters="{{filters}}" active-keys="{{activeKeys}}" bindconfirm="onFilterConfirm" bindreset="onFilterReset"></filter-bar><br>JS：<br>data: {filters:[{label:"价格",value:"price",type:"single"},{label:"分类",value:"cate",type:"multiple"}],activeKeys:[]},<br>onFilterConfirm(e){console.log("筛选条件：",e.detail.activeKeys)},<br>onFilterReset(){this.setData({activeKeys:[]})}<br>WXSS：<br>.filter-bar { display: flex; flex-wrap: wrap; padding: 20rpx; background: #f5f5f5; }适用场景：商品列表筛选、资讯列表筛选、订单筛选、数据列表筛选等；<br>兼容性：基础库2.10.0及以上支持；<br>注意事项：1. filters的type字段区分单选（single）/多选（multiple），需按规则设置；2. 筛选项过多时自动换行，适配不同屏幕；3. 确认后建议隐藏筛选面板，避免遮挡内容
form（表单容器）1. 基础属性：class、id、style、hidden、data-*、bindsubmit、bindreset2. 特有属性：report-submit、report-submit-timeout1. bindsubmit：表单提交事件（点击form内type="submit"的button触发）；2. bindreset：表单重置事件（点击form内type="reset"的button触发）；3. report-submit：boolean类型，是否返回formId用于模板消息（需用户点击提交），默认false；4. report-submit-timeout：number类型，formId有效期，单位ms，默认60000（1分钟）。1. 表单聚合场景：作用：用于聚合表单控件（input、checkbox、radio等），统一处理表单提交和重置，简化多控件值的获取逻辑；示例（WXML代码）：<form class="login-form" bindsubmit="handleFormSubmit" bindreset="handleFormReset" report-submit="{{true}}"> <!-- 用户名输入 --> <input name="username" type="text" placeholder="请输入用户名" class="form-input"/> <!-- 密码输入 --> <input name="password" type="password" placeholder="请输入密码" class="form-input"/> <!-- 记住密码复选框 --> <checkbox-group name="remember"> <label class="checkbox-label"> <checkbox value="1"/> <text>记住密码</text> </label> </checkbox-group> <!-- 提交和重置按钮 --> <view class="form-btn-group"> <button type="primary" form-type="submit" class="submit-btn">登录</button> <button form-type="reset" class="reset-btn">重置</button> </view> </form> <!-- WXSS样式 --> .login-form { padding: 20rpx; } .form-input { width: 100%; height: 80rpx; border: 1rpx solid #eee; border-radius: 10rpx; padding: 0 20rpx; margin: 15rpx 0; font-size: 32rpx; } .checkbox-label { display: flex; align-items: center; margin: 15rpx 0; font-size: 28rpx; color: #666; } .form-btn-group { display: flex; gap: 20rpx; margin-top: 30rpx; } .submit-btn, .reset-btn { flex: 1; height: 80rpx; line-height: 80rpx; font-size: 32rpx; }说明：form容器包裹登录表单的输入框、复选框和按钮，通过bindsubmit获取所有表单值（name属性为键），bindreset重置表单内容，report-submit开启后可获取formId用于后续模板消息推送。1. 适用场景：用户登录注册、信息填写表单、数据提交表单（如订单提交、报名表单）；2. 兼容性：report-submit属性全基础库版本支持；3. 注意事项：- 表单内的控件需设置name属性，submit事件的detail.value才能通过name获取对应值；- 仅form内的button设置form-type="submit"/"reset"才会触发form的submit/reset事件；- formId用于发送模板消息，需用户主动点击提交按钮才能获取，且有效期较短；- 复杂表单建议配合form-field组件使用，实现表单字段的双向绑定；- 表单验证需在handleFormSubmit内手动实现（如校验用户名密码是否为空）。
form-item（表单项容器）class、id、style、hidden1. label：string类型，表单标签文字，必填；<br>2. required：boolean类型，是否必填，默认false；<br>3. label-width：string/number类型，标签宽度，默认120rpx；<br>4. tip：string类型，表单提示文字，可选；<br>5. error：string类型，错误提示文字，可选；<br>6. bindclick：点击表单项触发事件作用：标准化表单项布局，集成标签、必填标识、提示/错误信息，无需手动排版<br>示例（WXML）：<br><form-item class="form-item" label="姓名" required tip="请填写真实姓名" error="{{nameError}}"><br> <input bindinput="onNameInput" placeholder="请输入姓名"/><br></form-item><br>JS：<br>data: {nameError:""},<br>onNameInput(e){if(!e.detail.value)this.setData({nameError:"姓名不能为空"})}<br>WXSS：<br>.form-item { display: flex; align-items: center; padding: 20rpx; border-bottom:1rpx solid #f5f5f5; }适用场景：各类表单页面（注册、登录、信息填写、订单提交等）；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. required为true时自动显示红色*标识；2. error有值时显示红色错误文字，优先级高于tip；3. label-width可设为auto，适配不同长度标签
form-preview（表单预览控件）class、id、style、hidden1. data：object类型，表单预览数据，必填；2. columns：array类型，表单列配置（含labelkey/format），必填；3. title：string类型，预览标题，可选；4. border：boolean类型，是否显示边框，默认true；5. show-operate：boolean类型，是否显示操作按钮，默认false；6. operate-text：string类型，操作按钮文字，默认"编辑"；7. bindoperate：点击操作按钮触发事件作用：标准化表单数据预览布局，自动根据配置渲染表单字段和值，替代自定义预览页面示例（WXML）：<form-preview class="form-preview" data="{{formData}}" columns="{{formColumns}}" title="个人信息预览" show-operate bindoperate="onEditForm"></form-preview>JS：data: { formData: { name: "张三", age: 25, phone: "13800138000" }, formColumns: [ { label: "姓名", key: "name" }, { label: "年龄", key: "age" }, { label: "手机号", key: "phone", format: (val) => val.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") } ]},onEditForm() { wx.navigateTo({ url: "pages/form/edit" }); }WXSS：.form-preview { padding: 20rpx; background-color: #fff; }.form-preview .form-item { display: flex; padding: 15rpx 0; border-bottom: 1rpx solid #f5f5f5; }适用场景：表单提交后预览、个人信息预览、订单信息预览、配置信息预览等；兼容性：基础库2.22.0及以上支持；注意事项：1. columns配置的key需与data中的属性名一致，确保数据正确渲染；2. format函数可用于格式化数据展示，如手机号脱敏、日期格式化等；3. 操作按钮show-operate用于触发编辑等后续操作，根据业务需求配置；4. 表单字段较多时，可结合scroll-view使用，避免内容溢出；5. 可通过自定义样式修改标签宽度、文字颜色等
form-uploader（表单上传控件）class、id、style、hidden、disabled1. type：string类型，上传文件类型，可选"image"/"file"/"video"，默认"image"；2. model-value：array类型，绑定的已上传文件列表，支持双向绑定，必填；3. count：number类型，最大上传数量，默认1，可选1-9；4. size-type：array类型，图片视频尺寸类型，默认["compressed"]（压缩）；5. accept：string类型，接受的文件格式，默认根据type自动匹配；6. upload-url：string类型，文件上传接口地址，可选；7. header：object类型，上传接口请求头，可选；8. show-progress：boolean类型，是否显示上传进度，默认true；9. show-delete：boolean类型，是否显示删除按钮，默认true；10. bindupload：文件上传成功触发事件；11. binddelete：文件删除触发事件；12. binderror：上传失败触发事件作用：集成表单场景下的文件上传功能，支持多类型文件上传、进度显示、删除操作，可直接对接后端上传接口，简化表单上传开发示例（WXML）：<form-uploader class="form-uploader" type="image" model-value="{{uploadFiles}}" count="3" upload-url="https:/example.com/api/upload" header="{{{token: wx.getStorageSync('token')}}}" show-progress bindupload="onUploadSuccess" binddelete="onUploadDelete"><form-uploader>JS：Page({ data: { uploadFiles: [] }, onUploadSuccess(e) { console.log("上传成功的文件：", e.detail.file); / e.detail.file含url、name、size等信息 }, onUploadDelete(e) { console.log("删除的文件索引：", e.detail.index); }})WXSS：.form-uploader { padding: 20rpx;}.form-uploader .upload-item { position: relative; width: 120rpx; height: 120rpx; margin-right: 20rpx; margin-bottom: 20rpx; display: inline-block;}.form-uploader .upload-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 20rpx; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 20rpx; text-align: center; line-height: 20rpx;}适用场景：表单附件上传、订单凭证上传、意见反馈图片上传、用户资料文件上传、报名表单材料上传等场景；兼容性：基础库2.25.0及以上支持；注意事项：1. 上传接口地址upload-url需符合小程序安全域名规范，支持HTTPS；2. 不同type对应不同的文件选择逻辑，video类型支持选择视频并获取视频缩略图；3. 最大上传数量count建议不超过9，符合微信交互规范；4. 上传进度显示仅在设置upload-url时有效，手动处理上传需自行控制进度；5. 已上传文件列表model-value需按指定格式（含url、name等字段）维护，确保删除和回显正常；6. 上传失败时，binderror事件会返回错误信息，可用于提示用户重试
fullscreen-btn（全屏按钮控件）class、id、style、hidden、disabled1. type：string类型，按钮图标类型，可选"video"/"image"/"custom"，默认"video"；2. fullscreen-text：string类型，全屏状态提示文字，默认"全屏"；3. exit-fullscreen-text：string类型，退出全屏状态提示文字，默认"退出全屏"；4. icon-size：number类型，图标尺寸，单位rpx，默认40；5. show-text：boolean类型，是否显示文字提示，默认false；6. bindfullscreenchange：全屏状态变化触发事件，回调含isFullScreen（是否全屏）；7. bindtap：点击按钮触发事件作用：标准化全屏切换按钮，支持不同场景下的全屏控制，自动切换图标和提示文字，无需手动管理全屏状态示例（WXML）：<video class="video-player" src="{{videoSrc}}" id="videoPlayer"></video><fullscreen-btn class="fullscreen-btn" type="video" show-text icon-size="48" bindfullscreenchange="onFullScreenChange"><fullscreen-btn>JS：Page({ onReady() { this.videoContext = wx.createVideoContext('videoPlayer'); }, onFullScreenChange(e) { const isFullScreen = e.detail.isFullScreen; if (isFullScreen) { this.videoContext.requestFullScreen(); } else { this.videoContext.exitFullScreen(); } }})WXSS：.video-player { width: 100%; height: 300rpx;}.fullscreen-btn { position: absolute; bottom: 20rpx; right: 20rpx; background-color: rgba(0,0,0,0.5); color: #fff; padding: 8rpx 16rpx; border-radius: 24rpx;}适用场景：视频播放全屏控制、图片预览全屏切换、文档查看全屏模式、游戏全屏切换等场景；兼容性：基础库2.17.0及以上支持；注意事项：1. 不同type对应不同默认图标，custom类型需自行通过slot传入自定义图标；2. 按钮需根据关联元素（如视频、图片）的位置合理布局，建议设为绝对定位；3. 全屏状态变化需与关联元素的全屏API联动，如视频的requestFullScreen和exitFullScreen；4. 显示文字提示时，文字需简洁，避免占用过多空间；5. 禁用状态下，按钮不可点击，图标和文字颜色自动变浅
functional-page-navigator（功能页导航）1. 基础属性：class、id、style、hidden、data-*、bindsuccess、bindfail2. 特有属性：version、args、scene1. version：string类型，功能页版本，可选值"release"（正式版）、"develop"（开发版）、"trial"（体验版），默认"release"；2. args：object类型，传递给功能页的参数，格式为键值对；3. scene：string类型，功能页场景值，不同功能页有不同的场景值（如“article”对应文章详情功能页），必填；4. bindsuccess：功能页跳转成功时触发的事件；5. bindfail：功能页跳转失败时触发的事件。1. 小程序功能页跳转场景：作用：用于跳转到微信小程序官方提供的功能页（如文章详情、关注公众号、小程序客服等），实现快速集成官方功能；示例（WXML代码）：<!-- 跳转到文章详情功能页 --> <functional-page-navigator class="func-nav" scene="article" version="release" args="{{articleArgs}}" bindsuccess="handleFuncNavSuccess" bindfail="handleFuncNavFail"> <view class="nav-content">查看官方文章详情</view> </functional-page-navigator> <!-- 跳转到关注公众号功能页 --> <functional-page-navigator class="func-nav" scene="subscribeMsg" version="release" args="{{subscribeArgs}}"> <view class="nav-content">关注公众号接收通知</view> </functional-page-navigator> <!-- WXSS样式 --> .func-nav { display: block; margin: 15rpx 20rpx; } .nav-content { height: 80rpx; line-height: 80rpx; text-align: center; border: 1rpx solid #1E88E5; border-radius: 10rpx; font-size: 32rpx; color: #1E88E5; } <!-- JS数据示例 --> // Page({ // data: { // // 文章详情功能页参数 // articleArgs: { // articleId: "1234567890", // 文章ID // title: "小程序开发指南" // 文章标题 // }, // // 关注公众号功能页参数 // subscribeArgs: { // appid: "wx1234567890abcdef", // 公众号appId // scene: "1000" // 关注场景值 // } // }, // handleFuncNavSuccess() { // console.log("功能页跳转成功"); // }, // handleFuncNavFail(err) { // console.log("功能页跳转失败", err); // } // })说明：第一个功能页导航跳转到文章详情功能页，传递文章ID和标题参数；第二个跳转到关注公众号功能页，传递公众号appId参数；点击导航内容区域触发跳转，监听跳转成功和失败事件。1. 适用场景：集成微信官方功能页（文章详情、关注公众号、客服会话、地址选择等）；2. 兼容性：基础库2.4.0及以上版本支持；3. 注意事项：- 必须指定正确的scene值（功能页场景），不同功能页的scene值需参考微信官方文档；- args参数格式需符合对应功能页的要求，错误的参数格式会导致跳转失败；- 功能页仅支持跳转到微信官方提供的页面，无法跳转到自定义页面；- 跳转前需确保小程序已获得对应功能的权限（部分功能页需在小程序后台配置）；- 功能页导航内部需放置view等控件作为点击区域，点击该区域才会触发跳转；- 跳转结果通过bindsuccess和bindfail事件回调，可用于处理跳转后的逻辑（如跳转成功后提示用户）；- 不同版本（release/develop/trial）对应不同环境的功能页，开发测试时可使用develop版本。
grid（网格布局控件）class、id、style、hidden1. columns：number类型，列数，默认4；2. rows：number类型，行数，可选，不设置则自动根据数据行数适配；3. gap：number类型，网格间距，默认10rpx；4. data：array类型，网格数据数组，必填；5. border：boolean类型，是否显示边框，默认false；6. binditemclick：点击网格项触发事件，返回当前项数据和索引作用：标准化网格布局，快速实现多列多行的网格展示，支持间距和边框配置，替代手动编写flex布局示例（WXML）：<grid class="grid" columns="3" gap="20rpx" data="{{gridData}}" border binditemclick="onGridItemClick"></grid>JS：data: { gridData: [ { icon: "home", label: "首页" }, { icon: "category", label: "分类" }, { icon: "cart", label: "购物车" }, { icon: "user", label: "我的" } ]},onGridItemClick(e) { console.log("点击的网格项：", e.detail.item);}WXSS：.grid { padding: 20rpx; }.grid .grid-item { display: flex; flex-direction: column; align-items: center; padding: 10rpx; }适用场景：首页功能入口、分类导航、商品网格展示、个人中心功能列表等；兼容性：基础库2.8.0及以上支持；注意事项：1. 列数columns建议根据页面宽度合理设置，如首页功能入口选4列，分类导航选3列；2. 网格项内容建议简洁，避免过多文字导致布局错乱；3. 间距gap需根据页面整体风格调整，保证布局美观；4. 数据量较大时，网格会自动换行，无需手动处理行数；5. 可通过自定义样式修改网格项背景色、文字颜色、图标大小等
icon（图标控件）1. 基础属性：class、id、style、hidden、data-*、bindtap2. 特有属性：type、size、color1. type：string类型，图标类型（微信原生图标），可选值如"success"、"info"、"warn"、"waiting"、"cancel"等，必填；2. size：number类型，图标大小，单位px，默认23；3. color：string类型，图标颜色，默认"#000000"。1. 图标展示场景：作用：用于展示微信原生图标（状态图标、功能图标），无需引入外部图片，简洁高效，适用于提示状态、功能标识等；示例（WXML代码）：<!-- 不同类型和样式的原生图标 --> <view class="icon-group"> <icon type="success" size="40" color="#07C160" bindtap="handleIconTap" data-type="success"/> <icon type="warn" size="40" color="#FF4444" class="icon-margin"/> <icon type="info" size="40" color="#1E88E5" class="icon-margin"/> <icon type="waiting" size="40" color="#FF9800" class="icon-margin"/> <icon type="cancel" size="40" color="#666666" class="icon-margin"/> </view> <!-- 图标搭配文本使用 --> <view class="icon-text-item" bindtap="handleCollect"> <icon type="star" size="36" color="{{collected ? '#FFD700' : '#ccc'}}"/> <text class="icon-text">{{collected ? '已收藏' : '收藏'}}</text> </view> <!-- WXSS样式 --> .icon-group { margin: 20rpx 0; padding: 0 20rpx; } .icon-margin { margin-left: 30rpx; } .icon-text-item { display: flex; align-items: center; padding: 0 20rpx; height: 80rpx; font-size: 32rpx; } .icon-text { margin-left: 15rpx; color: #333; }说明：第一个view展示了5种不同类型的原生图标，设置统一大小和不同颜色；第二个view将星星图标与文本搭配，实现收藏/取消收藏的状态切换，图标颜色随状态变化。1. 适用场景：状态提示（成功、警告、加载中）、功能图标（收藏、取消、删除）、按钮图标辅助说明；2. 兼容性：全基础库版本支持；3. 注意事项：- icon仅支持微信原生定义的type类型，自定义图标需使用image控件引入图片；- 原生图标类型有限，可通过微信官方文档查询完整类型列表；- 图标大小通过size属性设置（单位px），也可通过style的font-size修改，但优先使用size属性；- 图标可绑定tap事件，实现点击交互（如收藏、删除功能）；- 建议与文本搭配使用时，保持图标和文本的对齐和间距一致，提升视觉美观度。
image（图片控件）1. 基础属性：class、id、style、hidden、data-*、bindtap2. 特有属性：src、mode、lazy-load、show-menu-by-longpress、webp、placeholder1. src：string类型，图片资源路径（本地路径、网络路径、云存储路径），必填；2. mode：string类型，图片裁剪/缩放模式，如"scaleToFill"（拉伸填充）、"aspectFit"（等比缩放适配容器）、"aspectFill"（等比缩放填充容器）等，默认"scaleToFill"；3. lazy-load：boolean类型，是否开启懒加载（仅针对页面滚动时的图片），默认false；4. show-menu-by-longpress：boolean类型，是否允许长按显示菜单（保存图片、转发等），默认false；5. webp：boolean类型，是否支持webp格式图片，默认false；6. placeholder：string类型，图片加载前的占位图路径。1. 图片展示场景：作用：用于展示本地或网络图片，支持多种缩放模式、懒加载和长按菜单，是小程序中核心的媒体展示控件；示例（WXML代码）：<!-- 不同模式和配置的图片 --> <image class="aspect-fit-img" src="/images/banner.jpg" mode="aspectFit" lazy-load="{{true}}" bindload="handleImageLoad"></image> <image class="aspect-fill-img" src="https://example.com/pic.jpg" mode="aspectFill" show-menu-by-longpress="{{true}}" placeholder="/images/placeholder.png"></image> <!-- 本地小图片 --> <image class="small-img" src="/images/icon.png" mode="widthFix"></image> <!-- WXSS样式 --> .aspect-fit-img { width: 100%; height: 300rpx; margin: 15rpx 0; } .aspect-fill-img { width: 100%; height: 400rpx; overflow: hidden; } .small-img { width: 80rpx; height: 80rpx; }说明：第一个图片使用aspectFit模式适配容器，开启懒加载；第二个使用aspectFill模式填充容器，支持长按菜单和占位图；第三个为本地小图标，使用widthFix模式（宽度固定，高度自适应）。1. 适用场景：页面Banner图、商品图片展示、图标展示、用户头像展示；2. 兼容性：lazy-load、show-menu-by-longpress需基础库1.5.0及以上版本；webp需基础库1.8.0及以上；3. 注意事项：- 网络图片需配置小程序后台的“合法域名”，否则无法加载；- 本地图片路径需正确（相对路径从项目根目录开始），大小建议不超过2MB，避免影响加载速度；- 选择mode时，优先使用aspectFit（适配）或aspectFill（填充），避免scaleToFill导致图片变形；- 懒加载仅对页面滚动时的图片生效，列表内的图片使用懒加载可优化页面性能。
image-cropper（图片裁剪控件）class、id、style、hidden1. src：string类型，待裁剪图片地址，必填；2. aspect-ratio：stringnumber类型，裁剪比例（宽/高），默认"1:1"；3. width：number类型，裁剪区域宽度，默认300；4. height：number类型，裁剪区域高度，默认300；5. zoom：boolean类型，是否支持缩放，默认true；6. rotate：boolean类型，是否支持旋转，默认false；7. bindcrop：裁剪完成触发事件，返回裁剪后图片临时路径；8. bindcancel：取消裁剪触发事件作用：实现图片裁剪功能，支持固定比例裁剪，适用于头像裁剪、证件照裁剪等场景示例（WXML）：<image-cropper class="image-cropper" src="{{cropSrc}}" aspect-ratio="1:1" width="300" height="300" zoom bindcrop="onCropFinish"></image-cropper>JS：data: { cropSrc: "https:/example.com/temp-img.jpg" },onCropFinish(e) { console.log("裁剪后图片路径：", e.detail.tempFilePath);}WXSS：.image-cropper { width: 100%; padding: 20rpx; }适用场景：用户头像裁剪、证件照裁剪、商品图片裁剪、封面图裁剪等；兼容性：基础库2.27.0及以上支持；注意事项：1. 待裁剪图片地址src需符合小程序安全域名规范；2. 裁剪比例aspect-ratio可设为"1:1""4:3""16:9"等，也可传入数字（如1.5代表3:2）；3. 裁剪区域宽高需根据页面布局设置，保证裁剪体验；4. 裁剪后的图片为临时路径，需及时保存或上传
image-lazy（图片懒加载控件）class、id、style、hidden、mode1. src：string类型，图片真实地址（必填），支持网络图片、本地图片、临时文件路径；2. lazy-src：string类型，懒加载占位图地址（可选），未加载完成时显示，建议使用体积≤50KB的图片；3. lazy-threshold：number类型，预加载阈值（单位px），默认100。当图片顶部距离视口底部小于该值时开始加载；4. lazy-load：boolean类型，是否启用懒加载功能，默认true；5. error-src：string类型，图片加载失败时显示的备用图（可选）；6. fade-in：boolean类型，图片加载完成后是否显示渐入动画，默认true；7. duration：number类型，渐入动画时长（单位ms），默认300；8. bindlazyload：图片开始懒加载时触发事件；9. bindload：图片加载完成时触发事件，回调含width（图片宽度）、height（图片高度）；10. binderror：图片加载失败时触发事件，回调含errMsg（错误信息）作用：优化长列表或多图片页面的加载性能，仅当图片进入或即将进入视口时才加载真实图片，减少初始加载流量和时间，提升页面渲染速度和用户体验示例（WXML）：<scroll-view class="goods-scroll" scroll-y> <view class="goods-item" wx:for="{{goodsList}}" wx:key="id"> <image-lazy class="goods-img" src="{{item.imgUrl}}" lazy-src="images/lazy-placeholder.png" lazy-threshold="200" mode="aspectFill" fade-in duration="500" error-src="images/error-img.png" bindload="onGoodsImgLoad" binderror="onGoodsImgError" > <view class="goods-name">{{item.name}}</view> <view><scroll-view>JS：Page({ data: { goodsList: [* 商品列表数据，含imgUrl等字段 */] }, onGoodsImgLoad(e) { console.log("商品图片加载完成：", e.detail.src, "，尺寸：", e.detail.width, "×", e.detail.height); }, onGoodsImgError(e) { console.error("商品图片加载失败：", e.detail.errMsg); }})WXSS：.goods-scroll { width: 100%; height: 100vh;}.goods-item { padding: 16rpx; box-sizing: border-box;}.goods-img { width: 100%; height: 300rpx; border-radius: 8rpx; overflow: hidden;}适用场景：商品列表、资讯/文章列表配图、瀑布流图片展示、相册列表、长表单中的图片预览等多图片场景；兼容性：基础库2.24.0及以上支持；注意事项：1. 真实图片src需符合小程序安全域名规范，本地图片需放在static目录下；2. 占位图lazy-src建议使用本地图片，避免占位图本身也需要网络加载；3. 预加载阈值lazy-threshold可根据页面滚动速度调整，滚动较快时建议增大（如200-300px），确保图片提前加载完成；4. 结合scroll-view使用时，需确保scroll-view的scroll-y/scroll-x属性正确设置，否则可能导致懒加载判断异常；5. 图片mode需根据展示需求选择，建议使用aspectFill/aspectFit避免图片变形；6. 加载失败时会显示error-src，若未设置则显示占位图，可在binderror中处理重试逻辑（如重新设置src）；7. 页面隐藏时，已触发加载的图片会继续加载，未触发的会暂停，页面重新显示时恢复判断
image-preview（图片预览控件）class、id、style、hidden1. urls：array类型，预览图片地址列表，必填；2. current：number类型，当前预览图片索引，默认0；3. show-indicator：boolean类型，是否显示指示器，默认true；4. enable-zoom：boolean类型，是否允许缩放，默认true；5. bindclose：预览关闭触发事件；6. bindchange：预览图片切换触发事件作用：实现图片预览功能，支持多图切换、缩放，替代wx.previewImage API的自定义封装示例（WXML）：<image-preview class="image-preview" urls="{{imageUrls}}" current="{{currentIndex}}" show-indicator bindclose="closePreview"></image-preview>JS：data: { imageUrls: ["https:/example.com/img1.jpg", "https://example.com/img2.jpg"], currentIndex: 0},closePreview() { this.setData({ showPreview: false }); }WXSS：.image-preview { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; }适用场景：商品图片预览、相册图片预览、详情页图片查看等；兼容性：基础库2.19.0及以上支持；注意事项：1. urls数组中的图片地址需符合小程序安全域名规范；2. current索引需在urls数组长度范围内；3. enable-zoom为true时，用户可双指缩放图片；4. 预览控件默认全屏显示，需通过z-index保证层级最高
image-upload（图片上传控件）class、id、style、hidden1. count：number类型，最大上传数量，默认1；2. size-type：array类型，图片尺寸类型，可选["original","compressed"]，默认["compressed"]；3. source-type：array类型，图片来源，可选["album","camera"]，默认两者都选；4. files：array类型，已上传图片列表，默认[]；5. accept：string类型，接受的文件类型，默认"image"；6. bindchoose：选择图片触发事件；7. binddelete：删除图片触发事件；8. bindupload：上传图片触发事件作用：集成图片选择、预览、删除、上传功能，标准化图片上传交互，替代手动调用wx.chooseImage等API示例（WXML）：<image-upload class="image-upload" count="3" files="{{uploadFiles}}" bindchoose="onChooseImage" binddelete="onDeleteImage" bindupload="onUploadImage"></image-upload>JS：data: { uploadFiles: [] },onChooseImage(e) { console.log("选择的图片：", e.detail.tempFiles); },onDeleteImage(e) { console.log("删除的图片索引：", e.detail.index); },onUploadImage(e) { console.log("上传的图片信息：", e.detail.file); }WXSS：.image-upload { display: flex; flex-wrap: wrap; gap: 20rpx; padding: 20rpx; }.image-upload .upload-item { width: 120rpx; height: 120rpx; border: 1rpx dashed #eee; display: flex; align-items: center; justify-content: center; }适用场景：头像上传、商品图片上传、订单凭证上传、意见反馈图片上传、表单附件上传等；兼容性：基础库1.9.0及以上支持；注意事项：1. 最大上传数量count建议不超过9张，符合微信交互规范；2. 需在小程序后台配置上传域名，否则上传失败；3. 大图片建议选择compressed压缩类型，提升上传速度；4. 已上传图片列表files需按指定格式（含url等字段）传入，确保预览正常；5. 可结合后端接口实现图片上传，在bindupload事件中处理上传逻辑
image-viewer（图片查看器控件）class、id、style、hidden1. urls：array类型，图片地址列表，必填；2. model-value：number类型，当前查看的图片索引，支持双向绑定，默认0；3. show-index：boolean类型，是否显示图片索引（如1/5），默认true；4. show-close：boolean类型，是否显示关闭按钮，默认true；5. enable-zoom：boolean类型，是否允许双指缩放，默认true；6. enable-swipe：boolean类型，是否允许左右滑动切换图片，默认true；7. loop：boolean类型，是否支持循环切换，默认true；8. bindclose：关闭查看器触发事件；9. bindchange：切换图片触发事件，回调含current（当前索引）作用：增强版图片查看器，支持多图切换、缩放、循环浏览，集成索引显示和关闭按钮，替代wx.previewImage的基础功能示例（WXML）：<view class="image-list"> <image wx:for="{{imageUrls}}" wx:key="index" src="{{item}}" class="image-item" data-index="{{index}}" bindtap="openImageViewer" ><view><image-viewer class="image-viewer" urls="{{imageUrls}}" model-value="{{currentImageIndex}}" show-index show-close bindclose="closeImageViewer"><image-viewer>JS：Page({ data: { imageUrls: [ "https://example.com/img1.jpg", "https:/example.com/img2.jpg", "https:/example.com/img3.jpg" ], currentImageIndex: 0, showViewer: false }, openImageViewer(e) { const index = e.currentTarget.dataset.index; this.setData({ currentImageIndex: index, showViewer: true }); }, closeImageViewer() { this.setData({ showViewer: false }); }})WXSS：.image-list { display: flex; flex-wrap: wrap; gap: 10rpx; padding: 20rpx;}.image-item { width: calc(33.333% - 7rpx); height: 180rpx; border-radius: 8rpx; object-fit: cover;}.image-viewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999;}适用场景：商品详情图片查看、用户相册图片预览、文章配图查看、订单凭证图片查看等多图浏览场景；兼容性：基础库2.24.0及以上支持；注意事项：1. urls数组中的图片地址需符合小程序安全域名规范，否则无法加载；2. 循环切换loop为true时，最后一张图片向右滑动可切换到第一张；3. 允许缩放时，用户可通过双指缩放图片，也可双击放大/缩小；4. 关闭按钮默认位于右上角，可通过自定义样式调整位置和样式；5. 图片索引显示格式为"当前索引/总数量"，帮助用户了解浏览进度
infinite-scroll（无限滚动控件）class、id、style、hidden1. loading：boolean类型，是否加载中，默认false；<br>2. has-more：boolean类型，是否有更多数据，默认true；<br>3. threshold：number类型，触发加载的距离（px），默认50；<br>4. bindloadmore：触底加载更多触发事件作用：实现列表触底自动加载更多，无需手动监听滚动<br>示例（WXML）：<br><infinite-scroll class="infinite-list" loading="{{loading}}" has-more="{{hasMore}}" bindloadmore="loadMore"><br> <view class="item" wx:for="{{list}}" wx:key="index">{{item}}</view><br></infinite-scroll><br>JS：<br>loadMore() {<br> if (this.data.loading) return;<br> this.setData({ loading: true });<br> setTimeout(() => {<br> const newData = Array(10).fill('加载的新数据' + this.data.page);<br> this.setData({<br> list: [...this.data.list, ...newData],<br> page: this.data.page + 1,<br> loading: false,<br> hasMore: this.data.page < 5 // 模拟5页后无更多<br> });<br> }, 1000);<br>}<br>WXSS：<br>.infinite-list { width: 100%; height: 600rpx; background: #f5f5f5; }适用场景：商品列表、聊天记录、订单列表等长列表加载；<br>兼容性：基础库2.22.0及以上支持；<br>注意事项：1. has-more为false时停止触发加载；2. threshold可调整触底触发灵敏度；3. 需防止重复加载（加loading锁）
input（输入框控件）1. 基础属性：class、id、style、hidden、data-*、bindinput、bindblur、bindfocus2. 特有属性：value、type、placeholder、placeholder-style、placeholder-class、disabled、maxlength、focus、password1. value：string类型，输入框的初始值，默认空；2. type：string类型，输入框类型，可选值"text"（文本）、"number"（数字）、"idcard"（身份证）、"digit"（带小数点数字）、"password"（密码），默认"text"；3. placeholder：string类型，输入提示文本，默认空；4. placeholder-style：string类型， placeholder的内联样式；5. placeholder-class：string类型， placeholder的样式类，默认"input-placeholder"；6. disabled：boolean类型，是否禁用输入框，默认false；7. maxlength：number类型，最大输入长度，默认140；8. focus：boolean类型，是否自动获取焦点，默认false；9. password：boolean类型，是否显示为密码框（隐藏输入内容），默认false。1. 文本输入场景：作用：用于接收用户输入的文本信息（如用户名、密码、手机号、备注等），支持多种输入类型和输入事件监听；示例（WXML代码）：<!-- 不同类型的输入框 --> <input class="text-input" type="text" value="{{username}}" placeholder="请输入用户名" placeholder-style="color:#ccc; font-size:28rpx;" bindinput="handleUsernameInput" bindblur="handleUsernameBlur"></input> <input class="password-input" type="password" placeholder="请输入密码" placeholder-class="custom-placeholder" maxlength="20"></input> <input class="phone-input" type="number" placeholder="请输入手机号" maxlength="11" focus="{{true}}"></input> <!-- WXSS样式 --> .text-input, .password-input, .phone-input { width: 100%; height: 80rpx; border: 1rpx solid #eee; border-radius: 10rpx; padding: 0 20rpx; margin: 10rpx 0; font-size: 32rpx; } .custom-placeholder { color: #999; font-size: 28rpx; }说明：展示了用户名文本输入框、密码输入框、手机号数字输入框，其中手机号输入框自动获取焦点，每个输入框都设置了占位提示和样式，监听输入和失焦事件。1. 适用场景：用户登录注册（用户名/密码）、表单填写（手机号、身份证、备注）、搜索框输入；2. 兼容性：全基础库版本支持；3. 注意事项：- 输入框默认是行内块级元素，需设置width和height来控制尺寸；- bindinput事件实时监听输入内容变化，bindblur监听失焦（输入完成），bindfocus监听聚焦；- type为"number"时，仍可能输入非数字字符（如+、-），需在逻辑层做输入校验；- focus属性设置为true时，页面加载时输入框会自动聚焦并弹出键盘，谨慎使用（避免影响用户体验）；- 输入框嵌套在form内时，可通过form的submit事件获取所有输入框的值。
label（标签控件）1. 基础属性：class、id、style、hidden、data-*、bindtap2. 特有属性：for1. for：string类型，关联控件的id，点击label时会触发关联控件的聚焦/选中事件；2. 注：for属性值需与关联控件的id完全一致，支持关联input、checkbox、radio等可交互控件。1. 控件关联场景：作用：用于关联表单控件，点击label文本可触发关联控件的交互（如输入框聚焦、复选框选中），提升用户操作体验；示例（WXML代码）：<!-- 关联input输入框 --> <view class="form-item"> <label for="phone-input" class="form-label">手机号：</label> <input id="phone-input" type="number" placeholder="请输入手机号" class="form-input"/> </view> <!-- 关联checkbox复选框 --> <view class="form-item"> <checkbox id="agree-checkbox"/> <label for="agree-checkbox" class="agree-label">同意用户协议和隐私政策</label> </view> <!-- 关联radio单选框 --> <view class="form-item"> <radio-group> <radio id="male-radio" value="male"/> <label for="male-radio" class="radio-label">男</label> <radio id="female-radio" value="female"/> <label for="female-radio" class="radio-label">女</label> </radio-group> </view> <!-- WXSS样式 --> .form-item { display: flex; align-items: center; margin: 15rpx 0; } .form-label { font-size: 32rpx; color: #333; width: 120rpx; } .form-input { flex: 1; height: 80rpx; border: 1rpx solid #eee; border-radius: 10rpx; padding: 0 20rpx; font-size: 32rpx; } .agree-label { font-size: 28rpx; color: #666; margin-left: 10rpx; } .radio-label { font-size: 32rpx; color: #333; margin: 0 20rpx 0 10rpx; }说明：label通过for属性分别关联input、checkbox、radio控件，点击label文本时，对应控件会触发聚焦（input）或选中（checkbox/radio）事件，无需精准点击控件本身，提升操作便捷性。1. 适用场景：表单控件的文本关联（如输入框标签、复选框协议文本、单选框选项文本）；2. 兼容性：全基础库版本支持；3. 注意事项：- for属性值必须与关联控件的id完全匹配（区分大小写），否则关联失效；- 一个label仅能关联一个控件，多个控件需分别设置label；- 关联checkbox/radio时，建议将label放在控件右侧，符合用户阅读和操作习惯；- label本身无特殊样式，需通过class自定义文本样式；- 点击label触发的事件与直接点击关联控件一致，可通过控件本身的事件监听处理逻辑。
live-player（直播播放器）1. 基础属性：class、id、style、hidden、data-*、bindstatechange、binderror、bindfullscreenchange2. 特有属性：src、mode、autoplay、muted、enable-fullscreen、orientation、object-fit、min-cache、max-cache1. src：string类型，直播流地址（支持RTMP、FLV等格式），必填；2. mode：string类型，播放模式，可选"live"（直播模式）、"RTC"（实时通话模式），默认"live"；3. autoplay：boolean类型，是否自动播放，默认false；4. muted：boolean类型，是否静音播放，默认false；5. enable-fullscreen：boolean类型，是否允许全屏播放，默认true；6. orientation：string类型，画面方向，可选"vertical"（垂直）、"horizontal"（水平），默认"vertical"；7. object-fit：string类型，画面填充模式，可选"contain"（适配）、"cover"（填充）、"fill"（拉伸），默认"contain"；8. min-cache/max-cache：number类型，最小/最大缓存时间，单位s，默认1/3；9. bindstatechange：监听播放器状态变化事件（如连接中、播放中、暂停）。1. 直播播放场景：作用：用于在小程序内播放直播流（如电商直播、教育直播、娱乐直播），支持直播模式和实时通话模式；示例（WXML代码）：<!-- 电商直播播放器 --> <live-player class="live-player" src="rtmp://example.com/live/stream123" mode="live" autoplay="{{false}}" muted="{{false}}" enable-fullscreen="{{true}}" orientation="vertical" object-fit="cover" min-cache="1" max-cache="2" bindstatechange="handleLiveStateChange" binderror="handleLiveError" bindfullscreenchange="handleLiveFullScreenChange"></live-player> <!-- 直播控制按钮 --> <view class="live-control"> <button bindtap="handleLivePlayPause">{{isPlaying ? '暂停' : '播放'}}</button> <button bindtap="handleLiveMute">{{isMuted ? '取消静音' : '静音'}}</button> <button bindtap="handleLiveFullScreen">全屏播放</button> </view> <!-- WXSS样式 --> .live-player { width: 100%; height: 400rpx; background: #000; } .live-control { display: flex; gap: 20rpx; padding: 20rpx; justify-content: center; } .live-control button { flex: 1; height: 80rpx; line-height: 80rpx; font-size: 32rpx; }说明：live-player播放RTMP格式的直播流，采用直播模式、垂直画面、填充式显示，设置最小缓存1s、最大缓存2s；下方添加播放/暂停、静音/取消静音、全屏播放三个控制按钮，通过JS逻辑控制播放器状态，监听状态变化和错误事件。1. 适用场景：电商直播、教育直播、娱乐直播、实时通话（RTC模式）；2. 兼容性：基础库2.9.0及以上版本支持，部分属性（如RTC模式）需更高版本；3. 注意事项：- 直播流地址需符合微信小程序的要求，支持RTMP、FLV等主流直播格式，网络流需配置合法域名；- 直播功能需在小程序后台申请开通“直播”类目，否则无法正常播放；- autoplay默认禁止自动播放，需用户手动触发播放（如点击播放按钮），muted=true时可能允许自动播放；- 播放器为原生组件，层级较高，如需叠加控制按钮，需使用cover-view和cover-image；- 状态变化事件（bindstatechange）返回的状态码可用于判断播放器当前状态（如0：连接中、1：播放中、2：暂停等）；- 错误事件（binderror）返回错误码和错误信息，可用于排查播放问题（如流地址错误、网络异常）；- RTC模式适用于实时通话场景（如视频会议、一对一通话），需配合live-pusher（推流）控件使用；- 建议在播放前检查用户网络状态，避免在弱网环境下播放导致体验不佳。
live-pusher（直播推流器）1. 基础属性：class、id、style、hidden、data-*、bindstatechange、binderror、bindnetstatus2. 特有属性：url、mode、autopush、muted、enable-camera、enable-mic、enable-agc、enable-ans、orientation、beauty、whiten1. url：string类型，推流地址（支持RTMP格式），必填；2. mode：string类型，推流模式，可选"live"（直播模式）、"RTC"（实时通话模式），默认"live"；3. autopush：boolean类型，是否自动推流，默认false；4. muted：boolean类型，是否静音推流（关闭麦克风），默认false；5. enable-camera：boolean类型，是否启用摄像头，默认true；6. enable-mic：boolean类型，是否启用麦克风，默认true；7. enable-agc：boolean类型，是否开启自动增益（声音），默认false；8. enable-ans：boolean类型，是否开启噪声抑制，默认false；9. orientation：string类型，画面方向，可选"vertical"（垂直）、"horizontal"（水平），默认"vertical"；10. beauty/whiten：number类型，美颜/美白程度（0-9），默认0（关闭）。1. 直播推流场景：作用：用于在小程序内进行直播推流（如主播开播），支持摄像头画面采集、麦克风音频采集、美颜美白等功能，可配合live-player实现直播互动；示例（WXML代码）：<!-- 直播推流器（主播端） --> <live-pusher class="live-pusher" url="rtmp://example.com/push/stream456" mode="live" autopush="{{false}}" muted="{{false}}" enable-camera="{{true}}" enable-mic="{{true}}" enable-agc="{{true}}" enable-ans="{{true}}" orientation="vertical" beauty="{{5}}" whiten="{{3}}" bindstatechange="handlePusherStateChange" binderror="handlePusherError" bindnetstatus="handlePusherNetStatus"></live-pusher> <!-- 推流控制按钮 --> <view class="pusher-control"> <button bindtap="handlePusherStartStop">{{isPushing ? '停止推流' : '开始推流'}}</button> <button bindtap="handlePusherMute">{{isMuted ? '开启麦克风' : '关闭麦克风'}}</button> <button bindtap="handleSwitchCamera">切换摄像头</button> <button bindtap="handleAdjustBeauty">调整美颜程度</button> </view> <!-- WXSS样式 --> .live-pusher { width: 100%; height: 400rpx; background: #000; } .pusher-control { display: flex; flex-wrap: wrap; gap: 20rpx; padding: 20rpx; } .pusher-control button { flex: 1 1 calc(50% - 10rpx); height: 80rpx; line-height: 80rpx; font-size: 32rpx; }说明：live-pusher推流到RTMP格式的推流地址，开启自动增益和噪声抑制，设置美颜程度5级、美白程度3级；下方添加开始/停止推流、开关麦克风、切换摄像头、调整美颜程度四个控制按钮，通过JS逻辑控制推流器状态，监听状态变化、错误和网络状态事件。1. 适用场景：主播直播推流、实时通话推流（RTC模式）、短视频录制推流；2. 兼容性：基础库2.9.0及以上版本支持，部分属性（如RTC模式）需更高版本；3. 注意事项：- 推流地址需由后端服务生成，支持RTMP格式，需配置小程序合法域名；- 推流功能需在小程序后台申请开通“直播”类目，否则无法正常推流；- autopush默认禁止自动推流，需用户手动触发推流（如点击开始推流按钮）；- 启用摄像头和麦克风时，需获取用户授权（摄像头权限：scope.camera，麦克风权限：scope.record），需在app.json中配置permission字段；- 美颜和美白程度范围为0-9，数值越大效果越明显，可根据需求动态调整；- 网络状态事件（bindnetstatus）可获取当前网络带宽、延迟等信息，可用于提示用户网络状态；- 切换摄像头、调整美颜等功能需通过wx.createLivePusherContext API实现，无法直接通过属性控制；- 推流过程中需保持小程序在前台，后台推流需特殊配置，且可能受系统限制；- 建议在推流前检查用户设备权限和网络状态，确保推流顺利进行。
loading（加载中控件）class、id、style、hidden1. type：string类型，加载图标类型，可选"circle"/"spinner"/"line"，默认"circle"；2. size：number类型，图标大小（px），默认30；3. color：string类型，图标颜色，默认#000；4. text：string类型，加载提示文字，可选；5. bindfinish：加载动画结束触发事件（仅line类型支持）作用：展示加载中状态，用于数据请求、操作处理等等待场景示例（WXML）：<loading class="loading" type="circle" size="40" color="#07c160" text="加载中..."></loading>WXSS：.loading { display: flex; flex-direction: column; align-items: center; padding: 50rpx; }适用场景：数据请求加载、页面初始化加载、提交表单加载、操作处理中提示等；兼容性：基础库1.0.0及以上支持；注意事项：1. 加载完成后及时隐藏控件；2. 提示文字建议简短（4-6字）；3. 避免多个loading控件同时显示，造成视觉混乱
loading-mask（加载遮罩控件）class、id、style、hidden1. show：boolean类型，是否显示遮罩，默认false；2. type：string类型，加载图标类型，可选"circle"/"spinner"/"line"，默认"circle"；3. text：string类型，加载提示文字，默认"加载中..."；4. mask-color：string类型，遮罩背景色，默认rgba(0,0,0,0.5)；5. color：string类型，加载图标和文字颜色，默认#fff；6. bindfinish：加载动画结束触发事件（仅line类型支持）作用：集成加载动画和遮罩层，用于页面级或组件级加载中状态，替代手动组合loading和overlay示例（WXML）：<loading-mask class="loading-mask" show="{{isLoading}}" type="circle" text="加载中，请稍候..."></loading-mask>JS：data: { isLoading: true },onLoad() { / 模拟数据请求 setTimeout(() => { this.setData({ isLoading: false }); }, 2000);}WXSS：.loading-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; }适用场景：页面初始化加载、表单提交加载、数据刷新加载、大文件上传/下载加载等；兼容性：基础库2.10.0及以上支持；注意事项：1. 遮罩层层级z-index建议设置较高（如9999），避免被其他元素遮挡；2. 提示文字text建议简洁明了，不超过8字；3. 加载完成后必须将show设为false，隐藏遮罩；4. 页面级加载建议使用fixed定位，组件级加载建议使用absolute定位；5. 避免多个loading-mask同时显示，造成视觉混乱
loadmore（加载更多控件）class、id、style、hidden1. status：string类型，加载状态，可选"loading"/"nomore"/"error"，默认"loading"；<br>2. loading-text：string类型，加载文字，默认"加载中..."；<br>3. nomore-text：string类型，无更多文字，默认"暂无更多数据"；<br>4. error-text：string类型，加载失败文字，默认"加载失败，点击重试"；<br>5. bindretry：加载失败点击重试触发事件作用：标准化列表底部加载状态，集成加载中、无更多、加载失败三种状态，自动切换样式<br>示例（WXML）：<br><loadmore class="loadmore" status="{{loadStatus}}" bindretry="retryLoad"></loadmore><br>JS：<br>data: {loadStatus:"loading"},<br>retryLoad(){this.setData({loadStatus:"loading"});/* 重新请求数据 */}<br>WXSS：<br>.loadmore { padding: 20rpx; text-align: center; font-size: 28rpx; color: #999; }适用场景：商品列表、订单列表、资讯列表、聊天记录等所有长列表底部加载；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. 数据请求完成后，根据是否有更多数据切换status为nomore/loading；2. 加载失败时，点击控件任意区域触发retry事件；3. 文字建议简短，符合小程序交互规范
map（地图控件）1. 基础属性：class、id、style、hidden、data-*、bindmarkertap、bindregionchange、bindtap2. 特有属性：longitude、latitude、scale、markers、polyline、circles、controls、show-location、enable-scroll、enable-rotate1. longitude/latitude：number类型，地图中心点的经度/纬度，必填；2. scale：number类型，地图缩放级别，范围5-18，默认16；3. markers：array类型，地图标记点（如POI、位置标记），每个标记点包含id、longitude、latitude、title等属性；4. polyline：array类型，地图折线（如路线规划），包含points（坐标数组）、color、width等属性；5. circles：array类型，地图圆形区域（如范围圈定），包含longitude、latitude、radius（半径）等属性；6. controls：array类型，地图控件（如定位按钮），包含position（位置）、iconPath（图标路径）等属性；7. show-location：boolean类型，是否显示当前定位位置，默认false；8. enable-scroll：boolean类型，是否允许地图滚动，默认true；9. enable-rotate：boolean类型，是否允许地图旋转，默认false。1. 地图展示场景：作用：用于展示地图、标记位置、路线规划、范围圈定等，适用于定位服务、地图导航、周边POI展示等场景；示例（WXML代码）：<!-- 带标记点和定位的地图 --> <map class="map-container" longitude="{{centerLongitude}}" latitude="{{centerLatitude}}" scale="16" markers="{{markers}}" polyline="{{polyline}}" circles="{{circles}}" show-location="{{true}}" enable-scroll="{{true}}" enable-rotate="{{false}}" bindmarkertap="handleMarkerTap" bindregionchange="handleRegionChange"></map> <!-- WXSS样式 --> .map-container { width: 100%; height: 400rpx; margin: 20rpx 0; } <!-- JS数据（示例） --> // Page({ // data: { // centerLongitude: 116.404267, // 北京经度 // centerLatitude: 39.915185, // 北京纬度 // markers: [ // { // id: 1, // longitude: 116.404267, // latitude: 39.915185, // title: "天安门", // iconPath: "/images/marker.png", // width: 40, // height: 40 // } // ], // polyline: [ // { // points: [ // { longitude: 116.404267, latitude: 39.915185 }, // { longitude: 116.414267, latitude: 39.925185 } // ], // color: "#FF4444", // width: 5, // dottedLine: false // } // ], // circles: [ // { // longitude: 116.404267, // latitude: 39.915185, // radius: 1000, // 半径1000米 // color: "rgba(255,68,68,0.2)", // fillColor: "rgba(255,68,68,0.1)" // } // ] // }, // // 事件处理函数... // })说明：map控件设置北京为中心点，显示当前定位位置，添加了天安门标记点、一条折线（模拟路线）和一个圆形区域（范围1000米）；监听标记点点击事件和地图区域变化事件（如拖动、缩放），可用于展示周边信息或更新地图数据。1. 适用场景：定位服务、周边POI展示、路线规划、地图导航、范围筛选（如周边商家）；2. 兼容性：全基础库版本支持；3. 注意事项：- 地图控件必须设置固定的width和height，否则无法正常显示；- longitude和latitude为必填项，需提供有效的经纬度坐标（可通过wx.getLocation API获取当前定位）；- markers的id必须唯一，用于区分不同标记点，点击标记点会触发bindmarkertap事件，返回标记点id；- 地图控件为原生组件，层级较高，无法通过z-index属性调整层级，如需在地图上叠加内容，可使用map的controls属性或cover-view组件；- 获取当前定位需调用wx.getLocation API，并在app.json中配置permission字段（"scope.userLocation"）；- 复杂地图功能（如逆地理编码、POI搜索）需调用微信地图服务API，或集成第三方地图SDK；- 地图缩放级别scale建议设置14-18，级别越高显示越精细，范围越小。
movable-view（可移动视图）class、id、style、hidden1. x：number类型，水平偏移量（px），默认0；<br>2. y：number类型，垂直偏移量（px），默认0；<br>3. direction：string类型，可移动方向，可选"all/vertical/horizontal/none"，默认"none"；<br>4. inertia：boolean类型，是否带惯性，默认false；<br>5. out-of-bounds：boolean类型，是否允许超出父容器，默认false；<br>6. bindchange：拖动时触发事件，返回当前x、y坐标作用：实现可拖动的视图元素，需嵌套在movable-area容器中使用<br>示例（WXML）：<br><movable-area class="area" style="width: 400rpx; height: 400rpx; background: #f5f5f5;"><br> <movable-view class="view" x="{{x}}" y="{{y}}" direction="all" inertia>可拖动</movable-view><br></movable-area><br>WXSS：<br>.area { border-radius: 10rpx; margin: 20rpx auto; }<br>.view { width: 80rpx; height: 80rpx; background: #07c160; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24rpx; }适用场景：拖拽验证、自定义滑块、悬浮可拖动按钮、拼图游戏等；<br>兼容性：基础库1.2.0及以上支持；<br>注意事项：1. 必须作为movable-area的直接子元素；2. 父容器需设置固定宽高；3. 惯性拖动需结合业务限制边界；4. 样式仅支持通用基础属性
navigation-bar（自定义导航栏）class、id、style、hidden1. title：string类型，导航栏标题；<br>2. title-color：string类型，标题颜色，默认#000；<br>3. background-color：string类型，背景色，默认#fff；<br>4. front-color：string类型，前景色（状态栏文字），可选"black"/"white"；<br>5. bindtap：点击导航栏触发事件作用：替代原生导航栏，实现自定义样式的顶部导航（如渐变背景、自定义按钮）<br>示例（WXML）：<br><navigation-bar class="nav-bar" title="我的页面" title-color="#fff" background-color="#07c160" front-color="white"></navigation-bar><br>WXSS：<br>.nav-bar { height: 44px; line-height: 44px; text-align: center; }适用场景：个性化页面导航、品牌化导航栏、带自定义按钮的导航等；<br>兼容性：基础库2.10.0及以上支持；<br>注意事项：1. 需在app.json中配置"navigationStyle": "custom"；2. 需适配不同机型的状态栏高度；3. 自定义按钮需通过slot插槽实现
navigator（导航组件）1. 基础属性：class、id、style、hidden、data-*、bindtap2. 特有属性：url、open-type、delta、app-id、path、extra-data、redirect、hover-class、hover-stop-propagation1. url：string类型，跳转目标页面路径（相对路径），open-type为非app/miniProgram时必填；2. open-type：string类型，跳转方式，可选值如"navigateTo"（保留当前页跳转）、"redirectTo"（关闭当前页跳转）、"switchTab"（切换tab页）、"reLaunch"（重启小程序）、"navigateBack"（返回上一页）等，默认"navigateTo"；3. delta：number类型，返回上一页的层级，仅open-type="navigateBack"时有效，默认1；4. app-id：string类型，跳转目标小程序的appId，仅open-type="miniProgram"时有效；5. path：string类型，跳转目标小程序的页面路径，仅open-type="miniProgram"时有效；6. hover-class：string类型，点击态样式类，默认"navigator-hover"。1. 页面导航场景：作用：用于实现小程序内部页面跳转、tab页切换、返回上一页，以及跳转到其他小程序，是小程序核心的导航组件；示例（WXML代码）：<!-- 保留当前页跳转（普通页面） --> <navigator url="/pages/detail/detail?id=101" class="nav-item" hover-class="nav-hover"> 跳转到详情页（保留当前页） </navigator> <!-- 关闭当前页跳转 --> <navigator url="/pages/login/login" open-type="redirectTo" class="nav-item"> 跳转到登录页（关闭当前页） </navigator> <!-- 切换tab页 --> <navigator url="/pages/index/index" open-type="switchTab" class="nav-item"> 切换到首页（tab页） </navigator> <!-- 返回上一页（返回2层） --> <navigator open-type="navigateBack" delta="2" class="nav-item"> 返回上两页 </navigator> <!-- 跳转到其他小程序 --> <navigator app-id="wx1234567890abcdef" path="/pages/index/index" open-type="miniProgram" class="nav-item"> 跳转到目标小程序 </navigator> <!-- WXSS样式 --> .nav-item { display: block; height: 80rpx; line-height: 80rpx; padding: 0 20rpx; border-bottom: 1rpx solid #eee; font-size: 32rpx; color: #1E88E5; } .nav-hover { background: #f5f5f5; }说明：展示了5种常见的导航场景，包括保留当前页跳转、关闭当前页跳转、切换tab页、返回上两页，以及跳转到其他小程序，通过open-type指定不同跳转方式，url或app-id+path指定目标地址。1. 适用场景：页面间导航跳转、tab页切换、返回历史页面、小程序间跳转；2. 兼容性：open-type="miniProgram"需基础库2.0.7及以上版本；3. 注意事项：- 跳转tab页必须使用open-type="switchTab"，且url必须是app.json中配置的tab页面路径；- navigateTo有页面层级限制（最多10层），超过层级需使用reLaunch或redirectTo；- navigateBack的delta值不能超过已打开的页面层级，否则会返回首页；- 跳转到其他小程序时，需确保目标小程序已在微信后台配置“关联小程序”，且app-id正确；- 导航组件默认有下划线，可通过text-decoration: none样式去除；- 点击态hover-class默认有样式，可自定义或设置为"none"取消点击态。
notice-bar（公告栏控件）class、id、style、hidden1. text：string类型，公告文字，必填；2. direction：string类型，滚动方向，可选"left""right"，默认"left"；3. speed：number类型，滚动速度（pxs），默认50；4. delay：number类型，延迟滚动时间（s），默认1；5. closable：boolean类型，是否可关闭，默认false；6. bindclose：关闭触发事件作用：展示公告信息，支持滚动播放，用于活动通知、系统公告等示例（WXML）：<notice-bar class="notice-bar" text="【限时活动】全场商品8折优惠，截止日期2024年12月31日" direction="left" speed="60" closable bindclose="closeNotice"></notice-bar>JS：closeNotice() { this.setData({ showNotice: false }); }WXSS：.notice-bar { background-color: #fffbe8; padding: 15rpx; border-left: 4rpx solid #ffcc00; }适用场景：首页公告、活动通知、系统提示、重要信息推送等；兼容性：基础库2.4.0及以上支持；注意事项：1. 公告文字建议不超过50字，避免滚动时间过长；2. 滚动方向根据页面布局选择，左侧入口页面建议left方向；3. closable为true时，点击关闭按钮隐藏公告
notification（通知提示控件）class、id、style、hidden1. show：boolean类型，是否显示通知，默认false；2. type：string类型，通知类型，可选"success"/"warning"/"error"/"info"，默认"info"；3. message：string类型，通知内容，必填；4. duration：number类型，显示时长（毫秒），默认3000；5. position：string类型，显示位置，可选"top"/"bottom"，默认"top"；6. closable：boolean类型，是否可关闭，默认false；7. bindclose：关闭通知触发事件作用：展示全局通知提示，支持自动关闭，替代wx.showToast的复杂场景需求示例（WXML）：<notification class="notification" show="{{showNotify}}" type="success" message="操作成功" duration="2000" position="top"></notification>JS：showNotification() { this.setData({ showNotify: true }); setTimeout(() => { this.setData({ showNotify: false }); }, 2000);}WXSS：.notification { position: fixed; top: 88rpx; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 15rpx 30rpx; border-radius: 8rpx; }适用场景：操作结果提示、系统通知、状态变更提示、异常提醒等；兼容性：基础库2.16.0及以上支持；注意事项：1. 通知内容message建议简洁，不超过20字；2. 显示时长duration根据内容长度调整，重要通知可适当延长；3. 位置position为top时需避开导航栏，bottom时避开tabbar；4. 同一时间建议只显示一个通知，避免重叠；5. 不同type对应不同默认颜色，可通过自定义样式覆盖
number-input（数字输入控件）class、id、style、hidden1. value：number类型，输入值，默认0；2. min：number类型，最小值，默认0；3. max：number类型，最大值，默认100；4. step：number类型，步长，默认1；5. decimal-length：number类型，保留小数位数，默认0；6. show-controls：boolean类型，是否显示加减控件，默认true；7. bindchange：数值变化触发事件，返回当前value作用：专门用于数字输入场景，集成加减控件和数值限制，避免手动处理输入格式校验示例（WXML）：<number-input class="number-input" value="{{count}}" min="1" max="10" step="1" show-controls bindchange="onCountChange"></number-input>JS：data: { count: 1 },onCountChange(e) { this.setData({ count: e.detail.value });}WXSS：.number-input { display: flex; align-items: center; width: 200rpx; }.number-input .btn { width: 60rpx; height: 60rpx; line-height: 60rpx; text-align: center; border: 1rpx solid #eee; }.number-input input { flex: 1; height: 60rpx; text-align: center; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee; }适用场景：购物车商品数量调整、订单数量输入、评分输入、金额输入、参数配置等；兼容性：基础库2.14.0及以上支持；注意事项：1. 需根据业务场景合理设置min/max，如购物车数量min设为1；2. 小数输入时设置decimal-length，如金额保留2位小数；3. 禁用输入框手动输入可通过设置disabled属性（基础属性继承）；4. 步长设置需与小数位数匹配，避免出现异常数值
official-account（公众号关注组件）class、id、style、hidden1. appid：string类型，公众号appid，必填；<br>2. subscribe-text：string类型，关注提示文字，默认"关注公众号"作用：在小程序内展示公众号关注按钮，用户点击可直接关注，无需跳转<br>示例（WXML）：<br><official-account class="official-account" appid="wx1234567890abcdef" subscribe-text="关注我们的公众号"></official-account><br>WXSS：<br>.official-account { margin: 20rpx auto; display: block; }适用场景：小程序引流公众号、品牌推广、服务号关联等；<br>兼容性：基础库2.3.0及以上支持；<br>注意事项：1. 公众号需与小程序主体一致；2. 仅在微信客户端8.0.1及以上版本显示；3. 组件宽度默认自适应，不可自定义修改
open-data（开放数据展示）1. 基础属性：class、id、style、hidden2. 特有属性：type、open-gid、lang1. type：string类型，开放数据类型，可选值"userAvatarUrl"（用户头像）、"userNickName"（用户昵称）、"userGender"（用户性别）、"userCity"（用户城市）、"groupName"（群名称）等，必填；2. open-gid：string类型，群ID，仅type为"groupName"等群相关类型时必填；3. lang：string类型，语言类型，可选值"en"（英文）、"zh_CN"（简体中文）、"zh_TW"（繁体中文），默认"zh_CN"；注：无需用户授权即可展示部分开放数据，部分数据需在对应场景下（如群内打开）才能展示。1. 开放数据展示场景：作用：用于展示微信开放数据（如用户头像、昵称、性别、群名称等），无需用户手动授权（部分数据），简化数据获取流程；示例（WXML代码）：<!-- 展示用户信息 --> <view class="user-info"> <open-data class="user-avatar" type="userAvatarUrl"></open-data> <open-data class="user-nickname" type="userNickName" lang="zh_CN"></open-data> <open-data class="user-gender" type="userGender"></open-data> <open-data class="user-city" type="userCity"></open-data> </view> <!-- 展示群名称（需在群内打开小程序） --> <view class="group-info"> <open-data type="groupName" open-gid="{{openGid}}"></open-data> </view> <!-- WXSS样式 --> .user-info { display: flex; align-items: center; padding: 20rpx; border-bottom: 1rpx solid #eee; } .user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; display: block; } .user-nickname { font-size: 32rpx; color: #333; margin-right: 20rpx; } .user-gender, .user-city { font-size: 28rpx; color: #666; margin-right: 20rpx; } .group-info { padding: 20rpx; font-size: 32rpx; color: #333; }说明：open-data分别展示用户头像、昵称、性别、城市信息，无需用户授权即可获取；群名称展示需传入群ID（openGid），且需在对应群内打开小程序才能正常显示。1. 适用场景：展示用户基础信息（头像、昵称）、群信息（群名称）、公众号信息等，无需用户授权的场景；2. 兼容性：基础库2.3.0及以上版本支持；3. 注意事项：- 不同type对应不同的开放数据，需根据需求选择正确的type值，具体支持的type参考微信官方文档；- 用户头像（userAvatarUrl）默认是方形，可通过border-radius样式设置为圆形；- 群相关数据（如groupName）需在对应群内打开小程序才能展示，且需传入正确的open-gid（群ID）；- 部分开放数据（如用户手机号、详细地址）无法通过open-data获取，需通过对应开放能力（如getPhoneNumber）获取并获得用户授权；- open-data是原生组件，样式支持有限，复杂样式可能无法生效；- 语言类型（lang）仅对部分数据有效（如用户昵称的英文显示），需根据目标用户选择；- 无需调用API获取数据，组件会自动渲染对应开放数据，简化开发流程；- 展示用户信息时需符合微信用户信息保护规范，不得用于非法用途。
overlay（遮罩层控件）class、id、style、hidden1. show：boolean类型，是否显示遮罩，默认false；<br>2. mask-color：string类型，遮罩背景色，默认rgba(0,0,0,0.5)；<br>3. close-on-click：boolean类型，点击遮罩关闭，默认true；<br>4. z-index：number类型，层级，默认99；<br>5. bindclose：遮罩关闭触发事件作用：实现页面遮罩层，用于弹窗、浮层的背景遮罩，替代自定义遮罩样式<br>示例（WXML）：<br><overlay show="{{showMask}}" mask-color="rgba(0,0,0,0.6)" bindclose="closeMask"><br> <view class="popup">遮罩层弹窗内容</view><br></overlay><br>JS：<br>data: {showMask:false},<br>openMask(){this.setData({showMask:true})},<br>closeMask(){this.setData({showMask:false})}<br>WXSS：<br>.popup { width: 600rpx; background: #fff; border-radius:10rpx; padding:30rpx; margin:0 auto; margin-top: 300rpx; }适用场景：弹窗遮罩、浮层背景、操作确认遮罩、页面蒙层等；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. 遮罩层需设置position:fixed占满全屏；2. close-on-click为true时，点击遮罩区域自动触发关闭；3. 弹窗内容需设置相对定位，避免被遮罩层遮挡
page-container（页面容器）class、id、style、hidden1. show：boolean类型，是否显示容器，默认false；<br>2. round：boolean类型，是否圆角，默认false；<br>3. close-on-slideDown：boolean类型，下滑关闭，默认false；<br>4. bindbeforeenter：进入前触发；<br>5. bindclose：关闭时触发作用：实现从底部/右侧滑入的弹窗页面，替代自定义modal，交互更友好<br>示例（WXML）：<br><page-container class="page-container" show="{{showContainer}}" round close-on-slideDown bindclose="onContainerClose"><br> <view class="container-content">弹窗页面内容</view><br></page-container><br>WXSS：<br>.container-content { padding: 20rpx; height: 400rpx; }适用场景：底部弹窗表单、筛选页面、侧边栏菜单、临时操作页面等；<br>兼容性：基础库2.9.0及以上支持；<br>注意事项：1. 需通过show属性控制显示/隐藏；2. 容器默认从底部滑入，可通过animation属性修改动画；3. 高度建议不超过屏幕80%
picker（选择器控件）1. 基础属性：class、id、style、hidden、data-*、bindchange、bindcancel2. 特有属性：mode、range、range-key、value、start、end、fields、disabled1. mode：string类型，选择器模式，可选值"selector"（普通选择器）、"multiSelector"（多列选择器）、"time"（时间选择器）、"date"（日期选择器）、"region"（省市区选择器），默认"selector"；2. range：array类型，选择器的选项列表（mode为selector/time/date/region时格式不同），必填；3. range-key：string类型，当range为对象数组时，指定显示的字段名；4. value：array/number类型，选中项的索引（普通选择器为number，多列为array），默认0；5. start/end：string类型，时间/日期选择器的起始/结束范围；6. fields：string类型，日期选择器的显示字段（"year"、"month"、"day"），默认"day"；7. disabled：boolean类型，是否禁用，默认false。1. 选择器场景：作用：用于从预设选项中选择内容（如普通下拉选择、时间选择、日期选择、省市区选择），支持多种模式；示例（WXML代码）：<!-- 普通选择器（城市选择） --> <picker class="picker" mode="selector" range="{{cities}}" value="{{cityIndex}}" bindchange="handleCityChange"> <view class="picker-content"> 选择城市：{{cities[cityIndex]}} </view> </picker> <!-- 日期选择器 --> <picker class="picker" mode="date" start="2000-01-01" end="{{currentDate}}" fields="year-month-day" bindchange="handleDateChange"> <view class="picker-content"> 选择日期：{{selectedDate}} </view> </picker> <!-- 省市区选择器 --> <picker class="picker" mode="region" bindchange="handleRegionChange"> <view class="picker-content"> 选择省市区：{{selectedRegion.join('-')}} </view> </picker> <!-- WXSS样式 --> .picker { margin: 15rpx 0; } .picker-content { width: 100%; height: 80rpx; line-height: 80rpx; border: 1rpx solid #eee; border-radius: 10rpx; padding: 0 20rpx; font-size: 32rpx; color: #333; }说明：展示了三种常用模式的picker：普通城市选择器、日期选择器（起始2000年1月1日）、省市区选择器；点击picker的内容区域会弹出选择面板，选择完成后更新显示内容。1. 适用场景：普通下拉选择（城市、类型）、时间选择（预约时间）、日期选择（出生日期）、省市区选择（收货地址）；2. 兼容性：mode=region需基础库1.4.0及以上版本；3. 注意事项：- picker本身是透明的，需在内部放置view等控件作为显示内容，点击该内容才会弹出选择面板；- 不同mode对应的range格式不同：selector为普通数组，multiSelector为二维数组，time/date/region无需手动设置range；- 日期选择器的start/end格式为"yyyy-MM-dd"，时间选择器为"hh:mm"；- 省市区选择器的bindchange事件detail.value为数组，格式为["省","市","区"]；- 禁用状态下，点击picker不会弹出选择面板。
picker-multi-column（多列选择器）class、id、style、hidden1. range：array类型，多列数据数组（二维数组），必填；<br>2. value：array类型，选中值的索引数组，默认[0,0,...]；<br>3. bindchange：选择完成后触发事件，返回选中索引；<br>4. bindcolumnchange：某一列滚动时触发事件，返回列索引和当前值作用：支持多列联动选择（如省市区、年月日），提升选择效率<br>示例（WXML）：<br><picker-multi-column class="picker" range="{{multiRange}}" value="{{multiValue}}" bindchange="handlePickerChange" bindcolumnchange="handleColumnChange"></picker-multi-column><br>JS（数据）：<br>data: {<br> multiRange: [['北京','上海','广东'],['朝阳','海淀','浦东','广州']],<br> multiValue: [0,0]<br>}<br>WXSS：<br>.picker { padding: 20rpx; border: 1rpx solid #eee; border-radius: 8rpx; }适用场景：省市区选择、出生日期选择、时间区间选择等；<br>兼容性：基础库2.21.2及以上支持；<br>注意事项：1. range需为二维数组，每一项对应一列数据；2. value数组长度需与列数一致；3. 联动逻辑需在bindcolumnchange中处理（如选择省份后更新城市列数据）；4. 样式可通过外部WXSS自定义
picker-view（滚动选择器视图）1. 基础属性：class、id、style、hidden、data-*、bindchange、bindpickstart、bindpickend2. 特有属性：value、indicator-style、indicator-class、mask-style、mask-class、disabled1. value：array类型，选中项的索引数组（对应各列的选中索引），默认全0；2. indicator-style：string类型，选中框的内联样式；3. indicator-class：string类型，选中框的样式类；4. mask-style：string类型，遮罩层的内联样式；5. mask-class：string类型，遮罩层的样式类；6. disabled：boolean类型，是否禁用，默认false；7. bindchange：滚动选择结束后触发的事件，返回选中的索引数组；8. bindpickstart/bindpickend：滚动开始/结束时触发的事件。1. 内嵌滚动选择场景：作用：作为内嵌在页面中的滚动选择器，无需弹出面板，直接在页面内展示可滚动选择，支持多列选择；示例（WXML代码）：<!-- 多列滚动选择器（省市区选择） --> <view class="picker-view-container"> <text class="picker-title">选择省市区</text> <picker-view class="picker-view" value="{{pickerValue}}" bindchange="handlePickerChange" indicator-style="height: 80rpx; background: #f5f5f5;" mask-style="background: rgba(0,0,0,0.3);"> <picker-view-column> <view wx:for="{{provinces}}" wx:key="index" class="picker-item">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{cities}}" wx:key="index" class="picker-item">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{areas}}" wx:key="index" class="picker-item">{{item}}</view> </picker-view-column> </picker-view> </view> <!-- WXSS样式 --> .picker-view-container { padding: 20rpx; } .picker-title { font-size: 32rpx; color: #333; margin-bottom: 15rpx; display: block; } .picker-view { width: 100%; height: 400rpx; border: 1rpx solid #eee; border-radius: 10rpx; } .picker-item { height: 80rpx; line-height: 80rpx; text-align: center; font-size: 32rpx; color: #333; }说明：picker-view实现内嵌的省市区三列选择器，通过picker-view-column划分列，每列循环渲染对应选项；设置选中框样式为灰色背景，遮罩层为半透明黑色，滚动选择后通过bindchange获取选中索引，同步更新省市区数据。1. 适用场景：页面内嵌的多列选择（如省市区、出生日期、时间选择）、无需弹出面板的选择场景；2. 兼容性：全基础库版本支持；3. 注意事项：- 必须设置固定的width和height，否则无法正常显示；- 每一列选择项需放在picker-view-column内，picker-view内仅能嵌套picker-view-column；- value为数组类型，数组长度需与列数一致，每个元素对应对应列的选中索引；- 选中框样式通过indicator-style/indicator-class设置，默认有细边框样式；- 遮罩层仅在滚动时显示，可通过mask-style/mask-class自定义遮罩样式；- 滚动选择过程中会触发bindpickstart和bindpickend事件，可用于处理滚动状态变化；- 与picker的区别：picker需要点击触发弹出面板，picker-view直接内嵌在页面，适合需要实时展示选择界面的场景。
picker-view-column（滚动选择器列）1. 基础属性：class、id、style、hidden2. 无特有属性1. 无特有属性，仅作为picker-view的子组件，用于划分选择器的列；2. 作用：承载每一列的选择项，每一个picker-view-column对应选择器的一列。1. 滚动选择器列划分场景：作用：专门作为picker-view的子组件，用于分隔多列选择器的每一列，每列的选择项需放在该组件内；示例（WXML代码，结合picker-view使用）：<!-- 两列滚动选择器（时间选择：时-分） --> <picker-view class="time-picker" value="{{timeValue}}" bindchange="handleTimeChange"> <!-- 时列 --> <picker-view-column class="time-column"> <view wx:for="{{hours}}" wx:key="index" class="time-item">{{item}}时</view> </picker-view-column> <!-- 分隔符（非picker-view-column，仅用于视觉分隔） --> <view class="separator">:</view> <!-- 分列 --> <picker-view-column class="time-column"> <view wx:for="{{minutes}}" wx:key="index" class="time-item">{{item}}分</view> </picker-view-column> </picker-view> <!-- WXSS样式 --> .time-picker { width: 100%; height: 300rpx; display: flex; align-items: center; justify-content: center; } .time-column { width: 100rpx; height: 100%; } .time-item { height: 60rpx; line-height: 60rpx; text-align: center; font-size: 32rpx; } .separator { font-size: 32rpx; margin: 0 10rpx; color: #333; }说明：picker-view内包含两个picker-view-column，分别作为“时”和“分”列，中间添加普通view作为分隔符；每列通过wx:for循环渲染对应时间选项，实现时分两列选择功能。1. 适用场景：picker-view多列选择器的列划分，如省市区三列、时分秒三列、日期年月两列；2. 兼容性：全基础库版本支持；3. 注意事项：- 仅能作为picker-view的直接子组件，无法在其他组件内使用；- 一个picker-view内可包含多个picker-view-column，数量不限（根据选择列数决定）；- 每列的宽度和高度可通过class自定义，建议与picker-view的尺寸匹配；- 列内仅能放置view等普通组件作为选择项，选择项的样式可自由定义；- 列的滚动独立于其他列，选中索引通过picker-view的value属性控制；- 如需在列之间添加分隔符（如“:”“-”），可在picker-view内添加普通view，与picker-view-column并列放置。
popup（弹窗控件）class、id、style、hidden1. show：boolean类型，是否显示弹窗，默认false；2. title：string类型，弹窗标题，可选；3. content：string类型，弹窗内容，可选；4. placement：string类型，弹窗位置，可选"top"/"bottom"/"center"/"left"/"right"，默认"center"；5. mask：boolean类型，是否显示遮罩，默认true；6. mask-closeable：boolean类型，点击遮罩关闭弹窗，默认true；7. show-cancel：boolean类型，是否显示取消按钮，默认true；8. confirm-text：string类型，确认按钮文字，默认"确认"；9. cancel-text：string类型，取消按钮文字，默认"取消"；10. bindconfirm：点击确认按钮触发事件；11. bindcancel：点击取消按钮触发事件；12. bindclose：弹窗关闭触发事件作用：标准化弹窗组件，支持多位置布局、标题/内容配置和按钮交互，替代wx.showModal和自定义弹窗示例（WXML）：<popup class="popup" show="{{showPopup}}" title="确认删除" content="确定要删除这条记录吗？" placement="center" bindconfirm="onConfirmDelete" bindcancel="onCancelDelete"></popup>JS：data: { showPopup: false },onOpenPopup() { this.setData({ showPopup: true }); },onConfirmDelete() { / 处理删除逻辑 this.setData({ showPopup: false });},onCancelDelete() { this.setData({ showPopup: false });}WXSS：.popup .popup-content { padding: 30rpx; text-align: center; }.popup .popup-footer { display: flex; border-top: 1rpx solid #eee; margin-top: 20rpx; }适用场景：删除确认、信息提示、操作确认、表单填写弹窗、选择弹窗等；兼容性：基础库2.10.0及以上支持；注意事项：1. 根据业务场景选择合适的placement，如提示类弹窗选center，操作类弹窗选bottom；2. 弹窗内容较长时，可在content中嵌套scroll-view避免内容溢出；3. 不需要标题或取消按钮时，可通过设置title为空或show-cancel为false隐藏；4. 遮罩层默认会阻止页面滚动，提升用户体验；5. 可通过自定义样式修改弹窗宽度、背景色、按钮样式等
price（价格控件）class、id、style、hidden1. value：number类型，价格数值，必填；<br>2. symbol：string类型，货币符号，默认"¥"；<br>3. decimal：number类型，保留小数位数，默认2；<br>4. color：string类型，价格颜色，默认#f00；<br>5. old-value：number类型，原价数值，可选；<br>6. old-color：string类型，原价颜色，默认#999；<br>7. strike：boolean类型，原价是否加删除线，默认true作用：标准化价格展示，集成现价、原价、货币符号，自动处理小数位数和删除线<br>示例（WXML）：<br><price class="price" value="99.9" old-value="199.9" color="#f00" decimal="2"></price><br>WXSS：<br>.price { font-size: 32rpx; font-weight: bold; }<br>.price old { font-size: 24rpx; margin-left: 10rpx; }适用场景：商品价格、订单金额、优惠价格、充值金额等所有价格展示场景；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. value为0时建议做特殊展示（如"0元"）；2. 保留小数位数建议统一为2，符合电商规范；3. 原价仅在old-value有值时显示，否则自动隐藏；4. 价格数值需提前做格式化处理，避免出现多位小数
progress（进度条控件）1. 基础属性：class、id、style、hidden、data-*2. 特有属性：percent、show-info、border-radius、font-size、stroke-width、color、activeColor、backgroundColor、active、active-mode1. percent：number类型，进度百分比（0-100），必填；2. show-info：boolean类型，是否显示进度百分比文本，默认false；3. border-radius：boolean类型，是否显示圆角，默认false；4. font-size：number类型，进度文本字体大小，单位px；5. stroke-width：number类型，进度条宽度，单位px，默认6；6. color/activeColor：string类型，已完成进度的颜色，默认"#07C160"；7. backgroundColor：string类型，未完成进度的背景颜色，默认"#e9e9e9"；8. active：boolean类型，是否显示动画效果，默认false；9. active-mode：string类型，动画模式，可选"backwards"（从头开始）、"forwards"（保持末尾），默认"backwards"。1. 进度展示场景：作用：用于展示任务完成进度、文件上传/下载进度、视频播放进度等，支持进度文本和动画效果；示例（WXML代码）：<!-- 带进度文本的圆角进度条 --> <progress class="progress-item" percent="{{65}}" show-info="{{true}}" border-radius="{{true}}" font-size="24" stroke-width="8" activeColor="#1E88E5" backgroundColor="#f5f5f5"/> <!-- 带动画的进度条（文件上传中） --> <progress class="progress-item" percent="{{uploadPercent}}" show-info="{{true}}" active="{{true}}" active-mode="forwards" activeColor="#FF4444" stroke-width="6"/> <!-- 基础进度条（无文本） --> <progress class="progress-item" percent="{{30}}" color="#FFD700" stroke-width="4"/> <!-- WXSS样式 --> .progress-item { width: 100%; margin: 20rpx 0; padding: 0 20rpx; }说明：第一个进度条展示65%的进度，带圆角和进度文本；第二个用于文件上传场景，显示动态进度，动画结束后保持末尾状态；第三个为基础进度条，无文本，仅展示进度条样式。1. 适用场景：任务进度展示、文件上传/下载进度、视频/音频播放进度、加载进度；2. 兼容性：active、active-mode属性需基础库1.6.0及以上版本；3. 注意事项：- percent属性必须在0-100之间，超出范围会自动截断；- show-info开启后，进度文本默认显示在进度条右侧，字体大小可通过font-size调整；- 圆角效果仅在border-radius="true"时生效，提升视觉美观度；- active动画适用于动态更新进度的场景（如上传下载），静态进度不建议开启；- 进度条宽度通过stroke-width设置，单位为px，建议根据页面风格选择4-10px；- 颜色属性支持十六进制、RGB等格式，可自定义已完成和未完成部分的颜色，适配页面主题。
progress-circle（环形进度条控件）class、id、style、hidden1. percent：number类型，进度百分比（0-100），必填；2. size：number类型，控件尺寸（px），默认100；3. color：string类型，进度条颜色，默认#07c160；4. background-color：string类型，背景圆环颜色，默认#eee；5. border-width：number类型，进度条宽度，默认8；6. show-text：boolean类型，是否显示中心百分比文字，默认true；7. text-size：number类型，中心文字大小，默认16；8. bindfinish：进度达到100%触发事件作用：以环形样式展示进度，视觉效果更美观，适用于任务进度、加载进度等场景示例（WXML）：<progress-circle class="progress-circle" percent="{{progress}}" size="120" color="#07c160" show-text></progress-circle>JS：data: { progress: 65 },updateProgress() { this.setData({ progress: this.data.progress + 10 });}WXSS：.progress-circle { margin: 30rpx auto; display: block; }适用场景：任务完成进度、文件上传/下载进度、考试答题进度、会员等级进度等；兼容性：基础库2.22.0及以上支持；注意事项：1. percent值需控制在0-100之间，超出范围会显示异常；2. 控件尺寸size建议根据展示区域合理设置，避免过大或过小；3. 进度条宽度border-width需与尺寸匹配，保证视觉协调；4. 可通过动态修改percent值实现进度动画效果
pull-down-refresh（下拉刷新控件）class、id、style、hidden1. refreshing：boolean类型，是否正在刷新，默认false；<br>2. background-color：string类型，刷新区域背景色，默认#fff；<br>3. color：string类型，刷新图标颜色，默认#000；<br>4. bindrefresh：下拉刷新触发事件作用：实现页面下拉刷新功能，替代页面级onPullDownRefresh配置<br>示例（WXML）：<br><pull-down-refresh class="pull-refresh" refreshing="{{refreshing}}" bindrefresh="onPullRefresh"><br> <view class="list" wx:for="{{list}}" wx:key="index">{{item}}</view><br></pull-down-refresh><br>JS：<br>onPullRefresh() {<br> this.setData({ refreshing: true });<br> // 模拟请求数据<br> setTimeout(() => {<br> this.setData({ list: [...this.data.list, '新数据'], refreshing: false });<br> }, 1500);<br>}<br>WXSS：<br>.pull-refresh { width: 100%; height: 600rpx; }<br>.list { padding: 15rpx; border-bottom: 1rpx solid #eee; }适用场景：列表页下拉刷新、数据实时更新、内容刷新等；<br>兼容性：基础库2.20.0及以上支持；<br>注意事项：1. 需通过refreshing控制刷新状态；2. 刷新完成后必须将refreshing设为false；3. 可自定义刷新图标颜色和背景色
pull-refresh（下拉刷新控件）class、id、style、hidden1. enable：boolean类型，是否启用下拉刷新，默认true；2. threshold：number类型，下拉触发阈值（px），默认50；3. loading-text：string类型，刷新提示文字，默认"下拉刷新..."；4. success-text：string类型，刷新成功文字，默认"刷新成功"；5. color：string类型，加载图标颜色，默认#07c160；6. bindrefresh：下拉刷新触发事件；7. bindsuccess：刷新成功触发事件作用：标准化下拉刷新交互，支持自定义提示文字和样式，替代页面配置的下拉刷新示例（WXML）：<pull-refresh class="pull-refresh" enable threshold="60" bindrefresh="onPullRefresh"> <view class="content">刷新内容区域</view><pull-refresh>JS：onPullRefresh() { / 模拟数据刷新 setTimeout(() => { this.setData({ * 更新数据 */ }); / 通知刷新成功 this.selectComponent('.pull-refresh').finishRefresh(); }, 1500);}WXSS：.pull-refresh { width: 100%; height: 100vh; }适用场景：列表数据刷新、页面内容更新、消息列表刷新、数据看板刷新等；兼容性：基础库2.12.0及以上支持；注意事项：1. 下拉触发阈值threshold需合理设置，避免过窄或过宽；2. 刷新完成后必须调用finishRefresh方法，关闭刷新状态；3. 提示文字建议简洁明了，符合用户认知；4. 可结合scroll-view使用，实现局部区域下拉刷新；5. 避免在刷新过程中再次触发下拉，可通过状态控制
qrcode（二维码生成控件）class、id、style、hidden1. content：string类型，二维码内容（链接/文字），必填；<br>2. size：number类型，二维码尺寸（px），默认200；<br>3. color：string类型，码点颜色，默认#000；<br>4. background：string类型，背景颜色，默认#fff；<br>5. logo：string类型，logo图片地址，可选；<br>6. bindcomplete：二维码生成完成触发作用：在小程序内生成二维码，无需后端接口，支持自定义样式和logo<br>示例（WXML）：<br><qrcode class="qrcode" content="https://www.doubao.com" size="200" logo="{{logoUrl}}" bindcomplete="onQrcodeComplete"></qrcode><br>JS：<br>data: { logoUrl: "https://example.com/logo.png" }<br>onQrcodeComplete() {<br> wx.showToast({ title: '二维码生成完成' });<br>}<br>WXSS：<br>.qrcode { margin: 20rpx auto; display: block; }适用场景：分享二维码、付款码、活动码、小程序码生成等；<br>兼容性：基础库2.30.0及以上支持；<br>注意事项：1. content长度不宜过长，否则二维码密度过高；2. logo尺寸建议为二维码的1/5~1/4；3. 生成的二维码可通过wx.canvasToTempFilePath保存
radio（单选框控件）1. 基础属性：class、id、style、hidden、data-*、bindchange2. 特有属性：value、checked、disabled、color1. value：string类型，单选框的值，用于表单提交时传递，默认空；2. checked：boolean类型，是否选中，默认false；3. disabled：boolean类型，是否禁用，默认false；4. color：string类型，选中状态的颜色，默认"#07C160"（微信绿）；5. 注：必须与radio-group组合使用，同一组内仅能选中一个radio。1. 单选场景：作用：用于用户从多个选项中选择一个（如性别选择、学历选择、支付方式选择），需与radio-group配合使用实现互斥选中；示例（WXML代码）：<!-- 单选框组，实现互斥选中 --> <radio-group class="radio-group" bindchange="handleRadioChange"> <label class="radio-item" wx:for="{{genders}}" wx:key="index"> <radio value="{{item.value}}" checked="{{item.checked}}" color="#1E88E5"/> <text class="radio-text">{{item.name}}</text> </label> </radio-group> <!-- 禁用的单选框组 --> <radio-group class="radio-group disabled-group"> <label class="radio-item"> <radio value="high" disabled="{{true}}"/> <text>高中（禁用）</text> </label> <label class="radio-item"> <radio value="college" disabled="{{true}}"/> <text>大学（禁用）</text> </label> </radio-group> <!-- WXSS样式 --> .radio-group { margin: 20rpx 0; } .radio-item { display: flex; align-items: center; margin: 15rpx 0; font-size: 32rpx; } .radio-text { margin-left: 10rpx; color: #333; } .disabled-group .radio-item text { color: #ccc; }说明：第一个radio-group实现性别单选，选中颜色为蓝色，通过bindchange事件获取选中的值；第二个为禁用的单选框组，选项无法点击，文本颜色变灰。1. 适用场景：单选项选择（性别、学历、支付方式、答题选项）；2. 兼容性：全基础库版本支持；3. 注意事项：- radio必须嵌套在radio-group内使用，同一radio-group内的radio互斥（仅能选中一个）；- 与label组合使用，点击文本可触发选中状态切换；- radio-group的bindchange事件detail.value可直接获取选中的radio的value；- 无需手动控制checked状态，选中一个radio后，同一组内其他radio会自动取消选中；- 大小修改方式同checkbox，通过transform: scale()样式缩放。
radio-card（卡片式单选控件）class、id、style、hidden、disabled1. options：array类型，单选卡片数据源，必填。格式为[{ value: '选项标识（唯一）', label: '卡片主标题', desc: '卡片辅助描述（可选）', icon: '卡片左侧图标地址（可选）', disabled: '单个选项是否禁用（可选，默认false）' }]；2. model-value：stringnumber类型，双向绑定的选中选项标识，必填；3. card-style：string类型，卡片样式类型，可选"outline"/"fill"，默认"outline"（边框式），"fill"为填充式；4. active-config：object类型，选中状态配置，含color（选中颜色，默认#07c160）、icon（选中图标，默认内置勾选图标）；5. column-count：number类型，卡片排列列数，可选1/2/3，默认1；6. gap：number类型，卡片之间的间距（单位rpx），默认20；7. bindchange：选中状态变更时触发事件，回调参数e.detail含value（选中标识）、item（选中选项完整数据）作用：以卡片化视觉呈现单选选项，相比传统单选框更醒目、信息承载量更大，提升用户选择体验，减少选项误解风险示例（WXML）：<radio-card class="order-radio-card" options="{{deliveryOptions}}" model-value="{{selectedDelivery}}" card-style="outline" active-config="{{{color: '#07c160'}}}" column-count="2" gap="16" bindchange="onDeliveryChange"><radio-card>JS：Page({ data: { selectedDelivery: "express", / 默认选中快递配送 deliveryOptions: [ { value: "express", label: "快递配送", desc: "次日达，满88元包邮", icon: "images/icon-express.png" }, { value: "self-pick", label: "门店自提", desc: "1小时内可取，立减5元", icon: "/images/icon-selfpick.png" }, { value: "flash", label: "闪送", desc: "30分钟送达，运费20元", icon: "images/icon-flash.png", disabled: true // 该选项禁用 } ] }, onDeliveryChange(e) { const { value, item } = e.detail; console.log("选中配送方式：", item.label, "，标识：", value); }})WXSS：.order-radio-card { padding: 20rpx; box-sizing: border-box;}.order-radio-card .radio-card-item { * 控件内部卡片类名 */ border-radius: 12rpx; padding: 24rpx; box-sizing: border-box;}适用场景：配送方式选择、支付方式选择、套餐规格选择、服务类型选择、问卷单选题等需要突出选项信息的场景；兼容性：基础库2.22.0及以上支持；注意事项：1. options中value必须唯一，否则会导致选中状态混乱；2. 单个选项disabled优先级高于控件整体disabled，禁用选项不可点击且视觉置灰；3. 列数column-count建议根据页面宽度选择，手机端1-2列最佳，平板端可设为3列；4. 卡片间距gap需结合列数调整，避免过挤或过宽；5. 自定义选中图标时，建议使用svg或png格式，尺寸控制在32rpx×32rpx左右，确保与卡片风格协调；6. 卡片样式为fill时，选中状态会显示背景色，未选中为透明背景
radio-group（单选框组控件）class、id、style、hidden1. options：array类型，单选框选项数组（含label/value/checked），必填；2. value：stringnumber类型，当前选中值，可选；3. disabled：boolean类型，是否整体禁用，默认false；4. column-count：number类型，列数，默认1；5. bindchange：选择变化触发事件，返回选中value作用：管理单选框互斥选择状态，支持多列布局，替代手动组合多个radio控件示例（WXML）：<radio-group class="radio-group" options="{{radioOptions}}" value="{{selectedValue}}" column-count="2" bindchange="onRadioChange"></radio-group>JS：data: { radioOptions: [ { label: "男", value: "male" }, { label: "女", value: "female" } ], selectedValue: "male"},onRadioChange(e) { this.setData({ selectedValue: e.detail.value });}WXSS：.radio-group { padding: 20rpx; display: flex; flex-wrap: wrap; gap: 20rpx; }适用场景：性别选择、学历选择、支付方式选择、问卷单选题等；兼容性：基础库1.0.0及以上支持；注意事项：1. options数组的checked字段与value字段作用一致，优先以value为准；2. 单选框组内选项互斥，只能选中一个；3. 多列布局时需合理设置列数，避免选项排列混乱；4. 整体禁用时，所有单选框均不可点击，文字颜色变浅
range-slider（范围滑动选择器）class、id、style、hidden1. value：array类型，选中范围值[最小值, 最大值]，必填；2. min：number类型，最小可选值，默认0；3. max：number类型，最大可选值，默认100；4. step：number类型，步长，默认1；5. color：string类型，选中区域颜色，默认#07c160；6. background-color：string类型，未选中区域颜色，默认#eee；7. bindchange：范围变化触发事件，返回当前value作用：实现双滑块范围选择，适用于价格区间、时间范围等场景，替代单滑块slider控件示例（WXML）：<range-slider class="range-slider" value="{{priceRange}}" min="0" max="1000" step="10" bindchange="onPriceRangeChange"></range-slider>JS：data: { priceRange: [100, 500] },onPriceRangeChange(e) { this.setData({ priceRange: e.detail.value }); console.log("选中价格范围：", e.detail.value);}WXSS：.range-slider { width: 100%; padding: 30rpx 20rpx; }适用场景：商品价格区间筛选、年龄范围选择、时间范围设定、金额区间配置等；兼容性：基础库2.20.0及以上支持；注意事项：1. value数组长度必须为2，且第一个值小于第二个值；2. 步长step需根据min和max合理设置，避免范围选择过于精细；3. 可结合文本框显示当前选中范围，提升用户感知；4. 滑动过程中会持续触发bindchange，如需防抖可在事件处理中处理
rate（评分控件）class、id、style、hidden1. value：number类型，当前评分，默认0；<br>2. max：number类型，最大评分星级，默认5；<br>3. disabled：boolean类型，是否禁用，默认false；<br>4. color：string类型，选中颜色，默认#FFCC00；<br>5. void-color：string类型，未选中颜色，默认#ccc；<br>6. bindchange：评分变化触发事件作用：实现星级评分功能，支持用户点击评分或展示已有评分<br>示例（WXML）：<br><rate class="rate" value="{{score}}" max="5" bindchange="onRateChange"></rate><br>JS：<br>onRateChange(e) {<br> this.setData({ score: e.detail.value });<br> wx.showToast({ title: 评分：${e.detail.value}星 });<br>}<br>WXSS：<br>.rate { padding: 20rpx; font-size: 40rpx; }适用场景：商品评价、服务评分、问卷调研、内容评分等；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. value支持小数（如3.5星）；2. disabled状态下不可点击，仅用于展示；3. 可通过WXSS调整星级大小
rich-text（富文本控件）class、id、style、hidden1. nodes：array/string类型，富文本内容（支持HTML标签或自定义节点），必填；<br>2. space：string类型，连续空格显示方式，可选"ensp/emsp/nbsp"，默认无；<br>3. bindtap：点击富文本内元素时触发事件，返回节点信息作用：展示带格式的文本（如加粗、换行、图片、链接），无需手动解析HTML<br>示例（WXML）：<br><rich-text class="rich-content" nodes="{{richTextNodes}}" bindtap="handleRichTap"></rich-text><br>JS（数据）：<br>data: {<br> richTextNodes: '<div style="font-size:32rpx;"><strong>加粗文本</strong><br><a href="https://www.weixin.qq.com" style="color:#07c160;">微信官网</a></div>'<br>}<br>WXSS：<br>.rich-content { padding: 20rpx; line-height: 1.8; }适用场景：文章详情页、公告展示、带格式的活动规则等；<br>兼容性：基础库1.4.0及以上支持；<br>注意事项：1. 不支持所有HTML标签，仅支持官方指定标签（如div、span、strong、img等）；2. 自定义样式需通过nodes内的style属性设置，外部WXSS可能失效；3. 图片需符合小程序安全域名规范；4. 避免嵌套过深导致渲染异常
scroll-index（滚动索引控件）class、id、style、hidden1. data：array类型，索引数据源，必填，格式为[{index: '索引标识', list: []}]，list为该索引下的内容列表；2. index-key：string类型，索引标识字段名，默认"index"；3. list-key：string类型，内容列表字段名，默认"list"；4. sidebar-width：number类型，侧边索引栏宽度，单位rpx，默认40；5. active-color：string类型，当前激活索引颜色，默认#07c160；6. show-sidebar：boolean类型，是否显示侧边索引栏，默认true；7. bindscroll：滚动时触发事件，回调含currentIndex（当前激活索引）；8. binditemclick：点击内容项触发事件作用：实现带侧边索引的滚动列表，支持点击索引快速定位到对应内容区域，适用于联系人、城市列表等场景示例（WXML）：<scroll-index class="scroll-index" data="{{contactData}}" index-key="index" list-key="list" active-color="#07c160" bindscroll="onScrollIndex" binditemclick="onContactClick"><scroll-index>JS：Page({ data: { contactData: [ { index: "A", list: [{ name: "阿强" }, { name: "阿丽" }] }, { index: "B", list: [{ name: "小白" }, { name: "小波" }] }, { index: "C", list: [{ name: "橙子" }, { name: "超超" }] } ] }, onScrollIndex(e) { console.log("当前滚动到索引：", e.detail.currentIndex); }, onContactClick(e) { console.log("点击的联系人：", e.detail.item); }})WXSS：.scroll-index { width: 100%; height: 600rpx;}.scroll-index .index-header { padding: 10rpx 20rpx; background-color: #f5f5f5; color: #666; font-size: 24rpx;}.scroll-index .item { padding: 20rpx; border-bottom: 1rpx solid #eee;}适用场景：联系人列表、城市选择列表、商品分类列表、通讯录列表等需要快速定位的长列表场景；兼容性：基础库2.22.0及以上支持；注意事项：1. 数据源data需按索引顺序排列，确保滚动定位准确；2. 侧边索引栏宽度sidebar-width需根据索引文字大小设置，避免文字溢出；3. 点击侧边索引时，会自动滚动到对应索引的内容区域顶部；4. 内容区域高度需设置固定值，确保滚动功能正常；5. 可通过自定义样式修改索引头部、内容项的样式，适配页面风格
scroll-nav（滚动导航控件）class、id、style、hidden1. list：array类型，导航项数组（含label/value），必填；2. active-value：stringnumber类型，当前激活值，必填；3. scroll-into-view：boolean类型，激活项是否滚动到视图中间，默认true；4. active-color：string类型，激活颜色，默认#07c160；5. height：number类型，导航栏高度，默认80rpx；6. bindchange：导航切换触发事件作用：实现横向滚动导航，支持激活项自动居中，适用于多分类导航场景示例（WXML）：<scroll-nav class="scroll-nav" list="{{navList}}" active-value="{{activeValue}}" scroll-into-view bindchange="onNavChange"></scroll-nav>JS：data: { navList: [{ label: "推荐", value: 1 }, { label: "热点", value: 2 }, { label: "娱乐", value: 3 }], activeValue: 1},onNavChange(e) { this.setData({ activeValue: e.detail.activeValue });}WXSS：.scroll-nav { width: 100%; white-space: nowrap; padding: 0 20rpx; }适用场景：资讯分类导航、商品分类滚动导航、视频分类导航、内容专题导航等；兼容性：基础库2.8.0及以上支持；注意事项：1. 导航项数量较多时自动横向滚动，避免布局挤压；2. 激活项滚动居中功能需保证导航栏有足够滚动空间；3. 导航栏高度height建议与页面其他导航组件统一；4. 可通过自定义样式修改导航项间距、文字大小、激活样式等
scroll-view（滚动视图）class、id、style、hidden1. scroll-x：boolean类型，是否允许横向滚动，默认false；<br>2. scroll-y：boolean类型，是否允许纵向滚动，默认false；<br>3. scroll-top：number类型，纵向滚动条位置，默认0；<br>4. scroll-left：number类型，横向滚动条位置，默认0；<br>5. bindscroll：滚动时触发事件，返回滚动位置；<br>6. scroll-into-view：string类型，滚动到指定id的子元素作用：实现区域内滚动，支持横向/纵向，可控制滚动位置<br>示例（WXML）：<br><scroll-view class="scroll-y" scroll-y="true" style="height: 500rpx; padding: 20rpx;"><br> <view class="item" wx:for="{{list}}" wx:key="index">{{item}}</view><br></scroll-view><br>WXSS：<br>.scroll-y { background: #f5f5f5; border-radius: 10rpx; }<br>.item { padding: 15rpx 0; border-bottom: 1rpx solid #eee; font-size: 28rpx; }适用场景：长列表展示、横向菜单、多选项滚动筛选等；<br>兼容性：基础库1.0.0及以上支持；<br>注意事项：1. 纵向滚动需设置固定高度，横向滚动需设置white-space: nowrap且子元素inline-block；2. 避免嵌套scroll-view导致滚动冲突；3. scroll-into-view的目标元素需设置id，且不能为display: none
scroll-view（滚动视图控件）1. 基础属性：class、id、style、hidden、data-*、bindscroll、bindscrolltolower、bindscrolltoupper2. 特有属性：scroll-x、scroll-y、upper-threshold、lower-threshold、scroll-top、scroll-left、scroll-into-view、enable-back-to-top、scroll-with-animation1. scroll-x/scroll-y：boolean类型，是否允许横向/纵向滚动，默认false（仅能开启一个）；2. upper-threshold：number/string类型，距顶部/左边多远时触发scrolltoupper事件，默认50；3. lower-threshold：number/string类型，距底部/右边多远时触发scrolltolower事件，默认50；4. scroll-top/scroll-left：number/string类型，纵向/横向滚动条的位置；5. scroll-into-view：string类型，滚动到指定id的子元素（子元素需设置id）；6. enable-back-to-top：boolean类型，是否支持点击顶部状态栏回到顶部（仅scroll-y=true时有效），默认false；7. scroll-with-animation：boolean类型，是否开启滚动动画，默认false。1. 滚动内容场景：作用：用于展示超出容器尺寸的内容，支持横向和纵向滚动，可监听滚动事件实现下拉刷新、上拉加载等功能；示例（WXML代码）：<!-- 纵向滚动视图（列表滚动，支持上拉加载） --> <scroll-view class="vertical-scroll" scroll-y="{{true}}" lower-threshold="100" bindscrolltolower="handleScrollToLower" enable-back-to-top="{{true}}" scroll-with-animation="{{true}}"> <view class="scroll-item" wx:for="{{listData}}" wx:key="index"> 列表项 {{index + 1}}：{{item.content}} </view> <view class="loading" wx:if="{{loading}}">加载中...</view> </scroll-view> <!-- 横向滚动视图（标签滚动） --> <scroll-view class="horizontal-scroll" scroll-x="{{true}}" scroll-with-animation="{{true}}"> <view class="tag-item" wx:for="{{tags}}" wx:key="index" id="tag-{{index}}"> {{item.name}} </view> </scroll-view> <!-- WXSS样式 --> .vertical-scroll { width: 100%; height: 400rpx; margin: 20rpx 0; } .scroll-item { height: 100rpx; line-height: 100rpx; padding: 0 20rpx; border-bottom: 1rpx solid #eee; font-size: 32rpx; } .loading { height: 80rpx; line-height: 80rpx; text-align: center; color: #999; } .horizontal-scroll { white-space: nowrap; padding: 10rpx 0; } .tag-item { display: inline-block; padding: 10rpx 20rpx; margin: 0 10rpx; background: #f5f5f5; border-radius: 20rpx; font-size: 28rpx; }说明：纵向scroll-view实现列表滚动，设置距底部100rpx时触发上拉加载，支持点击状态栏回到顶部；横向scroll-view实现标签滚动，标签横向排列不换行，开启滚动动画。1. 适用场景：长列表滚动、横向标签滚动、内容超出容器的滚动展示、上拉加载更多、下拉刷新；2. 兼容性：enable-back-to-top需基础库1.1.0及以上版本；3. 注意事项：- 必须为scroll-view设置固定的width和height，否则无法正常滚动；- 横向滚动时，需设置white-space: nowrap（防止子元素换行），且子元素需设置为inline-block；- 纵向滚动时，子元素可正常换行，高度超出scroll-view高度即可滚动；- bindscrolltoupper触发下拉到顶部/左边事件，bindscrolltolower触发上拉到底部/右边事件（常用于上拉加载）；- scroll-into-view用于滚动到指定id的子元素，id需唯一，值为子元素的id（无需加#）；- 避免在scroll-view内使用textarea、map等原生组件，可能出现滚动异常。
search-bar（搜索栏控件）class、id、style、hidden1. placeholder：string类型，占位提示文字，默认"请搜索"；2. value：string类型，搜索输入值；3. show-clear：boolean类型，是否显示清空按钮，默认true；4. show-cancel：boolean类型，是否显示取消按钮，默认false；5. bindinput：输入内容变化触发事件；6. bindsearch：搜索确认触发事件；7. bindcancel：取消搜索触发事件作用：集成搜索输入、清空、取消等功能，实现统一的搜索交互体验示例（WXML）：<search-bar class="search-bar" placeholder="搜索商品名称" value="{{searchValue}}" show-cancel bindinput="onInputChange" bindsearch="onSearch" bindcancel="onCancel"></search-bar>JS：onInputChange(e) { this.setData({ searchValue: e.detail.value }); }onSearch(e) { console.log("搜索内容：", e.detail.value); }WXSS：.search-bar { padding: 15rpx; background-color: #f5f5f5; }适用场景：商品搜索、资讯搜索、用户搜索、列表筛选搜索等；兼容性：基础库2.10.0及以上支持；注意事项：1. 输入框高度建议80rpx-100rpx，保证点击区域足够；2. show-cancel为true时，右侧显示取消按钮，点击清空输入并隐藏取消按钮；3. 可结合防抖处理，避免输入过程中频繁触发搜索
search-input（搜索输入控件）class、id、style、hidden、disabled、placeholder1. model-value：string类型，绑定的搜索值，支持双向绑定，必填；2. clearable：boolean类型，是否显示清除按钮，默认true；3. focus：boolean类型，是否自动获取焦点，默认false；4. search-icon：boolean类型，是否显示左侧搜索图标，默认true；5. delay：number类型，输入防抖延迟（ms），默认300；6. enter-search：boolean类型，是否支持回车搜索，默认true；7. bindsearch：搜索触发事件（清除、回车、手动触发均会触发）；8. bindinput：输入过程触发事件（带防抖）；9. bindfocus：获取焦点触发事件；10. bindblur：失去焦点触发事件作用：标准化搜索输入交互，集成防抖、清除、搜索图标等功能，简化搜索场景开发示例（WXML）：<search-input class="search-input" model-value="{{searchKey}}" placeholder="请搜索商品名称" clearable delay="500" bindsearch="onSearch"></search-input>JS：Page({ data: { searchKey: "" }, onSearch(e) { const key = e.detail.value; console.log("搜索关键词：", key); / 执行搜索逻辑 }})WXSS：.search-input { width: 100%; padding: 16rpx 20rpx; box-sizing: border-box; background-color: #f5f5f5; border-radius: 40rpx;}适用场景：商品搜索、资讯搜索、联系人搜索、订单搜索等各类搜索场景；兼容性：基础库2.15.0及以上支持；注意事项：1. 防抖延迟delay建议设置300-500ms，平衡搜索及时性和性能；2. 清除按钮点击后会清空输入值并触发bindsearch；3. 自动获取焦点focus建议在页面加载完成后使用，提升用户体验；4. 可通过自定义样式修改搜索框背景色、图标样式等
select-dropdown（下拉选择控件）class、id、style、hidden、disabled1. options：array类型，下拉选项数据源，必填，格式为[{label: '显示文本', value: '实际值', disabled: false}]，其中disabled可选，用于控制单个选项是否禁用；2. model-value：string/number类型，绑定的选中值，支持双向绑定，必填；3. placeholder：string类型，未选择时的占位提示文字，默认"请选择"；4. show-search：boolean类型，是否在下拉面板显示搜索框，默认false；5. search-placeholder：string类型，搜索框占位文字，默认"请搜索选项"；6. filter-method：function类型，自定义搜索过滤方法，参数为输入的搜索词和选项列表，返回过滤后的列表；7. max-height：number类型，下拉面板最大高度，默认300，单位px；8. trigger-type：string类型，下拉触发方式，可选"click"/"hover"，默认"click"；9. bindchange：选中值变化时触发事件，回调参数含value（选中值）和label（选中文本）；10. bindopen：下拉面板打开时触发事件；11. bindclose：下拉面板关闭时触发事件作用：提供标准化的下拉选择交互，支持选项搜索、单个选项禁用、自定义过滤等增强功能，适配多场景下的选择需求，减少自定义组件开发成本示例（WXML）：<select-dropdown class="select-dropdown" options="{{regionOptions}}" model-value="{{selectedRegion}}" placeholder="请选择所在地区" show-search search-placeholder="搜索地区" max-height="250" bindchange="onRegionChange"><select-dropdown>JS：Page({ data: { selectedRegion: "", regionOptions: [ { label: "北京市", value: "110000" }, { label: "上海市", value: "310000" }, { label: "广东省", value: "440000" }, { label: "江苏省", value: "320000", disabled: true } / 禁用该选项 ] }, onRegionChange(e) { console.log("选中地区：", e.detail.label, "，地区编码：", e.detail.value); }})WXSS：.select-dropdown { width: 100%; padding: 16rpx 20rpx; border: 1rpx solid #e5e5e5; border-radius: 8rpx; box-sizing: border-box;}.select-dropdown .dropdown-panel { border: 1rpx solid #e5e5e5; border-radius: 8rpx; background-color: #fff;}适用场景：地区选择、行业分类选择、部门归属选择、角色权限选择、商品规格选择等需要从多个选项中挑选的场景；兼容性：基础库2.21.0及以上支持，双向绑定需基础库2.9.0及以上；注意事项：1. options数组中label和value为必填字段，缺失会导致渲染异常；2. 开启show-search时，若未自定义filter-method，默认按label模糊匹配过滤；3. 下拉面板最大高度max-height建议根据页面剩余空间设置，避免超出视口；4. 触发方式hover仅适用于非移动端场景，小程序端建议使用默认click；5. 禁用状态（基础属性disabled）下，整个控件不可点击，下拉面板无法展开；6. 选项较多（超过10个）时，建议开启搜索功能提升用户选择效率
share-element（共享元素）class、id、style、hidden1. key：string类型，共享元素标识，必填；<br>2. transition-name：string类型，过渡动画名称，必填；<br>3. bindtransitionend：过渡动画结束触发作用：实现页面间元素的无缝过渡动画（如图片从列表页放大到详情页）<br>示例（WXML，列表页）：<br><share-element class="share-img" key="img1" transition-name="imgTransition"><br> <image src="{{imgUrl}}" style="width: 200rpx; height: 200rpx;"></image><br></share-element><br>WXML（详情页）：<br><share-element class="share-img-detail" key="img1" transition-name="imgTransition"><br> <image src="{{imgUrl}}" style="width: 100%; height: 400rpx;"></image><br></share-element><br>WXSS：<br>.share-img { border-radius: 10rpx; }适用场景：图片详情过渡、商品卡片跳转动画、列表到详情的元素衔接等；<br>兼容性：基础库2.11.0及以上支持；<br>注意事项：1. 两个页面的share-element需相同key和transition-name；2. 仅支持基础动画（位移、缩放、透明度）；3. 避免嵌套过深导致动画失效
signature（签名控件）class、id、style、hidden1. width：number类型，签名区域宽度，默认300；2. height：number类型，签名区域高度，默认150；3. line-width：number类型，签名线条宽度，默认3；4. line-color：string类型，签名线条颜色，默认#000；5. bg-color：string类型，签名区域背景色，默认#fff；6. clear-btn：boolean类型，是否显示清除按钮，默认true；7. bindsave：保存签名触发事件，返回签名图片临时路径；8. bindclear：清除签名触发事件作用：实现手写签名功能，支持保存签名图片，适用于电子签名场景示例（WXML）：<signature class="signature" width="{{300}}" height="{{150}}" line-width="4" line-color="#000" clear-btn bindsave="onSaveSignature" bindclear="onClearSignature"></signature>JS：onSaveSignature(e) { console.log("签名图片临时路径：", e.detail.tempFilePath); / 可将临时路径上传到服务器保存},onClearSignature() { console.log("签名已清除");}WXSS：.signature { margin: 20rpx; border: 1rpx solid #eee; }适用场景：电子合同签名、订单确认签名、审批流程签名、用户手写签名采集等；兼容性：基础库2.28.0及以上支持；注意事项：1. 签名区域宽高建议根据页面布局合理设置，保证签名空间充足；2. 线条宽度line-width和颜色line-color可根据业务需求调整，确保签名清晰；3. 保存的签名图片为临时路径，需及时上传到服务器或通过wx.saveImageToPhotosAlbum保存；4. 支持手指和 stylus 笔签名，适配不同输入方式；5. 签名前建议提示用户签名规范（如签名清晰、占满区域等）
skeleton（骨架屏控件）class、id、style、hidden1. loading：boolean类型，是否显示骨架屏，默认true；<br>2. theme：string类型，骨架屏主题，可选"default"/"gray"/"custom"，默认"default"；<br>3. animation：boolean类型，是否显示动画，默认true；<br>4. bindfinish：骨架屏结束触发事件作用：页面/组件加载时展示骨架屏，提升用户体验，替代自定义骨架屏<br>示例（WXML）：<br><skeleton class="skeleton" loading="{{loading}}" theme="gray" animation><br> <view class="content" wx:if="{{!loading}}">加载完成的内容</view><br></skeleton><br>JS：<br>onLoad() {<br> this.setData({ loading: true });<br> // 模拟数据请求<br> setTimeout(() => {<br> this.setData({ loading: false });<br> }, 2000);<br>}<br>WXSS：<br>.skeleton { width: 100%; padding: 20rpx; }<br>.content { font-size: 28rpx; line-height: 1.8; }适用场景：首页加载、详情页加载、列表页加载等所有需要等待数据的场景；<br>兼容性：基础库2.24.0及以上支持；<br>注意事项：1. 需通过loading控制显示/隐藏；2. 自定义主题需配合WXSS修改样式；3. 动画可提升视觉体验，但需注意性能
slider（滑动选择器）1. 基础属性：class、id、style、hidden、data-*、bindchange、bindchanging2. 特有属性：min、max、step、value、disabled、color、selected-color、block-size、block-color1. min/max：number类型，最小值/最大值，默认0/100；2. step：number类型，滑动步长，默认1；3. value：number/array类型，当前值（单滑块为number，双滑块为array），默认0；4. disabled：boolean类型，是否禁用，默认false；5. color：string类型，未选中部分颜色，默认"#e9e9e9"；6. selected-color：string类型，选中部分颜色，默认"#07C160"；7. block-size：number类型，滑块大小，单位px，默认24；8. block-color：string类型，滑块颜色，默认"#ffffff"；9. bindchanging：实时监听滑动事件（滑动过程中持续触发）。1. 范围值选择场景：作用：用于用户从连续范围中选择一个值（如音量调节、亮度调节）或一个区间（如价格范围），支持单滑块和双滑块模式；示例（WXML代码）：<!-- 单滑块（音量调节） --> <view class="slider-item"> <text class="slider-label">音量调节：{{volume}}%</text> <slider min="0" max="100" step="1" value="{{volume}}" selected-color="#1E88E5" block-color="#1E88E5" bindchanging="handleVolumeChanging" bindchange="handleVolumeChange"/> </view> <!-- 双滑块（价格范围选择） --> <view class="slider-item"> <text class="slider-label">价格范围：{{priceRange[0]}}-{{priceRange[1]}}元</text> <slider min="0" max="1000" step="10" value="{{priceRange}}" selected-color="#FF4444" block-size="28" bindchange="handlePriceRangeChange"/> </view> <!-- WXSS样式 --> .slider-item { margin: 30rpx 20rpx; } .slider-label { font-size: 32rpx; color: #333; margin-bottom: 15rpx; display: block; }说明：单滑块用于音量调节，实时监听滑动过程（bindchanging）更新音量值；双滑块用于价格范围选择（0-1000元，步长10元），滑动结束后更新价格区间，滑块大小和颜色均做了自定义设置。1. 适用场景：音量/亮度调节、价格范围选择、评分调节、过滤条件范围设置（如时间范围、距离范围）；2. 兼容性：双滑块模式（value为array）需基础库1.9.0及以上版本；3. 注意事项：- 单滑块value为number类型，双滑块为array类型（如[minValue, maxValue]）；- bindchanging在滑动过程中持续触发（适合实时更新展示），bindchange在滑动结束后触发（适合最终值确认）；- step值需合理设置，过小可能导致选择过于精细，过大可能不够精准；- 滑块和轨道颜色可通过block-color、selected-color等属性自定义，提升页面风格统一性；- 禁用状态下，滑块无法滑动，颜色变灰，事件不触发；- 建议搭配文本展示当前选择值，让用户直观了解选择结果。
slider-range（多段滑块控件）class、id、style、hidden1. value：array类型，多段滑块值，必填，格式为[段1值, 段2值, ...]，长度需与sections一致；2. sections：number类型，滑块分段数，默认2；3. min：number类型，最小值，默认0；4. max：number类型，最大值，默认100；5. step：number类型，步长，默认1；6. colors：array类型，各段颜色，默认["#07c160", "#eee"]；7. show-value：boolean类型，是否显示当前值，默认false；8. bindchange：滑块值变化触发事件作用：实现多段滑块控制，适用于多区间划分、多维度调节等场景，替代单段滑块示例（WXML）：<slider-range class="slider-range" value="{{sliderValues}}" sections="3" min="0" max="100" step="5" colors=["#07c160", "#ff9f1c", "#f00"] show-value bindchange="onSliderChange"><slider-range>JS：Page({ data: { sliderValues: [30, 60] // 3段滑块需2个值划分区间 }, onSliderChange(e) { console.log("滑块值：", e.detail.value); }})WXSS：.slider-range { width: 100%; padding: 30rpx 20rpx; box-sizing: border-box;}适用场景：多区间价格划分、音量多段调节、亮度分级调节、多维度参数设置等；兼容性：基础库2.26.0及以上支持；注意事项：1. 分段数sections与value数组长度的关系为：value长度 = sections - 1；2. 各段颜色colors数组长度需与sections一致，否则使用默认颜色；3. 步长step需根据min和max合理设置，确保调节精准；4. 显示值show-value适用于需要直观展示当前分段值的场景；5. 滑块值变化时，会确保各段值按从小到大排序，避免区间混乱
step（步骤条控件）class、id、style、hidden1. current：number类型，当前步骤索引（从0开始），默认0；2. steps：array类型，步骤列表（含titledesc字段），必填；3. direction：string类型，排列方向，可选"horizontal"/"vertical"，默认"horizontal"；4. active-color：string类型，当前步骤颜色，默认#07c160；5. inactive-color：string类型，未完成步骤颜色，默认#ccc；6. bindchange：步骤切换触发事件作用：展示流程步骤，用于分步操作、进度展示等场景示例（WXML）：<step class="step" current="{{currentStep}}" steps="{{steps}}" direction="horizontal" active-color="#07c160"></step>JS：data: { currentStep: 1, steps: [ { title: "第一步", desc: "填写信息" }, { title: "第二步", desc: "确认订单" }, { title: "第三步", desc: "完成支付" } ]}WXSS：.step { padding: 30rpx; width: 100%; }适用场景：订单流程、注册流程、分步表单、任务进度展示等；兼容性：基础库2.13.0及以上支持；注意事项：1. steps数组长度建议3-5个，过多会导致布局拥挤；2. 水平方向适用于步骤较少的场景，垂直方向适用于步骤较多或需要详细描述的场景；3. current索引需与steps数组对应，避免越界
step-progress（步骤进度控件）class、id、style、hidden1. steps：array类型，步骤列表，必填，格式为[{title: '步骤标题', desc: '步骤描述'}]；2. active-index：number类型，当前激活步骤索引，默认0；3. direction：string类型，步骤排列方向，可选"horizontal"/"vertical"，默认"horizontal"；4. active-color：string类型，激活步骤颜色，默认#07c160；5. inactive-color：string类型，未激活步骤颜色，默认#ccc；6. size：string类型，步骤节点尺寸，可选"small""middle"/"large"，默认"middle"；7. bindchange：步骤切换触发事件（仅支持可交互时）作用：展示流程步骤进度，如订单状态、任务流程等，支持横竖两种排列方向，提升流程可视化效果示例（WXML）：<step-progress class="step-progress" steps="{{orderSteps}}" active-index="{{currentStep}}" direction="horizontal" active-color="#07c160"><step-progress>JS：Page({ data: { currentStep: 2, orderSteps: [ { title: "待付款", desc: "请在30分钟内付款" }, { title: "待发货", desc: "付款成功，等待商家发货" }, { title: "待收货", desc: "商家已发货，请注意查收" }, { title: "已完成", desc: "订单已完成" } ] }})WXSS：.step-progress { width: 100%; padding: 30rpx 20rpx;}适用场景：订单流程跟踪、任务办理进度、注册流程步骤、物流状态展示等；兼容性：基础库2.19.0及以上支持；注意事项：1. 步骤数量建议3-5个，过多会导致横向排列拥挤；2. 纵向排列direction="vertical"适用于步骤描述较长的场景；3. active-index从0开始，对应steps数组的索引；4. 可通过自定义样式修改步骤标题、描述的文字大小和颜色
sticky（粘性布局控件）class、id、style、hidden1. scroll-top：number类型，滚动距离，必填；<br>2. offset-top：number类型，粘性顶部偏移量，默认0；<br>3. offset-bottom：number类型，粘性底部偏移量，默认0；<br>4. bindchange：粘性状态变化触发，返回isSticky（是否粘性）作用：实现元素滚动到顶部后固定（如导航栏、筛选栏），替代自定义粘性逻辑<br>示例（WXML）：<br><sticky class="sticky-nav" scroll-top="{{scrollTop}}" offset-top="0" bindchange="onStickyChange"><br> <view class="nav">筛选栏</view><br></sticky><br>JS（监听滚动）：<br>onPageScroll(e) { this.setData({ scrollTop: e.scrollTop }); }<br>WXSS：<br>.sticky-nav { width: 100%; background: #fff; padding: 15rpx; border-bottom: 1rpx solid #eee; }适用场景：列表筛选栏、页面导航栏、侧边栏目录、购物车悬浮栏等；<br>兼容性：基础库2.10.0及以上支持；<br>注意事项：1. 需实时监听页面滚动并更新scroll-top；2. offset-top需适配状态栏/导航栏高度；3. 粘性元素需设置宽度，避免自适应异常
sticky-section（粘性区块控件）class、id、style、hidden1. scroll-top：number类型，页面滚动距离，必填；2. sticky-top：number类型，粘性时距离顶部的距离，默认0；3. z-index：number类型，粘性时的层级，默认99；4. active-class：string类型，粘性时的激活样式类，可选；5. bindsticky：粘性状态变化触发事件，返回isSticky（是否粘性）作用：实现区块滚动到指定位置后粘性固定，支持激活样式切换，替代手动监听滚动实现粘性布局示例（WXML）：<sticky-section class="sticky-section" scroll-top="{{scrollTop}}" sticky-top="88rpx" active-class="sticky-active" bindsticky="onStickyChange"> <view class="section-content">粘性区块内容（如筛选栏、导航栏）</view><sticky-section>JS：data: { scrollTop: 0 },onPageScroll(e) { this.setData({ scrollTop: e.scrollTop });},onStickyChange(e) { console.log("粘性状态：", e.detail.isSticky);}WXSS：.sticky-section { width: 100%; }.sticky-active { background-color: #fff; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); }.section-content { padding: 20rpx; }适用场景：列表筛选栏粘性、页面分段导航粘性、商品详情页规格选择栏粘性、阅读页面目录粘性等；兼容性：基础库2.18.0及以上支持；注意事项：1. 需实时监听页面滚动事件，将scrollTop传入控件，确保粘性判断准确；2. sticky-top需根据页面导航栏高度合理设置，避免遮挡；3. 粘性时的层级z-index需高于页面其他内容，避免被遮挡；4. 激活样式active-class可用于区分粘性和非粘性状态，提升用户体验；5. 粘性区块建议设置固定宽度，避免自适应导致布局异常
swipe-action（滑动操作控件）class、id、style、hidden1. left-actions：array类型，左侧滑动操作按钮数组（含text/color），可选；2. right-actions：array类型，右侧滑动操作按钮数组（含text/color），可选；3. auto-close：boolean类型，点击操作按钮后自动关闭滑动面板，默认true；4. disabled：boolean类型，是否禁用滑动，默认false；5. bindaction：点击操作按钮触发事件，返回action和index；6. bindopen：滑动面板打开触发事件；7. bindclose：滑动面板关闭触发事件作用：实现列表项左右滑动显示操作按钮的功能，替代自定义滑动操作逻辑示例（WXML）：<swipe-action class="swipe-action" right-actions="{{rightActions}}" bindaction="onSwipeAction"> <view class="swipe-content">列表项内容，滑动右侧显示操作按钮</view><swipe-action>JS：data: { rightActions: [ { text: "编辑", color: "#fff", bgColor: "#07c160" }, { text: "删除", color: "#fff", bgColor: "#f00" } ]},onSwipeAction(e) { console.log("点击的操作：", e.detail.action.text); console.log("列表项索引：", e.detail.index);}WXSS：.swipe-content { padding: 20rpx; border-bottom: 1rpx solid #f5f5f5; }适用场景：列表项编辑/删除、订单操作、消息列表操作、收藏列表管理等；兼容性：基础库2.18.0及以上支持；注意事项：1. 建议仅配置单侧操作按钮（left-actions或right-actions），双侧同时配置可能导致操作混乱；2. 操作按钮数量建议1-2个，过多会导致滑动距离过长；3. 按钮背景色bgColor和文字颜色color需对比明显，保证可读性；4. disabled为true时，禁止滑动，适用于某些不可操作的列表项；5. 滑动过程中避免快速点击，防止触发多次action事件
swiper（轮播图控件）1. 基础属性：class、id、style、hidden、data-*、bindchange、bindtransition、bindanimationfinish2. 特有属性：indicator-dots、indicator-color、indicator-active-color、autoplay、interval、duration、circular、vertical1. indicator-dots：boolean类型，是否显示面板指示点，默认false；2. indicator-color：string类型，指示点未选中颜色，默认"rgba(0,0,0,.3)"；3. indicator-active-color：string类型，指示点选中颜色，默认"#000000"；4. autoplay：boolean类型，是否自动切换，默认false；5. interval：number类型，自动切换时间间隔，单位ms，默认5000；6. duration：number类型，滑动动画时长，单位ms，默认500；7. circular：boolean类型，是否采用衔接滑动（无限轮播），默认false；8. vertical：boolean类型，是否纵向轮播，默认false。1. 轮播展示场景：作用：用于展示多张图片或内容的轮播效果（如首页Banner、商品轮播、活动展示），支持自动轮播、无限滚动和指示点；示例（WXML代码）：<!-- 自动无限轮播图，带指示点 --> <swiper class="banner-swiper" indicator-dots="{{true}}" indicator-color="#fff" indicator-active-color="#FF4444" autoplay="{{true}}" interval="3000" duration="600" circular="{{true}}" bindchange="handleSwiperChange"> <swiper-item class="swiper-item" wx:for="{{bannerList}}" wx:key="index"> <image src="{{item.url}}" mode="aspectFill" class="banner-img"></image> </swiper-item> </swiper> <!-- WXSS样式 --> .banner-swiper { width: 100%; height: 300rpx; } .swiper-item { width: 100%; height: 100%; } .banner-img { width: 100%; height: 100%; }说明：轮播图开启指示点（未选中白色，选中红色），自动轮播（间隔3秒），滑动动画时长600ms，支持无限衔接滑动；通过wx:for循环渲染轮播项，每个轮播项为一张图片，适配容器填充显示。1. 适用场景：首页Banner轮播、商品详情图轮播、活动海报轮播、教程引导页；2. 兼容性：全基础库版本支持；3. 注意事项：- swiper必须设置固定的width和height，否则无法正常显示；- swiper-item内仅能放置一个根节点（如image、view），多个节点需用view包裹；- circular设置为true时，轮播图可无限滚动，且autoplay会更流畅；- 纵向轮播（vertical=true）时，需调整swiper的高度和轮播项布局；- bindchange事件的detail.current可获取当前轮播项的索引，用于同步其他数据；- 轮播图的图片建议尺寸一致，避免滑动时出现高度跳动。
swiper-dot（轮播指示器）class、id、style、hidden1. current：number类型，当前激活索引，默认0；<br>2. count：number类型，指示器总数，必填；<br>3. active-color：string类型，激活颜色，默认#07c160；<br>4. inactive-color：string类型，未激活颜色，默认#ccc；<br>5. shape：string类型，形状，可选"circle"/"square"，默认"circle"作用：自定义轮播图指示器，替代swiper默认dot，支持更多样式配置<br>示例（WXML）：<br><swiper class="swiper" bindchange="onSwiperChange"><br> <swiper-item>轮播1</swiper-item><br> <swiper-item>轮播2</swiper-item><br></swiper><br><swiper-dot class="swiper-dot" current="{{currentIndex}}" count="2" active-color="#07c160" shape="circle"></swiper-dot><br>JS：<br>onSwiperChange(e) { this.setData({ currentIndex: e.detail.current }); }<br>WXSS：<br>.swiper-dot { margin-top: 10rpx; text-align: center; }适用场景：自定义轮播图指示器、步骤条、分页指示器等；<br>兼容性：基础库2.12.0及以上支持；<br>注意事项：1. count需与轮播项数量一致；2. 形状为square时可通过width/height调整尺寸；3. 需与swiper的change事件联动更新current
swiper-item（轮播图项）1. 基础属性：class、id、style、hidden、data-*2. 无特有属性1. 无特有属性，仅作为swiper的子组件，用于承载每一页轮播内容；2. 作用：每一个swiper-item对应轮播图的一页，所有swiper-item组成完整的轮播内容。1. 轮播图页面承载场景：作用：专门作为swiper的子组件，用于包裹每一页轮播的具体内容（如图片、文字、复杂布局）；示例（WXML代码，结合swiper使用）：<!-- 多类型内容的轮播图 --> <swiper class="mixed-swiper" indicator-dots autoplay circular> <!-- 图片轮播项 --> <swiper-item class="swiper-item-img"> <image src="/images/banner1.jpg" mode="aspectFill" class="swiper-img"/> </swiper-item> <!-- 图文结合轮播项 --> <swiper-item class="swiper-item-mixed"> <view class="mixed-content"> <image src="/images/icon.png" class="mixed-img"/> <view class="mixed-text"> <text class="mixed-title">轮播图文组合</text> <text class="mixed-desc">这是包含图片和文字的轮播项</text> </view> </view> </swiper-item> <!-- 纯文本轮播项 --> <swiper-item class="swiper-item-text"> <text class="text-content">纯文本轮播内容，支持多行文本展示</text> </swiper-item> </swiper> <!-- WXSS样式 --> .mixed-swiper { width: 100%; height: 300rpx; } .swiper-img { width: 100%; height: 100%; } .mixed-content { width: 100%; height: 100%; display: flex; align-items: center; padding: 20rpx; background: #f5f5f5; } .mixed-img { width: 80rpx; height: 80rpx; margin-right: 20rpx; } .mixed-title { font-size: 32rpx; color: #333; } .mixed-desc { font-size: 28rpx; color: #666; margin-top: 10rpx; display: block; } .text-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: #333; padding: 0 20rpx; }说明：swiper内包含三个swiper-item，分别承载图片、图文组合、纯文本三种不同类型的轮播内容；每个swiper-item根据内容类型设置不同的样式，实现多样化的轮播展示效果。1. 适用场景：swiper轮播图的每一页内容承载，如图片Banner、图文组合轮播、纯文本公告轮播；2. 兼容性：全基础库版本支持；3. 注意事项：- 仅能作为swiper的直接子组件，无法在其他组件内使用；- 一个swiper内可包含多个swiper-item，数量根据轮播页数决定；- 每个swiper-item内仅能放置一个根节点（如image、view），若需放置多个元素，需用view包裹；- swiper-item的尺寸由父组件swiper决定，无需单独设置width和height；- 轮播项的样式可通过class自定义，支持复杂布局（如flex、grid）；- 配合swiper的wx:for使用时，可动态渲染轮播项，适合动态数据场景（如接口返回的Banner列表）；- 避免在swiper-item内放置过多复杂组件或大量数据，否则可能影响轮播流畅度。
swiper-nav（轮播导航控件）class、id、style、hidden1. list：array类型，导航项数组（含label/value），必填；<br>2. current：number类型，当前激活索引，默认0；<br>3. active-color：string类型，激活颜色，默认#07c160；<br>4. inactive-color：string类型，未激活颜色，默认#666；<br>5. scrollable：boolean类型，是否可横向滚动，默认false；<br>6. bindchange：切换导航触发事件作用：结合轮播与导航，实现导航项切换联动内容轮播，替代手动绑定逻辑<br>示例（WXML）：<br><swiper-nav class="swiper-nav" list="{{navList}}" current="{{current}}" bindchange="onNavChange" scrollable><br></swiper-nav><br><swiper current="{{current}}" bindchange="onSwiperChange"><br> <swiper-item wx:for="{{navList}}" wx:key="value">{{item.label}}内容</swiper-item><br></swiper><br>JS：<br>data: { navList: [{label:"推荐",value:"1"},{label:"新品",value:"2"}], current:0 },<br>onNavChange(e){this.setData({current:e.detail.index})},<br>onSwiperChange(e){this.setData({current:e.detail.current})}<br>WXSS：<br>.swiper-nav { display: flex; padding: 20rpx; border-bottom:1rpx solid #eee; }适用场景：首页分类导航、商品专区切换、资讯板块轮播导航等；<br>兼容性：基础库2.8.0及以上支持；<br>注意事项：1. 导航项过多时开启scrollable，避免布局挤压；2. 需与swiper的change事件双向绑定，保证联动同步；3. 导航项label建议不超过4字，适配小屏显示
switch（开关控件）1. 基础属性：class、id、style、hidden、data-*、bindchange2. 特有属性：checked、disabled、color、type1. checked：boolean类型，是否开启（选中），默认false；2. disabled：boolean类型，是否禁用，默认false；3. color：string类型，开启状态的背景颜色，默认"#07C160"（微信绿）；4. type：string类型，开关样式类型，可选值"switch"（默认开关）、"checkbox"（复选框样式开关），默认"switch"。1. 二元选择场景：作用：用于用户进行二元选择（开启/关闭、是/否），如功能开关、状态切换，比checkbox更简洁直观；示例（WXML代码）：<!-- 普通开关（消息通知开关） --> <view class="switch-item"> <text class="switch-label">消息通知</text> <switch checked="{{msgNotify}}" color="#1E88E5" bindchange="handleMsgNotifyChange"/> </view> <!-- 复选框样式开关（夜间模式） --> <view class="switch-item"> <text class="switch-label">夜间模式</text> <switch type="checkbox" checked="{{darkMode}}" color="#FF4444" bindchange="handleDarkModeChange"/> </view> <!-- 禁用开关 --> <view class="switch-item"> <text class="switch-label">自动更新（禁用）</text> <switch checked="{{true}}" disabled="{{true}}"/> </view> <!-- WXSS样式 --> .switch-item { display: flex; justify-content: space-between; align-items: center; height: 90rpx; padding: 0 20rpx; border-bottom: 1rpx solid #eee; } .switch-label { font-size: 32rpx; color: #333; }说明：展示了普通开关（消息通知）、复选框样式开关（夜间模式）和禁用开关（自动更新），分别设置了不同的开启颜色，通过bindchange事件监听开关状态变化，同步页面逻辑。1. 适用场景：功能开关（消息通知、夜间模式）、状态切换（是否自动登录、是否保存记录）、二元选择项；2. 兼容性：type="checkbox"需基础库2.2.0及以上版本；3. 注意事项：- switch的大小无法直接修改，可通过transform: scale()样式缩放（如transform: scale(0.8)）；- 开关状态变化通过bindchange事件监听，detail.value为当前开关状态（true/false）；- 禁用状态下，开关无法点击，颜色变灰，状态不可改变；- 与checkbox区别：switch更侧重“开启/关闭”状态切换，checkbox侧重“选择/未选择”，且switch不可多选；- 建议搭配文本标签使用，明确开关对应的功能，提升用户理解度。
switch-cell（开关单元格）class、id、style、hidden1. title：string类型，单元格标题，必填；2. checked：boolean类型，开关状态，默认false；3. desc：string类型，单元格描述文字，可选；4. disabled：boolean类型，是否禁用，默认false；5. color：string类型，开启状态颜色，默认#07c160；6. bindchange：开关状态变化触发事件作用：集成开关和单元格布局，用于设置项、功能开关等场景，无需手动组合控件示例（WXML）：<switch-cell class="switch-cell" title="消息通知" checked="{{msgNotify}}" desc="接收系统消息和活动通知" bindchange="onSwitchChange"></switch-cell>JS：onSwitchChange(e) { this.setData({ msgNotify: e.detail.checked }); }WXSS：.switch-cell { padding: 20rpx; border-bottom: 1rpx solid #eee; }适用场景：个人中心设置、系统设置、功能开关项（如消息通知、夜间模式等）；兼容性：基础库2.16.0及以上支持；注意事项：1. 标题文字建议不超过8字，描述文字不超过20字；2. disabled状态下，开关不可点击，文字颜色变浅；3. 可通过desc字段补充说明开关功能，提升用户理解
switch-group（开关组控件）class、id、style、hidden1. options：array类型，开关组选项，必填，格式为[{label: '开关描述', value: '开关标识', checked: false, disabled: false}]；2. model-value：array类型，绑定的选中开关标识数组，支持双向绑定，必填；3. column-count：number类型，开关排列列数，默认1；4. color：string类型，开关开启状态颜色，默认#07c160；5. bindchange：开关状态变化触发事件，回调含value（选中标识数组）；6. binditemchange：单个开关状态变化触发事件，回调含item（当前开关项）和checked（是否开启）作用：批量管理多个开关，支持多列排列，适用于多项功能开关设置场景，无需手动组合多个switch控件示例（WXML）：<switch-group class="switch-group" options="{{switchOptions}}" model-value="{{selectedSwitches}}" column-count="2" color="#07c160" bindchange="onSwitchGroupChange"><switch-group>JS：Page({ data: { selectedSwitches: ["msg", "push"], switchOptions: [ { label: "消息通知", value: "msg", checked: true }, { label: "推送提醒", value: "push", checked: true }, { label: "夜间模式", value: "night", checked: false }, { label: "自动更新", value: "update", checked: false, disabled: true } ] }, onSwitchGroupChange(e) { console.log("选中的开关标识：", e.detail.value); }})WXSS：.switch-group { padding: 20rpx; display: flex; flex-wrap: wrap; gap: 20rpx;}.switch-group .switch-item { width: calc(50% - 10rpx); display: flex; justify-content: space-between; align-items: center; padding: 16rpx; background-color: #f5f5f5; border-radius: 8rpx;}适用场景：系统设置中的多项功能开关、个人中心偏好设置、表单中的多项开关选择、功能模块启用/禁用设置等；兼容性：基础库2.18.0及以上支持；注意事项：1. options数组中checked字段控制开关默认状态，与model-value绑定的标识数组对应；2. 单个开关的disabled字段控制该开关是否可操作，不影响其他开关；3. 列数column-count根据页面宽度设置，2列或3列适用于大部分场景；4. 开关颜色color可根据品牌风格自定义，提升页面一致性；5. 绑定的model-value数组中存储的是选中开关的value值，确保与options中的value对应
tab-bar（自定义底部导航控件）class、id、style、hidden1. list：array类型，导航项列表，必填，格式为[{pagePath: '页面路径', text: '导航文字', iconPath: '未选中图标', selectedIconPath: '选中图标'}]；2. selected-index：number类型，当前选中索引，默认0；3. color：string类型，未选中文字颜色，默认#666；4. selected-color：string类型，选中文字颜色，默认#07c160；5. background-color：string类型，导航栏背景色，默认#fff；6. border-top：boolean类型，是否显示顶部边框，默认true；7. bindchange：导航切换触发事件，回调含index（选中索引）和item（选中项）作用：替代原生tabBar，支持更灵活的样式自定义，适配个性化导航需求示例（WXML）：<tab-bar class="custom-tab-bar" list="{{tabBarList}}" selected-index="{{selectedIndex}}" selected-color="#07c160" bindchange="onTabChange"><tab-bar>JS：Page({ data: { selectedIndex: 0, tabBarList: [ { pagePath: "pages/index/index", text: "首页", iconPath: "images/home.png", selectedIconPath: "images/home-active.png" }, { pagePath: "pages/mine/mine", text: "我的", iconPath: "images/mine.png", selectedIconPath: "images/mine-active.png" } ] }, onTabChange(e) { const { index, item } = e.detail; this.setData({ selectedIndex: index }); / 跳转页面 wx.switchTab({ url: item.pagePath }); }})WXSS：.custom-tab-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 98rpx; box-sizing: border-box;}适用场景：小程序底部导航切换、多模块入口导航等；兼容性：基础库2.10.0及以上支持；注意事项：1. 页面路径pagePath需在app.json中注册，且为tabBar页面；2. 图标建议使用png格式，尺寸建议40rpx×40rpx，避免拉伸；3. 导航项数量建议2-5个，符合微信小程序设计规范；4. 需设置position: fixed固定在底部，避免被页面内容遮挡；5. 切换页面使用wx.switchTab方法，确保跳转正确
tabbar-item（底部导航项）class、id、style、hidden1. pagePath：string类型，跳转页面路径，必填；2. text：string类型，导航文字，必填；3. iconPath：string类型，未选中图标路径，必填；4. selectedIconPath：string类型，选中图标路径，必填；5. selectedColor：string类型，选中文字颜色；6. bindtap：点击触发事件作用：作为tabbar的子项，构成底部导航菜单，实现页面快速切换示例（WXML）：<tabbar class="tabbar" current="{{currentTab}}" bindchange="onTabChange"> <tabbar-item pagePath="pages/index/index" text="首页" iconPath="/images/home.png" selectedIconPath="/images/home-active.png"></tabbar-item> <tabbar-item pagePath="/pages/mine/mine" text="我的" iconPath="/images/mine.png" selectedIconPath="/images/mine-active.png"></tabbar-item><tabbar>JS：data: { currentTab: 0 },onTabChange(e) { this.setData({ currentTab: e.detail.index }); }WXSS：.tabbar { position: fixed; bottom: 0; width: 100%; height: 100rpx; border-top: 1rpx solid #eee; }适用场景：小程序底部主导航、多模块页面切换（如首页、分类、我的等）；兼容性：基础库1.0.0及以上支持；注意事项：1. 必须嵌套在tabbar组件中使用；2. 图标建议尺寸为64rpx×64rpx；3. pagePath需在app.json的pages中注册；4. 底部导航项数量建议3-5个
tab-container（标签容器控件）class、id、style、hidden1. tabs：array类型，标签数组（含title/key），必填；2. active-key：string类型，当前激活标签key，必填；3. tab-position：string类型，标签位置，可选"top""bottom"/"left"/"right"，默认"top"；4. active-color：string类型，激活颜色，默认#07c160；5. swipeable：boolean类型，是否可滑动切换，默认false；6. bindchange：标签切换触发事件，返回当前active-key作用：集成标签切换与内容容器，实现标签页功能，支持多位置布局和滑动切换，替代手动组合tab与内容区域示例（WXML）：<tab-container class="tab-container" tabs="{{tabs}}" active-key="{{activeKey}}" tab-position="top" swipeable bindchange="onTabChange"> <view slot="tab1" class="tab-content">标签1内容区域</view> <view slot="tab2" class="tab-content">标签2内容区域</view><tab-container>JS：data: { tabs: [{ title: "标签1", key: "tab1" }, { title: "标签2", key: "tab2" }], activeKey: "tab1"},onTabChange(e) { this.setData({ activeKey: e.detail.activeKey });}WXSS：.tab-container { width: 100%; }.tab-content { padding: 20rpx; }.tab-container .tab-bar { border-bottom: 1rpx solid #eee; }适用场景：表单分步填写、详情页多维度信息展示、个人中心标签页、功能模块切换等；兼容性：基础库2.12.0及以上支持；注意事项：1. 标签数量建议3-4个，过多时开启swipeable避免布局拥挤；2. 标签位置为left/right时，需指定标签栏宽度，避免适配异常；3. 内容区域通过slot与标签key对应，确保切换同步；4. 可通过自定义样式修改标签栏高度、文字大小等
tab-scroll-view（标签滚动视图控件）class、id、style、hidden1. tabs：array类型，标签数组（含title/key），必填；2. active-key：string类型，当前激活key，必填；3. scroll-x：boolean类型，是否横向滚动内容，默认false；4. scroll-y：boolean类型，是否纵向滚动内容，默认true；5. bindchange：标签切换触发事件；6. bindscroll：内容滚动触发事件作用：集成标签切换与滚动视图，实现标签与滚动内容联动，适用于长内容标签页场景示例（WXML）：<tab-scroll-view class="tab-scroll-view" tabs="{{tabs}}" active-key="{{activeKey}}" bindchange="onTabChange"> <view slot="key1" class="tab-content">标签1长内容区域...</view> <view slot="key2" class="tab-content">标签2长内容区域...</view><tab-scroll-view>JS：data: { tabs: [{ title: "详情", key: "key1" }, { title: "评价", key: "key2" }], activeKey: "key1"},onTabChange(e) { this.setData({ activeKey: e.detail.activeKey });}WXSS：.tab-scroll-view { width: 100%; height: 500rpx; }.tab-content { padding: 20rpx; }适用场景：商品详情页（详情+评价+参数）、资讯详情页（内容+评论）、课程详情页（介绍+大纲）等；兼容性：基础库2.14.0及以上支持；注意事项：1. 需为控件设置固定高度，确保滚动视图正常工作；2. 内容区域通过slot与标签key对应，保证切换同步；3. 横向滚动scroll-x适用于内容横向排列的场景（如图片浏览）；4. 可通过bindscroll事件监听内容滚动状态，实现关联交互
tag（标签控件）class、id、style、hidden1. text：string类型，标签文字，必填；<br>2. type：string类型，标签类型，可选"primary"/"success"/"warning"/"danger"/"info"，默认"info"；<br>3. closable：boolean类型，是否可关闭，默认false；<br>4. bindclose：关闭标签触发事件作用：展示标签样式的文本，支持关闭功能，用于分类、标签展示等<br>示例（WXML）：<br><tag class="tag" text="热销" type="danger" closable bindclose="onTagClose"></tag><br><tag class="tag" text="新品" type="success"></tag><br>JS：<br>onTagClose() {<br> wx.showToast({ title: '标签已关闭' });<br>}<br>WXSS：<br>.tag { margin: 0 10rpx 10rpx 0; padding: 5rpx 10rpx; border-radius: 4rpx; }适用场景：商品标签、分类标签、状态标签、筛选结果标签等；<br>兼容性：基础库2.15.0及以上支持；<br>注意事项：1. 不同type对应不同默认颜色；2. closable为true时显示关闭按钮；3. 标签文字建议简短（1-4字）
tag-group（标签组控件）class、id、style、hidden1. tags：array类型，标签数组（含text/value），必填；2. active-values：array类型，选中标签值数组，默认[]；3. multiple：boolean类型，是否支持多选，默认true；4. size：string类型，标签尺寸，可选"small""middle"/"large"，默认"middle"；5. type：string类型，标签样式类型，可选"primary""success"/"warning"/"danger"/"info"，默认"info"；6. bindchange：选中状态变化触发事件，返回active-values作用：批量展示标签并管理选中状态，支持单选/多选，替代手动组合多个tag控件示例（WXML）：<tag-group class="tag-group" tags="{{tagList}}" active-values="{{activeTags}}" multiple type="primary" bindchange="onTagChange"></tag-group>JS：data: { tagList: [{ text: "红色", value: "red" }, { text: "蓝色", value: "blue" }, { text: "绿色", value: "green" }], activeTags: ["red"]},onTagChange(e) { this.setData({ activeTags: e.detail.active-values });}WXSS：.tag-group { padding: 20rpx; display: flex; flex-wrap: wrap; gap: 15rpx; }适用场景：商品属性筛选、兴趣标签选择、分类标签多选、表单标签组输入等；兼容性：基础库2.15.0及以上支持；注意事项：1. multiple为false时，active-values为单值数组，每次仅选中一个标签；2. 标签数量较多时自动换行，适配不同屏幕宽度；3. 不同type对应不同默认颜色，可通过自定义样式覆盖；4. 标签文字建议简短（1-4字），避免标签过长导致布局错乱
text（文本控件）1. 基础属性：class、id、style、hidden、data-*、bindtap2. 特有属性：selectable、space、decode1. selectable：boolean类型，是否允许用户选中文本，默认false；2. space：string类型，空格显示方式，可选值"nbsp"（普通空格）、"emsp"（全角空格）、"ensp"（半角空格），默认无；3. decode：boolean类型，是否解码HTML实体（如&lt;对应<、&gt;对应>），默认false；4. hidden：boolean类型，是否隐藏文本，默认false。1. 文本展示场景：作用：用于展示页面文本内容，支持文本选中、空格控制、HTML实体解码，是小程序中唯一可选中文本的原生控件；示例（WXML代码）：<!-- 可选中文本，带全角空格和HTML实体解码 --> <text class="content-text" selectable="{{true}}" space="emsp" decode="{{true}}" bindtap="handleTextTap"> 可选中的文本内容&emsp;带全角空格&lt;解码后显示小于号> </text> <!-- 不可选中的普通文本 --> <text class="normal-text">普通文本，无法被选中</text> <!-- WXSS样式 --> .content-text { font-size: 32rpx; color: #222; line-height: 48rpx; margin: 15rpx 0; } .normal-text { font-size: 28rpx; color: #666; }说明：第一个text控件设置为可选中，使用全角空格并解码HTML实体，点击文本可触发事件；第二个为普通文本，不可选中，满足不同文本展示需求。1. 适用场景：页面文本展示、可复制文本（如联系方式、兑换码）、带特殊空格的文本排版；2. 兼容性：selectable、space、decode属性全基础库版本支持；3. 注意事项：- text是行内元素，不会独占一行，多个text会默认横向排列；- 仅text控件支持selectable属性，view内的文本无法直接选中；- decode属性仅能解码部分HTML实体，复杂实体可能无法正常解析；- 文本过长时，需通过white-space、overflow等样式控制换行和溢出显示。
textarea（多行文本输入框）1. 基础属性：class、id、style、hidden、data-*、bindinput、bindblur、bindfocus、bindlinechange2. 特有属性：value、placeholder、placeholder-style、placeholder-class、disabled、maxlength、auto-height、fixed、cursor-spacing1. value：string类型，初始文本内容，默认空；2. placeholder：string类型，输入提示文本；3. disabled：boolean类型，是否禁用，默认false；4. maxlength：number类型，最大输入长度，默认140；5. auto-height：boolean类型，是否自动调整高度（随输入内容行数变化），默认false；6. fixed：boolean类型，是否固定定位（避免软键盘弹出时错位），默认false；7. cursor-spacing：number类型，光标与键盘的距离，单位px，默认0；8. bindlinechange：监听输入内容行数变化事件。1. 多行文本输入场景：作用：用于接收用户输入的多行文本（如备注、留言、反馈内容），支持自动高度调整和行数监听；示例（WXML代码）：<!-- 自动高度的多行输入框 --> <textarea class="note-textarea" value="{{noteContent}}" placeholder="请输入备注信息（最多200字）" placeholder-style="color:#ccc; font-size:28rpx;" maxlength="200" auto-height="{{true}}" bindinput="handleNoteInput" bindlinechange="handleNoteLineChange"></textarea> <!-- 固定高度的禁用输入框 --> <textarea class="disabled-textarea" value="这是不可编辑的固定文本" disabled="{{true}}"></textarea> <!-- WXSS样式 --> .note-textarea { width: 100%; padding: 20rpx; border: 1rpx solid #eee; border-radius: 10rpx; margin: 15rpx 0; font-size: 32rpx; color: #333; } .disabled-textarea { width: 100%; height: 200rpx; padding: 20rpx; border: 1rpx solid #eee; border-radius: 10rpx; color: #999; background: #fafafa; }说明：第一个textarea开启自动高度，随输入内容行数自适应，限制200字输入；第二个为固定高度的禁用状态，用于展示不可编辑的多行文本。1. 适用场景：备注输入、留言反馈、评论编辑、长文本表单填写；2. 兼容性：auto-height属性需基础库1.4.0及以上版本；3. 注意事项：- 软键盘弹出可能导致输入框错位，可设置fixed=true或通过cursor-spacing调整光标与键盘距离；- auto-height开启时，无需设置height，组件会根据输入行数自动调整，最大高度可通过样式限制；- 监听输入内容建议用bindinput，bindlinechange可用于统计行数（如“1/5行”）；- 禁止在scroll-view内使用textarea，可能出现滚动和定位异常。
textarea-cell（多行文本单元格）class、id、style、hidden1. title：string类型，单元格标题，必填；2. value：string类型，文本内容；3. placeholder：string类型，占位提示文字，默认"请输入"；4. maxlength：number类型，最大输入长度，默认140；5. auto-height：boolean类型，是否自动调整高度，默认true；6. bindinput：输入内容变化触发事件；7. bindconfirm：确认输入触发事件作用：集成多行文本输入框和单元格布局，用于表单多行输入场景（如备注、反馈等）示例（WXML）：<textarea-cell class="textarea-cell" title="订单备注" value="{{remark}}" placeholder="请输入订单备注信息" maxlength="200" bindinput="onRemarkInput"></textarea-cell>JS：onRemarkInput(e) { this.setData({ remark: e.detail.value }); }WXSS：.textarea-cell { padding: 20rpx; border-bottom: 1rpx solid #eee; }适用场景：订单备注输入、意见反馈、表单多行文本填写等；兼容性：基础库2.17.0及以上支持；注意事项：1. 最大输入长度根据业务需求设置，建议不超过500字；2. auto-height为true时，文本框高度随内容自动调整，避免滚动；3. 占位提示文字需明确引导用户输入内容，如"请输入需要备注的信息"；4. 可结合表单校验，确保输入内容符合要求
timeline（时间线控件）class、id、style、hidden1. items：array类型，时间线项数组（含time/content/icon），必填；2. direction：string类型，排列方向，可选"vertical""horizontal"，默认"vertical"；3. align：string类型，内容对齐方式，可选"left"/"right"/"center"，默认"left"；4. dot-color：string类型，节点颜色，默认#07c160；5. line-color：string类型，连接线颜色，默认#eee；6. binditemclick：点击时间线项触发事件作用：标准化时间线展示，用于展示流程进度、历史记录等，支持垂直和水平两种排列方式示例（WXML）：<timeline class="timeline" items="{{timelineItems}}" direction="vertical" dot-color="#07c160" binditemclick="onItemClick"></timeline>JS：data: { timelineItems: [ { time: "2024-01-01", content: "提交订单", icon: "success" }, { time: "2024-01-02", content: "订单审核通过", icon: "success" }, { time: "2024-01-03", content: "已发货", icon: "success" } ]},onItemClick(e) { console.log("点击的时间线项索引：", e.detail.index); }WXSS：.timeline { padding: 20rpx; }.timeline .timeline-item { margin-bottom: 30rpx; }适用场景：订单物流进度、任务流程记录、用户操作历史、项目阶段进度等；兼容性：基础库2.15.0及以上支持；注意事项：1. 垂直方向适用于流程步骤较多的场景，水平方向适用于时间跨度较短的场景；2. items的icon字段支持内置图标类型（如success、info、warning等），也可传入自定义图片地址；3. 时间线项内容建议简洁明了，避免过长导致布局错乱；4. 可通过自定义样式修改节点大小、连接线宽度等
time-picker（时间选择器控件）class、id、style、hidden1. value：string类型，选中时间，格式"HH:mm"/"HH:mm:ss"，默认当前时间；2. format：string类型，时间显示格式，可选"HH:mm"/"HH:mm:ss"，默认"HH:mm"；3. min-time：string类型，最小可选时间，默认"00:00"；4. max-time：string类型，最大可选时间，默认"23:59"；5. show-footer：boolean类型，是否显示底部确认/取消按钮，默认true；6. bindconfirm：确认选择触发事件；7. bindcancel：取消选择触发事件作用：专门用于时间选择的控件，集成时间展示和选择面板，精准适配时间选择场景示例（WXML）：<time-picker class="time-picker" value="{{selectedTime}}" format="HH:mm" min-time="08:00" max-time="18:00" bindconfirm="onTimeConfirm"></time-picker>JS：data: { selectedTime: "10:30" },onTimeConfirm(e) { this.setData({ selectedTime: e.detail.value }); wx.showToast({ title: `选中时间：${e.detail.value}` });}WXSS：.time-picker { padding: 20rpx; border-bottom: 1rpx solid #f5f5f5; }适用场景：预约时间选择、上下班打卡时间设置、活动开始时间选择、配送时间选择等；兼容性：基础库2.25.0及以上支持；注意事项：1. 时间格式需严格匹配指定类型，避免格式错误；2. min-time和max-time用于限制时间范围，需按对应格式设置；3. 底部按钮隐藏时，需通过其他交互触发确认/取消逻辑；4. 可结合日期选择器联动使用，实现日期+时间的完整选择
verify-code（验证码输入控件）class、id、style、hidden、disabled1. model-value：string类型，绑定的验证码值，支持双向绑定，必填；2. length：number类型，验证码位数，默认6，可选4-8；3. type：string类型，输入类型，可选"number"/"text"，默认"number"；4. gap：number类型，输入框之间的间距，单位rpx，默认10；5. border-style：string类型，边框样式，可选"solid"/"underline"/"none"，默认"solid"；6. focus：boolean类型，是否自动获取焦点，默认false；7. auto-submit：boolean类型，输入完成后是否自动提交，默认false；8. bindcomplete：输入完成时触发事件；9. bindsubmit：自动提交时触发事件（auto-submit为true时）作用：专门用于验证码输入场景，采用多框分隔样式，支持自动聚焦、输入完成自动提交，提升验证码输入体验示例（WXML）：<verify-code class="verify-code" model-value="{{verifyCode}}" length="6" type="number" gap="15" border-style="solid" focus auto-submit bindsubmit="onVerifySubmit"><verify-code>JS：Page({ data: { verifyCode: "" }, onVerifySubmit(e) { const code = e.detail.value; console.log("验证码输入完成，自动提交：", code); / 执行验证码验证逻辑 }})WXSS：.verify-code { display: flex; justify-content: center; padding: 30rpx 0;}.verify-code .code-input { width: 60rpx; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 32rpx; border: 2rpx solid #e5e5e5; border-radius: 8rpx;}.verify-code .code-input:focus { border-color: #07c160; outline: none;}适用场景：手机验证码登录、短信验证码验证、邮箱验证码输入、支付验证码校验等场景；兼容性：基础库2.20.0及以上支持；注意事项：1. 验证码位数length建议根据业务需求设置，常见4位或6位；2. 输入类型type设为number时，仅允许输入数字，适用于数字验证码；3. 自动聚焦focus建议在页面加载完成后设置，提升用户体验；4. 输入过程中会自动跳转到下一个输入框，输入完成后自动聚焦到最后一个；5. 边框样式border-style设为underline时，仅显示下划线，适用于简约风格页面
video（视频播放控件）1. 基础属性：class、id、style、hidden、data-*、bindplay、bindpause、bindended、bindtimeupdate、bindfullscreenchange2. 特有属性：src、loop、controls、poster、initial-time、duration、autoplay、muted、enable-fullscreen、enable-play-gesture1. src：string类型，视频资源路径（本地/网络/云存储），必填；2. loop：boolean类型，是否循环播放，默认false；3. controls：boolean类型，是否显示默认播放控件，默认true；4. poster：string类型，视频封面图片路径（未播放时显示）；5. autoplay：boolean类型，是否自动播放，默认false；6. muted：boolean类型，是否静音播放，默认false；7. enable-fullscreen：boolean类型，是否允许全屏播放，默认true；8. enable-play-gesture：boolean类型，是否支持手势控制（双击全屏、滑动调节进度/音量），默认false；9. initial-time：number类型，初始播放位置，单位s，默认0。1. 视频播放场景：作用：用于在小程序内播放视频文件（如短视频、教程视频、广告视频），支持全屏播放、手势控制等功能；示例（WXML代码）：<!-- 带封面的视频播放控件 --> <video class="video-player" src="https://example.com/video/demo.mp4" loop="{{false}}" controls="{{true}}" poster="https://example.com/video/poster.jpg" initial-time="5" autoplay="{{false}}" muted="{{false}}" enable-fullscreen="{{true}}" enable-play-gesture="{{true}}" bindplay="handleVideoPlay" bindpause="handleVideoPause" bindfullscreenchange="handleFullScreenChange"></video> <!-- 自定义封面和播放按钮 --> <view class="custom-video"> <video class="video-core" src="https://example.com/video/another.mp4" controls="{{false}}" bindplay="handleCustomVideoPlay" id="customVideo"></video> <image src="{{videoPoster}}" class="video-cover" wx:if="{{!isPlaying}}"/> <button class="play-btn" bindtap="handleCustomPlay" wx:if="{{!isPlaying}}">播放</button> </view> <!-- WXSS样式 --> .video-player { width: 100%; height: 300rpx; margin: 20rpx 0; } .custom-video { position: relative; width: 100%; height: 300rpx; } .video-core { width: 100%; height: 100%; } .video-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; }说明：第一个video使用默认控件，展示封面，初始播放位置5秒，支持全屏和手势控制，监听播放、暂停和全屏切换事件；第二个隐藏默认控件，自定义封面和播放按钮，点击按钮触发播放，播放后隐藏封面和按钮，提升页面一体化风格。1. 适用场景：短视频播放、教程视频、广告视频、直播回放；2. 兼容性：enable-play-gesture需基础库1.9.0及以上版本；3. 注意事项：- 网络视频资源需配置小程序后台的“合法域名”，否则无法播放；- autoplay属性在微信客户端中默认禁止自动播放，需用户手动触发（如点击播放按钮）才能播放，muted=true时可能允许自动播放（视微信版本而定）；- 视频封面poster建议与视频尺寸一致，避免拉伸变形；- 全屏播放时，会自动旋转屏幕，可通过bindfullscreenchange事件监听全屏状态变化，同步页面逻辑；- 自定义播放控制需设置controls=false，通过wx.createVideoContext API获取视频上下文，控制播放/暂停、进度调节等；- 视频控件比较消耗性能，避免在同一页面加载过多视频，可采用懒加载方式（滚动到可视区域再加载）；- 小视频场景建议使用scroll-view配合video，实现上下滑动切换视频，并通过wx.createVideoContext控制播放状态（如滑动时暂停当前视频）。
video-player（视频播放器控件）class、id、style、hidden1. src：string类型，视频资源地址，必填；2. poster：string类型，视频封面图地址，可选；3. title：string类型，视频标题，可选；4. autoplay：boolean类型，是否自动播放，默认false；5. loop：boolean类型，是否循环播放，默认false；6. muted：boolean类型，是否静音，默认false；7. show-progress：boolean类型，是否显示进度条，默认true；8. show-fullscreen：boolean类型，是否显示全屏按钮，默认true；9. bindplaybindpause/bindended/bindfullscreenchange：对应播放状态触发事件作用：增强版视频播放控件，集成封面、标题、全屏控制等功能，替代原生video控件，提升交互体验示例（WXML）：<video-player class="video-player" src="{{videoSrc}}" poster="{{videoPoster}}" title="产品介绍视频" show-fullscreen bindfullscreenchange="onFullScreenChange"></video-player>JS：data: { videoSrc: "https:/example.com/videos/product.mp4", videoPoster: "https://example.com/posters/product.jpg"},onFullScreenChange(e) { console.log("是否全屏：", e.detail.fullScreen);}WXSS：.video-player { width: 100%; border-radius: 10rpx; overflow: hidden; }适用场景：产品介绍视频、课程视频播放、短视频展示、直播回放播放等；兼容性：基础库2.17.0及以上支持；注意事项：1. 视频资源和封面图地址需符合小程序安全域名规范，支持HTTPS；2. 自动播放autoplay需满足用户交互条件，或设置muted: true（静音自动播放）；3. 封面图建议与视频比例一致（如16:9），避免拉伸变形；4. 全屏切换时需适配横竖屏布局，可在bindfullscreenchange事件中处理；5. 支持的视频格式与原生video控件一致，如mp4、mov、avi等
view（视图容器）1. 基础属性：class、id、style、hidden、data-*、bindtap、catchtap2. 特有属性：hover-class、hover-stop-propagation、hover-start-time、hover-stay-time1. hover-class：string类型，指定按下去的样式类，默认"none"（无样式）；2. hover-stop-propagation：boolean类型，是否阻止事件冒泡，默认false；3. hover-start-time：number类型，按住后多久出现点击态，单位ms，默认50；4. hover-stay-time：number类型，手指松开后点击态保留时间，单位ms，默认400；5. hidden：boolean类型，是否隐藏控件，默认false；6. data-*：自定义数据属性，用于事件中传递数据。1. 页面布局容器场景：作用：作为小程序最基础的容器控件，用于包裹其他控件、划分页面区域，支持嵌套使用，类似HTML中的div；示例（WXML代码）：<!-- 基础布局容器，带点击态和事件传递 --> <view class="container" hover-class="container-hover" hover-start-time="100" hover-stay-time="300" data-id="101" bindtap="handleContainerTap"> <view class="inner-view">嵌套的子视图容器</view> <text>view容器内的文本内容</text> </view> <!-- WXSS样式 --> .container { width: 100%; padding: 20rpx; background: #f5f5f5; } .container-hover { background: #e8e8e8; } .inner-view { margin-bottom: 15rpx; color: #333; }说明：外层view作为页面区域容器，设置点击态样式和事件传递，内部嵌套子view和文本控件，实现基础的页面布局和交互效果。1. 适用场景：页面布局划分、控件容器包裹、可点击区域制作；2. 兼容性：全小程序基础库版本支持；3. 注意事项：- view默认是块级元素，独占一行，可通过display:flex等样式修改布局方式；- hover-class仅在微信客户端7.0.0及以上版本支持；- 避免多层嵌套过深（建议不超过5层），否则可能影响页面渲染性能；- 绑定事件时，bindtap会冒泡，catchtap会阻止冒泡，根据需求选择。
virtual-list（虚拟列表控件）class、id、style、hidden1. height：number类型，列表可视高度（px），必填；<br>2. item-height：number类型，列表项高度（px），必填；<br>3. items：array类型，列表数据，必填；<br>4. bindscroll：列表滚动触发，返回滚动位置；<br>5. bindloadmore：触底加载更多触发作用：高效渲染长列表（万级数据），仅渲染可视区域内的元素，提升性能<br>示例（WXML）：<br><virtual-list class="virtual-list" height="{{500}}" item-height="{{80}}" items="{{longList}}" bindloadmore="loadMoreData"></virtual-list><br>JS：<br>data: { longList: [], page: 1 }<br>loadMoreData() { // 加载更多数据<br> const newData = Array(20).fill('列表项' + this.data.page);<br> this.setData({ longList: [...this.data.longList, ...newData], page: this.data.page + 1 });<br>}<br>WXSS：<br>.virtual-list { width: 100%; border: 1rpx solid #eee; }适用场景：大数据列表（如商品列表、聊天记录、订单列表）、无限滚动列表等；<br>兼容性：基础库2.18.0及以上支持；<br>注意事项：1. item-height需为固定值，动态高度需额外处理；2. 数据更新需通过setData触发重渲染；3. 避免列表项内包含复杂组件（如canvas）导致性能下降
waterfall（瀑布流控件）class、id、style、hidden1. data：array类型，瀑布流数据数组，必填；2. columns：number类型，列数，默认2；3. gap：number类型，列间距，默认15rpx；4. item-height：number类型，默认item高度（自适应高度时可不设），可选；5. load-more：boolean类型，是否支持加载更多，默认false；6. bindloadmore：触底加载更多触发事件；7. binditemclick：点击瀑布流项触发事件作用：实现自适应高度的瀑布流布局，用于展示不规则高度的内容，替代手动实现瀑布流逻辑示例（WXML）：<waterfall class="waterfall" data="{{waterfallData}}" columns="2" gap="20rpx" load-more bindloadmore="loadMoreData" binditemclick="onItemClick"></waterfall>JS：data: { waterfallData: [] },onLoad() { this.loadMoreData(); },loadMoreData() { / 模拟请求数据 const newData = Array(6).fill(0).map((_, i) => ({ img: `https:/example.com/img${i}.jpg`, desc: `瀑布流项${i+1}` })); this.setData({ waterfallData: [...this.data.waterfallData, ...newData] });}WXSS：.waterfall { padding: 20rpx; }.waterfall .waterfall-item { margin-bottom: 20rpx; background-color: #fff; border-radius: 10rpx; overflow: hidden; }适用场景：商品瀑布流展示、图片相册、资讯列表、笔记卡片等不规则高度内容展示；兼容性：基础库2.24.0及以上支持；注意事项：1. 列数columns建议设置2列，适配移动端屏幕；3列及以上需注意小屏适配；2. 数据项高度差异较大时，瀑布流效果更明显；高度一致建议用grid控件；3. 加载更多功能需配合后端分页接口，避免一次性加载过多数据；4. 图片较多时，建议设置图片懒加载，提升页面加载性能；5. 可通过自定义样式修改item间距、边框、阴影等
watermark（水印控件）class、id、style、hidden1. content：string类型，水印文字，必填；<br>2. fontSize：number类型，字体大小（px），默认12；<br>3. color：string类型，字体颜色，默认rgba(0,0,0,0.1)；<br>4. rotate：number类型，旋转角度（度），默认-15；<br>5. spacing：number类型，水印间距（px），默认20作用：为页面/组件添加文字水印，防止内容盗用，支持自定义样式<br>示例（WXML）：<br><watermark class="watermark" content="豆包文档 禁止盗用" fontSize="14" color="rgba(150,150,150,0.2)" rotate="-20"></watermark><br>WXSS：<br>.watermark { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; pointer-events: none; }适用场景：敏感数据页面、内部系统页面、文档展示页面、内容版权保护等；<br>兼容性：基础库2.26.0及以上支持；<br>注意事项：1. 需设置pointer-events: none避免遮挡交互；2. 颜色建议使用低透明度，不影响主内容阅读；3. 旋转角度建议-45~0度之间
...全文
24 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
微信小程序-仿网易云音乐
微信小程序-仿网易云音乐
微信小程序
这台代码是微信小程序的地图小控件的demo程序。
情人节礼物小程序，运行是屏幕铺满玫瑰花
运行是屏幕铺满玫瑰花！！！ 利用计时器控件，循环复杂嵌套实现！！！
微信6.0android客户端用到的资源文件
微信6.0android客户端用到的资源文件 包括声音 图片
微信小程序视图控件使用教程及代码示例
微信小程序作为一种新型的轻应用平台，提供了一套丰富的视图控件系统，这些控件帮助开发者快速构建界面，提升用户体验。本章节将概览微信小程序的视图控件家族，为读者提供一个关于如何使用这些控件的全局视角。View 控件是微信小程序中最为基础的布局元素，类似于 HTML 中的 div 标签。它可以用来构建小程序页面的基础结构，并通过嵌套使用来形成复杂的布局。View 控件具有以下特性：它是块级元素，意味着它会占据一整行的空间。可以设置宽高，并通过display属性来控制布局行为。
OpenTK学习

3

社区成员

30

社区内容

发帖
与我相关
我的任务
社区描述
openTK、OpenGL、WebGL技术学习交流
图形渲染c#程序人生 技术论坛（原bbs） 广东省·深圳市
社区管理员
  • 亿只小灿灿
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章