File tree Expand file tree Collapse file tree
chat-record/_example/base
uniapp-pro-components/chat/chat-record Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1515 bind:send="onSend"
1616 bind:keyboardheightchange="onKeyboardHeightChange"
1717 >
18- <view slot="voice -input">
18+ <view slot="speech -input">
1919 <t-chat-record useSpeechInputSlot useSpeechNoAuthSlot bind:recognize="onVoiceRecognize">
2020 <view slot="speechInput" style="padding: 10px; background: #f0f0f0; border-radius: 8px"> 按住说话 </view>
2121 <view slot="speechNoAuth" style="padding: 10px; background: #ffebee; border-radius: 8px; color: #d32f2f">
Original file line number Diff line number Diff line change 5656 </block>
5757 <!-- 语音输入模式 -->
5858 <block wx:else>
59- <slot name="voice -input" />
59+ <slot name="speech -input" />
6060 </block>
6161 </view>
6262
Original file line number Diff line number Diff line change 1- ## API
2- ### ChatRecord Props
1+ ---
2+ title : ChatRecord 语音输入
3+ description : 用于聊天场景的语音输入组件,支持语音转文字、录音时长控制等功能。
4+ spline : base
5+ isComponent : true
6+ ---
7+ ## 引入
38
4- 名称 | 类型 | 默认值 | 说明 | 必传
5- -- | -- | -- | -- | --
6- ### 事件
9+ 全局引入,在 miniprogram 根目录下的` app.json ` 中配置,局部引入,在需要引入的页面或组件的` index.json ` 中配置。
710
8- 事件名 | 说明 | 回调参数
9- -- | -- | --
10- recognize | 发送消息 | msg : string
11+ ``` js
12+ import TChatRecord from ' @tdesign/uniapp-chat/chat-record/chat-record.vue ' ;
13+ ```
1114
15+ ## 前置配置
16+ 内置[ 微信同声传译插件] ( https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/translator.html ) ,
17+ 需要提前在微信小程序中开启同声传译插件,操作方法:登录微信公众平台后台,进入“设置”->“第三方设置”->“插件管理”,通过插件AppID搜索并添加,审核通过后即可在代码中配置使用
1218
19+ ### 1. 添加插件声明
1320
14- ### 插槽
21+ 在 ` app.json ` 中声明微信同声传译插件:
1522
16- 插槽名 | 说明
17- -- | --
18- speechInput | 自定义语音输入按钮内容
19- speechNoAuth | 自定义未授权麦克风时的提示内容
23+ ``` json
24+ {
25+ "plugins" : {
26+ "WechatSI" : {
27+ "version" : " 0.3.6" ,
28+ "provider" : " wx069ba97219f66d99"
29+ }
30+ }
31+ }
32+ ```
33+
34+ ### 2. 麦克风权限
35+
36+ 使用语音输入需要用户授权麦克风权限。组件会自动处理授权流程,但开发者需要了解以下场景:
37+
38+ #### 首次使用
39+ - 组件会自动调用 ` wx.authorize ` 申请麦克风权限
40+ - 用户同意后即可正常使用
41+
42+ #### 用户拒绝授权
43+ - 如果用户点击拒绝,会显示"请授权麦克风权限"提示
44+ - 点击提示区域会引导用户前往设置页面开启权限
45+
46+ #### 权限问题排查
47+
48+ 如果在小程序设置页面看不到麦克风权限选项:
49+
50+ 1 . ** 检查微信 App 权限**
51+ - 进入手机系统设置 > 应用管理 > 微信
52+ - 确保微信有麦克风权限
53+
54+ 2 . ** 检查小程序授权**
55+ - 微信中下拉打开最近使用小程序列表
56+ - 长按目标小程序 > 关于小程序 > 设置
57+ - 查看是否有麦克风权限选项
58+
59+ 3 . ** 重新授权**
60+ - 删除小程序后重新搜索进入
61+ - 首次点击语音输入时会重新触发授权弹窗
62+
63+ 4 . ** 真机调试**
64+ - 模拟器无法测试录音功能
65+ - 必须使用真机预览或体验版测试
2066
2167### 示例用法
2268#### 基础类型
2369
2470{{ base }}
71+
72+ ## API
73+
74+ ### ChatRecord Props
75+
76+ 名称 | 类型 | 默认值 | 描述 | 必传
77+ -- | -- | -- | -- | --
78+ useSpeechNoAuthSlot | Boolean | false | 是否启用语音输入无权限时显示插槽 | N
79+ useSpeechInputSlot | Boolean | false | 是否启用语音输入时显示插槽 | N
80+
81+ ### ChatRecord Events
82+
83+ 名称 | 参数 | 描述
84+ -- | -- | --
85+ recognize | msg: string | 识别到的文本内容
86+
87+ ### ChatRecord Slots
88+
89+ 名称 | 描述
90+ -- | --
91+ speechInput | 语音输入按钮插槽
92+ speechNoAuth | 语音授权按钮插槽
93+
You can’t perform that action at this time.
0 commit comments