所有文章 > 日积月累 > Cursor+Coze教程:帮你轻松完成微信小程序搭建
Cursor+Coze教程:帮你轻松完成微信小程序搭建

Cursor+Coze教程:帮你轻松完成微信小程序搭建

本文争取用最简单的方式说起,如何用cursor+coze搭建一个明星吐槽的微信小程序。从小程序的注册到后面的上线发布,争取让不懂代码的人,可以用cursor完成第一个小程序项目。

整体思路

界面一个展示页面:输入框、确定按钮、展示区域。

当用户在输入框中输入明星姓名之后,点击确定按钮后,将输入内容发送给智能体,通过联网功能去获取该明星的丑闻信息,再返回给界面展示。

软件注册与下载

微信小程序注册与下载

  • • 点击网址:
  • https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN
  • • 接下来便是账号的基本注册流程,按照要求继续执行。
  • • 当填完账号信息之后,就是邮箱的激活了,我们会收到1条激活短信。
  • • 第三步就是完成个人信息,包括手机号码、身份证号码的信息填写。
  • • 完成注册之后,进入界面,拿到appID,保存在记事本中。
  • • 同时继续点击下面服务器域名配置,将coze.cn 添加成合法域名。
  • • 微信小程序开发工具下载,点击下面链接:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

具体安装步骤按照官方提示操作即可,这里不再展开描述。

cursor注册与下载

  • • 点击网址https://www.cursor.com/,进入到cursor官网。

download 就可以进行安装包的下载,这里直接点击下一步即可。

  • • 点击sign in,进行cursor的注册,会跳转到这个页面。

按照要求输入的你邮箱并接收验证码。注册好之后可以有14天的免费试用机会。

tips:至于如何一直免费试用,可以看章节第6部分。

Coze开发一个简单的智能体

本文主要是讲解整体cursor开发内容,目标是流程跑通。因此我们就用coze开发一个简单智能体。

主要为了实现:输入明星姓名,调用百度或者头条插件,将返回的结果

coze账号注册并创建智能体

  • • 注册coze:https://www.coze.cn/,我们选择基础版登录即可。
  • • 点击左侧的添加智能体选项
  • • 输入智能体的名称,然后点击保存进入编辑页面。

生成令牌(调用API的钥匙)

  • • 第一步:点击左侧的按钮即可
  • • 第二步:在弹出的页面,点击“授权”按钮。
  • • 第三步:点击添加新令牌。(相当于我们后期访问api的钥匙)
  • • 第四步:接下来点击勾选权限,点击确定。(建议勾选所有权限,免得后面遇到问题没办法解决)
  • • 第五步:接下来就会弹出窗,让用户保存令牌信息。

!重点:这个令牌只会显示一次,因此,必须要点击右下角的按钮,保存到你的记事本中。(后面会用到)

coze开发智能体

这里就是我们智能体的主要开发窗口了。我们主要在这两块添加内容即可。

  • • 添加插件

这里我们选择头条搜索作为插件,点击添加。

  • • 人设和回复逻辑

这里主要是告诉智能体,我们想要搜索的内容以及返回的结果格式。可以直接复制下面的内容到人设与回复逻辑。

可以把我的prompt直接复制到“人设和回复逻辑”编辑窗中。

# 角色
你是一个擅长吐槽明星的高手,能够以幽默诙谐的语言调侃明星的各种行为和事件。

## 技能
### 技能 1: 吐槽明星劣迹
1. 当用户给出一个明星的名字时,
1.1 使用百度搜索查找该明星的劣迹信息。
1.2 使用头条搜索一起查找该明星的劣迹信息。
2. 整合百度搜索和头条搜索返回的内容,用幽默诙谐的语言将明星的劣迹展示出来,字数控制在 200 字左右。
===回复示例===
这位明星呀,那可真是让人哭笑不得。[具体劣迹 1 描述],简直就是一场闹剧。还有[具体劣迹 2 描述],真是让人不知道说啥好。总之,这位明星的行为可真是让人忍不住吐槽。
除了上述的回复方式,还可以参考以下几种回复方式:
方式一:哎呀,这位明星的行为可真是让人难以理解啊![具体劣迹 1 描述],这是在挑战大家的底线吗?还有[具体劣迹 2 描述],真是让人不禁感叹,他/她的世界我们不懂啊!
方式二:哈哈,这位明星的所作所为真是让人笑掉大牙![具体劣迹 1 描述],这是要成为“搞笑担当”吗?还有[具体劣迹 2 描述],看来他/她是想在娱乐圈留下独特的印记啊!
方式三:天呐,这位明星的行为简直让人无法直视![具体劣迹 1 描述],这是在追求“与众不同”吗?还有[具体劣迹 2 描述],真是让人怀疑他/她的脑子是不是进水了!
方式四:哇塞,这位明星的举动真是让人惊掉下巴![具体劣迹 1 描述],这是要创造新的“传奇”吗?还有[具体劣迹 2 描述],看来他/她是想在娱乐圈掀起一阵波澜啊!
方式五:嘿嘿,这位明星的行为可真是让人捉摸不透啊![具体劣迹 1 描述],这是在玩什么“神秘游戏”吗?还有[具体劣迹 2 描述],真是让人对他/她充满了好奇!
方式六:唉,这位明星的所作所为真是让人感到失望啊![具体劣迹 1 描述],这是要自毁前程吗?还有[具体劣迹 2 描述],希望他/她能早日认识到自己的错误,重新做人吧!
===示例结束===

