Skip to content

Commit e895c9b

Browse files
committed
feat: 统一插槽命名并完善语音输入相关文档与属性
1 parent af11132 commit e895c9b

3 files changed

Lines changed: 84 additions & 15 deletions

File tree

packages/pro-components/chat/chat-record/_example/base/index.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
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">

packages/pro-components/chat/chat-sender/chat-sender.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</block>
5757
<!-- 语音输入模式 -->
5858
<block wx:else>
59-
<slot name="voice-input" />
59+
<slot name="speech-input" />
6060
</block>
6161
</view>
6262

Lines changed: 82 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,93 @@
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+

0 commit comments

Comments
 (0)