使用cursor及字节的coze,0代码的方式来开发一个微信小程序,功能以“文本转语音”为例。

步骤概览

1.申请微信小程序;

2.下载并安装两个工具:

①微信开发者工具:用于创建、调试、发布项目;

②cursor:用AI帮我们实现所有的代码;

3.创建小程序,开发小程序前端功能;

4.创建coze工作流,用来实现文本转语音,供小程序调用;

5.发布小程序。

详细步骤

1.申请微信小程序

搜索“微信公众平台”,进入官网申请一个自己的小程序,填写好小程序名称、简介等资料,然后你会得到一个唯一的小程序ID,如图所示,把这个小程序ID先复制出来,待会儿需要用到。

2.下载并安装两个工具

① 微信开发者工具,在微信小程序的官方文档中能找到下载链接。

② cursor,在官网(Cursor - The AI Code Editor)下载,并安装。

3.创建小程序,开发小程序前端功能

①打开微信开发者工具(第一次打开需要用微信登陆),创建一个项目。

由于我们不自己写代码,而是用cursor帮我们实现,所以微信开发者工具,我们只是用它来做效果预览调试,并不在里面进行代码编写。

②在cursor中打开刚刚创建的小程序目录,由于在微信开发工具和cursor中打开的是同一个目录,所以两边修改是同步的。

然后将需求写下来,我一般习惯在项目根目录下建一个markdown文档,将需求写在里面,如:

你是一个优秀的微信小程序开发工程师,请你根据以下需求,完成一个微信小程序项目。

### 需求

1. 项目的总体功能是:一个文本转语音工具,用户输入文本,将文本转换为语音。
2. 文本转语音是通过调用api来实现。
3. 用户可以通过下拉列表选择说话人音色,音色有邻家女孩、阳光青年。
4. 用户可以通过滑动条来设置语音的速度,速度在0.2~3直接取值,默认值为1。
5. 转换完成后,可以播放及下载转换后的语音,也可以发送给微信好友。
6. 播放语音时,显示播放进度,并可以暂停播放。

③需求写好之后,打开cursor的AI对话框(windows快捷键是ctrl+i, mac快捷键是command+i),选择COMPOSER,然后让他完成小程序开发。

④等他写完代码之后,我们选择Accept All,到微信开发者工具中来看一下页面效果是否满意,如果不满意就在cursor中反复和他进行沟通让他修改。(属于是程序员翻身做产品经理了)

到止为止,我们的小程序前端就开发完了,还有最核心的文本转语音功能还未实现。

4.创建coze工作流,用来实现文本转语音,供小程序调用

4.1创建coze工作流

①登陆coze官网coze.cn,进入工作空间->资源库,右上角新建工作流

②填写工作流名称和简介,工作流的初始状态只有开始和结束两个节点。

③编辑工作流,先新建一个节点,搜索“语音合成”,会出来很多插件,我这里选择的是官方的speech_systhesis

将三个节点连起来,并设置各自的输入输出,开始节点的三个输入/输出,对应的就是我们小程序页面上的三个输入内容。

将中间语音合成节点的输入与开始节点的三个输入对应上,输出中的link就是合成的语音文件url地址,所以将结束节点的输出对应上这个link。

接下来可以点下方的试运行,来测试工作流是否配置正确,无误后点右上角的发布。

音色我们只预设了2个,可以通过语音合成节点找到这个插件的文档,里面有很多音色可选。

4.2在小程序中调用coze工作流

①首先在coze的开发文档中找到工作流的api调用文档,将下方的请求示例和返回示例告诉cursor,让他完成工作流的调用代码编写。

②在生成的调用代码里面,请求参数中的两个参数需要改成你自己的(Authorization中的Bearer需要保留)。

workflow_id:上一步创建的工作流的id,打开工作流后你可以在浏览器的地址栏中看到。

Authorization:获取方式如下图,你将得到很长一串的令牌,记得把它复制下来。

③去微信开发者工具中去测试,看是否能调用成功,如果报错再让cursor修改。

还可以用手机微信扫描二维码,在手机上预览测试你的小程序。

5.发布小程序

调试没问题了就可以发布你的小程序给别人使用了。

1.上传代码,填写版本号和描述

2.在小程序管理后台可以看到你刚才的提交版本

3.提交审核,审核一般要1~2个工作日,审核通过后就可以发布上线了。

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