前端UI组件小程序设计系统移动开发【免费下载链接】tdesign-miniprogramWechat MiniProgram and Uniapp UI components lib for TDesign项目地址https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram点击查看免费下载本文围绕 tdesign-miniprogram 开源仓库中 pro-components 业务组件t-chat-record展开系统讲解其在聊天场景中的语音输入能力从组件引入、基础用法、关键参数、事件与插槽到微信同声传译插件WechatSI的接入、麦克风权限授权流程与常见问题排查。读完本文你可以直接在微信小程序聊天页中落地按住说话 → 实时语音转文字 → 发送的完整交互并能根据源码理解其内部状态机与插件回调机制。组件定位与适用场景t-chat-record位于仓库 packages/pro-components/chat/chat-record是 TDesign 小程序聊天场景组件族chat-actionbar、chat-list、chat-message、chat-sender 等中的语音输入专用组件属于pro-components业务型组件而非基础 UI 组件。其核心能力是以按住说话的手势交互启动录音借助微信官方同声传译插件 WechatSI实现录音过程中的实时语音转文字录音结束松手后通过recognize事件向外抛出语音文件路径、识别文本与录音时长由业务侧决定如何发送内置完整的麦克风权限申请、拒绝引导、系统级麦克风检测流程。从源码注释可见该组件通过wxComponent()装饰器注册并混入了usingConfig行为chat-record.ts用于从 config-provider 读取组件文案因此文案支持通过全局 locale 配置定制。文档头部同时标注了重要前提该组件自 1.16.0 版本起上线当前渲染框架支持情况为WebView见 README.md。需要说明的是chat-record 目录下的两份 README中文版与英文版在定位上略有差异——中文版聚焦语音输入英文版则以聊天记录列表为标题本文以组件实际源码语音输入为准展开。组件引入与 TDesign 其他组件一致t-chat-record支持全局与局部两种引入方式全局引入在 miniprogram 根目录的app.json的usingComponents中声明局部引入在需要使用的页面或组件对应的index.json中声明。usingComponents: { t-chat-record: tdesign-miniprogram/chat-record/chat-record }引入后还需要完成两项前置依赖详见后文 FAQ 章节在app.json中声明微信同声传译插件WechatSI确保运行环境满足插件要求真机调试、用户授权麦克风。组件本身通过 index.ts 对外导出ChatRecord类与类型定义组件 JSON 中开启了styleIsolation: apply-shared与多插槽chat-record.json。基础用法直接使用最简用法只需传入records数据即可渲染一个基础聊天记录列表对应英文版 README 中的 Basic Typet-chat-record records{{records}} /在此基础上英文版 README 还给出了几个典型扩展场景开启时间分组——按时间间隔自动对聊天记录进行分组展示t-chat-record records{{records}} show-time-group{{true}} time-group-interval{{5}} /滚动加载更多——滚动到顶部时加载历史消息t-chat-record records{{records}} loading{{loading}} finished{{finished}} bind:loadmorehandleLoadMore /自定义消息渲染——通过message插槽完全自定义单条消息内容t-chat-record records{{records}} view slotmessage slot-scoperecord !-- Custom message content -- /view /t-chat-record需要提醒的是当前仓库中 chat-record 目录下的源码实现为语音输入组件以上records / show-time-group / loadmore / message等用法属于英文版 README 描述的能力中文版 README 与 chat-record.ts 中并无对应实现实际使用语音能力时应以后文为准。语音输入的标准接入方式语音输入组件通常作为t-chat-sender聊天输入框的speech插槽内容出现。示例页 base/index.wxml 展示了标准组合t-chat-sender value{{value}} loading{{loading}} allowSpeech{{true}} bind:sendonSend view slotspeech t-chat-record bind:recognizehandleRecognize view slotspeechInput classspeech-slot-btn 按住说话 /view view slotspeechNoAuth classspeech-btn-error 请授权麦克风权限 /view /t-chat-record /view /t-chat-sender这里的关键配合点t-chat-sender的allowSpeech属性决定是否显示语音/键盘切换按钮源码见 chat-sender.wxml当处于语音模式时渲染speech插槽内容t-chat-record提供两个插槽speechInput语音输入按钮区域与speechNoAuth未授权时的引导按钮区域示例中分别显示按住说话与请授权麦克风权限业务侧监听recognize事件拿到识别结果。示例页 base/index.js 中handleRecognize会读取e.detail.voiceText若有文本则直接调用onSend将文本作为消息发出从而实现语音转文字后自动发送handleRecognize(e) { const voiceMsg e.detail; console.log(语音识别结果:, voiceMsg); if (voiceMsg.voiceText) { // 自动发送识别到的文本 this.onSend({ detail: { value: voiceMsg.voiceText } }); } }页面级 JSON 需要声明t-chat-sender、t-chat-record等组件参见 base/index.json。Props 参数详解组件对外暴露 5 个属性定义见 props.ts 与 type.ts汇总如下| 名称 | 类型 | 默认值 | 描述 | | -- | -- | -- | -- | | style | Object | - | 样式 | | custom-style | Object | - | 样式一般用于开启虚拟化组件节点场景 | | auto-send | Boolean | false | 是否自动发送预留扩展 | | bottom-height | Number | 0 | 底部高度用于适配键盘弹出时的布局 | | duration | Number | 60000 | 最大录音时长ms | | lang | String | zh_CN | 识别语言WechatSI 插件参数 |结合源码逐一说明其实际影响auto-send默认 false属性注释为是否自动发送预留扩展。当前源码中并未读取该属性做额外逻辑recognize事件的触发时机固定为录音停止后是否发送由业务侧决定该属性为后续版本扩展预留bottom-height默认 0从 WXML 可知该值被直接用于录音浮层的定位样式stylebottom: {{bottomHeight}}rpx;chat-record.wxml用于在键盘弹出等场景下调整录音面板的位置。示例页在chat-sender上通过bind:keyboardheightchange监听键盘高度见 base/index.js供开发者自行换算传入duration默认 60000ms最大录音时长最终作为manager.start({ duration, lang })的参数传给 WechatSI 插件chat-record.ts达到上限后插件会停止录音并触发onStoplang默认 zh_CN识别语言同样透传给插件。事件与插槽Events| 名称 | 参数 | 描述 | | -- | -- | -- | | cancel | - | 取消录音时触发 | | error |(err: any)| 录音识别错误时触发 | | recognize |(detail: { voicePath: string, voiceText: string, duration: number })| 语音识别完成时触发 |recognize核心事件detail包含三段信息——voicePath录音临时文件路径、voiceText识别出的文本、duration录音时长单位为秒。从 chat-record.ts 可以看到插件onStop回调中组件会计算duration Math.floor(durationMs / 1000) || 1随即triggerEvent(recognize, {...})抛出结果cancel取消录音时触发。取消路径包括录音阶段上滑进入松开取消状态后松手、点击遮罩关闭录音面板等见cancelRecord方法error录音识别出错时触发同时组件内部会以 Toast 提示录音识别失败请重试文案可通过 locale 覆盖。Slots| 名称 | 描述 | | -- | -- | | speech-input | 语音输入按钮插槽自定义语音输入按钮区域内容 | | speech-no-auth | 语音授权按钮插槽自定义语音授权按钮区域内容 |两个插槽在 WXML 中的渲染逻辑非常直观chat-record.wxml当已获得录音授权recordAuthStatus为 true时渲染按住说话手势区域并把speechInput插槽内容作为默认显示未授权时则渲染一个button作为引导入口默认文案来自globalConfig.requestAuth请授权麦克风权限点击后触发requestRecordAuth申请权限speechNoAuth插槽用于自定义这块引导区域。深度原理源码级实现解析插件初始化与回调绑定组件在created生命周期中调用initRecordManager()chat-record.ts核心步骤是const plugin requirePlugin(WechatSI); this.manager plugin?.getRecordRecognitionManager?.();随后为manager绑定四个插件回调onStart置managerRecording true、processStatus recording进入录音态onRecognize接收实时识别结果res.result为增量文本、res.end表示结束。组件持续把最新文本写入voiceInfo.voiceText实现边录边转的流式效果onStop录音结束时拿到tempFilePath、duration与最终result统一通过recognize事件抛出并自动重置状态onError出错时 Toast 提示、重置 UI 状态并把错误对象通过error事件透出。若requirePlugin失败或拿不到manager组件会提示缺少语音识别插件 WechatSI这对应 FAQ 中插件声明遗漏的场景。录音手势与交互状态机组件维护了完整的流程状态见data定义processStatusidle → recording → processing → confirm → error用于区分待机 / 录音中 / 处理中 / 待确认 / 出错interactStatusnormal / release_cancel / release_convert用于表达手指手势在录音面板上的状态。交互阈值MOVE_THRESHOLD_Y 60单位 px当手指在录音过程中上滑超过 60px 时进入松开取消release_cancel状态chat-record.ts。录音面板中对应的提示文案会在松开发送上滑取消与松开取消之间做位移 透明度的跟手切换动效chat-record.wxml。录音启动并非即时触发startRecord会先做权限检查然后通过setTimeout(..., 100)延时 100ms 启动录音模拟长按防误触见 chat-record.ts。若在延时期间用户已松手组件会设置ignoreNextOnStop标志避免插件onStop把状态推到确认态stopRecord中的空保护逻辑。录音面板 UI录音时组件会弹出一个全屏遮罩 录音面板chat-record.less 中定义了波浪动画wave、遮罩层级chat-record-mask-z-index: 5100等样式变量音波动画面板内渲染 27 根波浪条waveList: Array.from({ length: 27 })通过 CSSscaleY动画模拟录音电平效果取消状态时波浪变红wave-red正常录音为蓝色wave-blue全宽录音大按钮录音阶段提供承载手势的透明大按钮颜色随状态切换为蓝色记录中或红色取消态确认操作区confirm/error状态下展示取消 / 发送两个按钮点击触发handleCancelSend或handleSendVoiceMsg其中发送会再次触发recognize事件并携带最终语音数据。全局文案的可配置性组件文案并非硬编码而是通过usingConfig混入的globalConfig读取using-config.ts数据源为各语言 locale 文件中的chatRecord段。以 zh_CN.ts 为例包含holdToTalk: 按住说话 requestAuth: 请授权麦克风权限 releaseToCancel: 松开取消 releaseToSend: 松开发送上滑取消 cancelText: 取消 sendText: 发送 busyTip: 识别中请稍候… recognizeFailTip: 录音识别失败请重试 missingPluginTip: 缺少语音识别插件 WechatSI authSettingFail: 获取录音权限设置失败 openSettingFail: 打开设置失败 systemMicTitle: 无法使用麦克风 systemMicContent: 检测到手机系统已关闭微信的麦克风权限…仓库同时提供了 en_US.ts 等 8 种语言的对应文案开发者可通过 config-provider 统一切换语言实现组件文案的多语言适配。FAQ插件声明与麦克风权限1. 添加插件声明t-chat-record依赖微信官方的同声传译插件 WechatSI实现录音识别。必须在 miniprogram 根目录的app.json中声明{ plugins: { WechatSI: { version: 0.3.6, provider: wx069ba97219f66d99 } } }如果遗漏该声明requirePlugin(WechatSI)会失败组件将无法启动录音并提示缺少语音识别插件 WechatSI。2. 麦克风权限使用语音输入需要用户授权麦克风权限scope.record。组件会自动处理授权流程但开发者需要了解以下场景首次使用组件会自动调用wx.authorize申请麦克风权限用户同意后即可正常使用。用户拒绝授权如果用户点击拒绝会显示请授权麦克风权限提示点击提示区域会引导用户前往设置页面开启权限。从源码看授权逻辑分两层chat-record.ts系统级检测checkSystemMicPermission()调用wx.getAppAuthorizeSetting()读取microphoneAuthorized若为denied系统已关闭微信的麦克风权限则弹出wx.showModal明确引导用户前往系统设置开启文案systemMicTitle/systemMicContent并中止后续流程——因为在系统层面禁用时小程序openSetting页面里通常连录音开关都不会出现小程序级授权通过wx.authorize({ scope: scope.record })弹窗申请失败拒绝或不再询问时调用openVoiceSetting()打开wx.openSetting引导用户开启。此外组件在attached生命周期会自动调用getVoiceAuthSetting()预检一次权限状态并在getSetting返回的authSetting中区分从未申请 / 已授权 / 已被拒三种情况recordAuthDenied标志用于决定渲染按住说话还是请授权入口。3. 权限问题排查如果在小程序设置页面看不到麦克风权限选项按以下步骤排查检查微信 App 权限进入手机系统设置 应用管理 微信确保微信有麦克风权限。检查小程序授权微信中下拉打开最近使用小程序列表长按目标小程序 关于小程序 设置查看是否有麦克风权限选项。重新授权删除小程序后重新搜索进入首次点击语音输入时会重新触发授权弹窗。真机调试模拟器无法测试录音功能必须使用真机预览或体验版测试。落地实践与聊天页组合的完整流程综合以上内容一个可运行的语音输入聊天页需要完成以下组装页面 JSON 声明组件t-chat-sender、t-chat-record以及t-chat-list、t-chat-message、t-toast等聊天组件族成员参照 base/index.jsonapp.json 声明 WechatSI 插件版本与 provider 以上文 FAQ 为准WXML 组合t-chat-sender开启allowSpeech在speech插槽内放置t-chat-record并自定义两个按钮插槽逻辑层处理recognize拿到voiceText后走文本消息发送链路示例页即调用onSend如需保留语音文件可用voicePath上传或本地播放键盘高度适配在t-chat-sender上监听keyboardheightchange结合bottom-height调整录音面板位置文案定制通过 config-provider 覆盖 locale 中的chatRecord文案或直接使用两个插槽替换默认按钮文本。上述完整示例可直接在 chat-record/_example/base 中找到index.wxml负责组合结构index.js负责消息流模拟与识别结果处理index.wxss提供语音按钮的自定义样式。版本与限制说明组件自1.16.0版本起提供接入前请确认依赖版本不低于该版本当前渲染框架支持情况为WebViewSkyline 渲染框架下不受支持录音功能无法在开发者工具模拟器中验证必须使用真机预览或体验版测试语音识别依赖微信同声传译插件WechatSI其version与provider需按官方要求填写识别能力受插件与网络环境影响。赞分享前端UI组件小程序设计系统移动开发【免费下载链接】tdesign-miniprogramWechat MiniProgram and Uniapp UI components lib for TDesign项目地址https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram点击查看免费下载相关推荐ZCode AI Elements 语音输入组件 SpeechInput 实战指南跨浏览器语音转文字按钮的完整实现ZCode AI Elements 语音输入组件 SpeechInput 实战指南跨浏览器语音转文字按钮的完整实现 导读 本文围绕 ZCode 仓库内置的 A人工智能大模型代码智能体AI Agent桌面应用后端前端CLI插件系统Ever Gauzy 接入 Speaches 本地语音转文字AI 聊天语音输入插件实战指南Ever Gauzy 接入 Speaches 本地语音转文字AI 聊天语音输入插件实战指南 导读 本文讲解 Ever Gauzy 开源业务管理平台中如何通过后端前端企业应用MCP 服务ClawX 语音听写语音转文本输入完整指南麦克风权限、录制管线与 ASR 配置实战ClawX 语音听写语音转文本输入完整指南麦克风权限、录制管线与 ASR 配置实战 导读 本文是 ClawX 桌面客户端内置语音听写Voice Dict人工智能AI 应用桌面应用交互助手上一篇Data Engineering Zoomcamp 实战用 Python 构建 Kafka 流处理管道JSON 与 Avro 序列化全解析下一篇Playnite免费完整指南统一管理20平台游戏库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考