## 限制:
- 只吐槽明星的行为和事件,不进行人身攻击。
- 所输出的内容必须客观真实,且有可靠的搜索来源。
- 请使用 Markdown 的 ^^ 形式说明引用来源。
    • • 调试

    点击右侧的输入框,输入内容进行调试。

    发布API

    • • 点击右上角的发布按钮,就可以点击右上角进行智能体的发布了。
    • • 页面一直拉到最下面,可以看到”Agent as API”,勾选前面的框。点击发布。
    • • 发布成功就会出现下面的页面。

    重点:一定将浏览器中这串数字保存到记事本中,这个是我们这个智能体的id值。

    用cursor进行微信小程序的开发

    这一章节就进入到我们的重头戏,通过cursor不写代码就完成小程序的开发。

    小程序工具初始化项目

    • • 打开小程序开发工具,点击添加按钮。
    • • 进入创建小程序界面。APPID填入我们系统APPID(如果不记得,看2.1章节)

    后端服务:选择不使用云服务、模板选择:不使用模板。

    最后点击右下角的创建就可以了。这个时候就自动创建一份文件,具体的文件目录看截图。

    • • 出现下面界面代表已经成功了。

    cursor开发调试基本功能

    • • 打开cursor工具,然后点击open a folder,打开刚才新建的文件目录。

    打开的界面如下图所示

    • • 在根目录新建文件“instruction.md”,并输入下面的文字,点击保存。要想让cursor完全理解你的需求是不现实的。

    因此,我们必须要告诉大模型,下一步是怎么处理的。

    1. 这是个小程序开发系统
    2. 你的角色是一个ui设计师,务必要求审美过关,我比较喜欢element-ui 的风格和样式
    3. 小程序已经使用官方脚本初始化完成,你只需要实现接下来的功能即可。在page目录下完成
    4. 功能如下: 进入首页有三块内容:一个文本输入框、一个提交按钮、一个展示区域。其中输入框和按钮在一起,展示区域在下面。尽量合理布局。距离顶部要有一定距离。
    5. 点击按钮后,文本输入框的内容会显示在展示区域。
    • • 接下来,快捷键“comand/ctrl + i”就是等待,生成。在弹出框中输入下面的文字:“根据instrction.md文档的内容,生成具体的代码”。
    • • 等待几秒钟,cursor就自动生成对应的脚本。点击accept all才生效。
    • • 这时候,就要打开微信开发工具,点击编译按钮,就能快速预览内容了。可是不幸的事情发了,竟然报错了。

    我们接下来把报错的信息复制到cursor中,让cursor给我们解决吧。

    • • 就这样,cursor快速给出了结果。点击“accept all”再试试。

    就这样,我们完成了初级的布局功能。输入“李诞”点击提交,展示区域就显示“李诞”的名称。

    与coze的API关联起来

    现在我们的需求是输入内容,点击提交,去调用coze的api并返回结果。

    • • 我们只需要把我们的想法告诉cursor。
    可以直接输入以下内容:

    现在点击按钮,要调用coze的api, coze api的说明文档是:‘’‘curl --location --request POST 'https://api.coze.cn/open_api/v2/chat' \
    --header 'Authorization: Bearer {{Personal_Access_Token}}' \
    --header 'Content-Type: application/json' \
    --header 'Accept: */*' \
    --header 'Host: api.coze.cn' \
    --header 'Connection: keep-alive' \
    --data-raw '{
    "conversation_id": "123",
    "bot_id": "{{Bot_Id}}",
    "user": "29032201862555",
    "query": "hello",
    "stream":false
    }'
    ‘’‘
    • • 告诉cursor你的botid 是XXX,token 是XXX。
    • • 中间会出现返回结果不匹配。需要结合文档返回的格式要求来告诉cursor去修改。

    微信小程序上线

    • • 点击客户端的上传按钮,上传代码到服务器上。
    • • 接下来进入网页端进行上线的最后配置。点击版本管理-提交审核。

    文章转载自:这份保姆级别的Cursor+Coze教程,帮你轻松完成微信小程序搭建!

    #你可能也喜欢这些API文章!