智能语音对话小程序功能优化day2-语音输入

目录

1.添加插件

2.记录插件配置

3.prompt设置

4.AI编码

5.小程序真机测试


目前trae和cursor等ai工具已经成为无论新人还是行内人提升编程能力的加速器,自己之前半天才搞定的语音输入功能不到一个小时也就编写测试完了,记录一下流程:

1.添加插件

登录信公众平台进入小程序后台主页,点击账号设置-第三方设置-添加插件。在搜索页面输入同声传译获取插件,见下图。

2.记录插件配置

添加插件后会有审核(很快),通过后点击详情可以进入下图所示的界面。需要记住同声传译插件的AppID,在后续小程序开发中会用到。

3.prompt设置

打开trae composer,选择claude-3.7-sonnet模型,输入以下prompt:

你需要在index页面中,使用微信小程序'同声传译'插件实现语音输入功能,具体需求如下:

-底部输入区域中的左边添加一个语音输入的icon按钮,按钮高度与发送按钮相同,用户点击该按钮后文本输入框改变为'按住说话'按钮。用户再次点击icon后切换回文本输入框

-用户松开按钮后,需要将用户的语音转换成文字添加到消息区域中,转换后的文字内容仿照sendMessage函数实现相同的与后端接口交互的功能

-需要在完成语音输入功能的前提下,使UI布局尽可能美观。

-需要修改加入插件后的配置文件保证项目能够正常编译执行

4.AI编码

等待trae自动完成语音输入功能,详细执行结果见下图。

5.小程序真机测试

联调见下图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值