Cursor 小程序实战:从需求到前后端联调
整理用 Cursor 开发微信小程序的需求、备案、界面、后端和联调流程。
本文根据公开飞书教程整理,并将相同主题合并为一篇可连续阅读的指南。版本、价格和功能名称可能变化,操作前请以产品官方文档和当前界面为准。
原始知识库入口:AI编程快乐屋。
原教程:Cursor小程序实战
如果你是在使用手机端浏览,请点击左上角有个“ 三条杠” 图标,点击后就能展开左侧的菜单了
本视频合集地址: https://space.bilibili.com/481246113/lists/5035328?type=season
原教程:零基础用cursor完成一个商业级的小程序(1)
🌟【为什么你需要这门课?】
✧ 90%想开发程序的人都被技术门槛劝退:前端+后端+部署运维,学3年都未必能上线
✧ Cursor用AI革命开发流程:普通人也能3周完成全栈开发,代码生成速度提升400%
🌟【课程内容】
-
从一个想法开始,到需求、功能的分析
-
项目原型设计,普通人基础编程概念拆解
-
cursor安装,界面的介绍
-
小程序生态介绍,备案,开发工具等
-
实际开发环节
-
小程序上线等
🎯【适合谁学?】
✓ 创业者:有商业构想但不懂技术,想快速验证MVP
✓ 传统开发者:想掌握AI提效工具,薪资竞争力翻倍
✓ 大学生:用商业级作品斩获大厂Offer(课程项目可直接写进简历)
✓ 产品经理:亲手实现原型,与工程师高效协作
所有课程完全免费
原教程:无编程经验用cursor完成一个商业级的小程序(2)
Cursor的边界:到底cursor可以做什么项目
1)普通用户
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
| 场景 | ||||
|---|---|---|---|---|
| 可用 | MVP产品、够垂直,够细 | 提升工作效率脚本 | 小功能 | |
| 不可用 | 流程复杂,如ERP,财务等 | 大量依赖其他资源,比如游戏美术资源 | ||
2)专业人士
你本身的技能+ cursor= 你摸鱼,cursor 替你打工。
你本身的技能+ cursor= 你全栈=你可以随时创业。
最后,行动起来比什么都重要
原教程:三、系统展现的四种形式
一、系统展现的四种形式
| 展示端 | 优点 | 缺点 | 适合场景 | |
|---|---|---|---|---|
| PC | 电脑 | ✅ 大屏操作体验<br>✅ SEO友好(易被百度收录)<br>✅ 开发成本低 | ❌ 流量入口受限(主流量在手机端)<br>❌ 用户触达率低(需主动输入网址)<br>主流的流量平台全是手机端<br>微信,抖、红、B、快,视频号,用户触达体验不好 | 📈 适用场景:企业官网、数据看板,后台系统,落地宣传页、Electron跨端打包 |
| h5 | 手机或者电脑 | ✅ 跨端适配(响应式设计)<br>✅ 无需安装,即时访问<br>✅ 低成本快速迭代 | 只是一个备胎 | 📈 适用场景:营销活动页、问卷调查、简单工具(如计算器) |
| 小程序 | 手机 | ✅ 微信生态闭环(支付/分享/订阅消息)<br>✅ 上线快,用户触达率高<br>✅ 云开发低成本(MVP首选)<br>微信的生态(授权、支付、分享、数据等)<br>适配手机,市场占有率非常高,上线快,微信用户触达快,MVP首选<br>抖音小程序同理 | ❌ 审核机制严格(1-3天)<br>❌ 限定经营分类,不同分类可能需要资质<br>❌ 支付限制(仅支持微信支付)<br>❌ 个人版本功能限制非常多,如无法使用支付 | 📈 适用场景:<br>会员相关,电商,预约,大部分以微信做入口的 |
| APP(IOS/安卓) | 手机 | ✅ 原生体验(AR/高性能游戏)<br>✅ 全功能开放(硬件API)<br>✅ 个人开发者可发布 | ❌ 多平台开发成本高(需iOS+安卓两套代码)<br>❌ 上架审核周期长(App Store约7天)<br>❌ 需要软著?<br>主流市场(如华为、小米、应用宝)普遍要求提供软著,否则无法通过审核 | 小程序业务量上去之后,需转型<br>跟硬件交互相关 |
原教程:cursor实战系列:0到1开发一个小程序,需求整理、小程序注册备案
一、需求的诞生
某书发表了一片笔记: 家长使用多维表格+DeepSeek对小孩进行作文辅导。
| 痛点 | 两到三个核心功能点 | 这些内容对使用Cursor来生成页面很有帮助 | |
|---|---|---|---|
| AI作文辅导 | 一般的家长辅导孩子作文非常困难,主要原因如下:<br>1、家长难以针对孩子写作弱点提供定制化提升方案<br>2、无法获得实时写作建议 | 1)上传作文照片,使用DeepSeek进行作文分析给出建议和提升方案【核心功能】<br>2)每批改一次作文消耗一次积分,使用微信充值获得积分【商业变现方式】<br>3)用户使用微信授权登陆,登陆完成需要绑定手机号【用户注册流程】 | |
1、AI对接
2、完整支付流程
3、完整用户流程
二、完成小程序的前置流程
| 事项 | 协助工具/网站 | 作用 | 可获得 | 成本 | 周期 |
|---|---|---|---|---|---|
| 小程序注册备案 | https://mp.weixin.qq.com/ | 系统使用的载体 | appId<br>appSecret<br>小程序待上线状态 | 300/年 | 两周左右 |
| 微信支付商家申请 | https://pay.weixin.qq.com/ | 充值支付使用 | 商户号mchId | 0 | 一周左右 |
| 域名注册备案 | 阿里云、腾讯云、华为云或者其他 | 小程序的后端服务逻辑 | 域名 | .com<br>.cn<br>35~83/年 | 两周左右 |
| 服务器购买 | 阿里云、腾讯云、华为云或者其他 | 小程序的后端服务逻辑 | 公网ip | 99/年 | |
| 短信套餐 | 阿里云或者其他<br>https://dysms.console.aliyun.com/overview | 发送验证码 | 发送验证码 | 35/年<br>根据情况调整 | |
| 豆包大模型API | https://console.volcengine.com/ | api秘钥<br>合作合同 | 按使用量收费 |
二、小程序注册及备案、微信支付
:
1)小程序LOGO
Logo 可以使用即梦AI生成,提示词如下
充满创意与活力的品牌标志。标志需融合多种鲜明色彩(如红色、蓝色、绿色、黄色等),以手印图案为核心元素。整体设计需简洁而富有张力,黑色背景与多彩手印形成鲜明对比,下方配以醒目的白色文字“UDESIGN ”。
参考:
在即梦AI创作灵感探索社区,与其他用户一同分享AI影像创作灵感与作品。
2)备案方法:
3)AI类目审核
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
备案流程:
注意:小程序的主体和算法使用签订的合同主体必须一致
4)微信支付:
| 微信支付对接渠道 | 优势 | 劣势 | 建议 |
|---|---|---|---|
| 微信商户号 | 申请方便,快速 | 费率高 | 优先使用,跑通流程 |
| 微信服务商<br>(类似你是微信支付能力提供商) | 申请麻烦,类似建大号,还要一个小号,费率低 | 流程麻烦 | 不建议 |
| 第三方支付渠道 | 费率低 | 接口稳定性,账期等 | 可考虑,看是否有对接经验 |
三、原型页面生成
我想开发一个小程序
目标用户:
- 主要用户:25-45岁的家长,没时间来教小孩怎么写作文,也可能不知道还在对应年级作文的写作规范和要求
用户痛点:
-家长难以针对孩子写作弱点提供定制化提升方案
-无法获得实时写作建议
我目前想到的核心功能如下:
1、用户可以对作文进行拍照,然后上传图片
2、调用大模型对作文进行批改
3、每次批改作文消耗一个积分,使用微信支付进行充值可获得积分
4、用户使用微信授权登陆,登陆完成需要绑定手机号
现在需要你帮我输出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:
1、用户体验分析:先分析这个小程序的主要功能和用户需求,确定核心交互逻辑。
2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。
3、高保真 UI 设计:作为 UI 设计师,设计贴近真实小程序设计规范的界面,使用现代化的 UI 元素,使其具有良好的视觉体验。
4、HTML 原型实现:使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面,并使用 FontAwesome(或其他开源 UI 组件)让界面更加精美、接近真实的 小程序 设计。拆分代码文件,保持结构清晰:
5、每个界面应作为独立的 HTML 文件存放,例如 home.html、profile.html、settings.html 等。
-
index.html 作为主入口,不直接写入所有界面的 HTML 代码,而是使用 iframe 的方式嵌入这些 HTML 片段,并将所有页面直接平铺展示在 index 页面中,而不是跳转链接。
-
真实感增强: - 界面尺寸应模拟 iPhone 15 Pro,并让界面圆角化,使其更像真实的手机界面。
-
使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。
-
添加顶部状态栏(模拟 iOS 状态栏),并包含 App 导航栏(类似 iOS 底部 Tab Bar)。
请按照以上要求生成完整的 HTML 代码,并确保其可用于实际开发。
原教程:微信备案流程(企业/个人)
根据工信部于2023年8月发布的《关于加强移动互联网应用程序备案管理工作的通知》(以下简称《通知》),微信小程序备案分为两种情况:
-
对于未上架的微信小程序,自2023年9月1日起,必须在提交上线审核前完成备案,否则无法通过审核;
-
对于已上架的微信小程序,必须在2024年3月31日前完成备案,逾期未完成备案的,平台将按照备案相关规定于2024年4月1日起进行清退处理。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
下面是小程序备案操作教程:
一、备案入口
备案入口地址:https://mp.weixin.qq.com
1、未上架小程序
开发者可在小程序首页点击【去备案】即可进入备案流程
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
2、已上架小程序
小程序管理后台顶部会提示“小程序需补充备案信息”的提醒,点击【去备案】即可进入备案流程。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
也可以在小程序管理后台设置模块-小程序备案,点击【去备案】进入备案流程。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
二、备案类型
新增备案(首次备案):主体(个人、单位)首次向省通信管理局提出备案申请
变更备案:更新已经完成备案的主体、小程序信息
注销小程序:注销已经完成备案的备案记录,包括注销主体、注销小程序和取消接入
三、备案材料准备
1、小程序备案材料
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
2、前置审批材料
如你的小程序从事新闻、出版、药品和医疗器械、网约车等需须经有关主管部门审核同意的互联网信息服务,在履行备案手续时,应提供业务对应前置审批文件。
3、个人备案
必需材料:个人有效身份证件。
4、非个人备案
必需材料:单位有效证件、个人有效身份证件。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
四、备案流程
备案整体流程总共分为五个环节:备案信息填写、平台初审、工信部短信核验、通管局审核和备案成功。
A-备案信息填写
1、主体信息填写
非个人主体:
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
个人主体:
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
提示:选择地区、详细地址,请填写实际通讯地址。
上传有效证件原件的彩色扫描件或拍照件,请保持图片清晰完整、不遮挡关键信息/图像、边角齐全,证件有效期大于1个月。
请对照证件信息如实选择、填写备案信息。
2、主体负责人信息填写
非个人主体、个人主体:
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
提示:手机号码请填写主体负责人、应急联系人本人使用的有效手机号码,需保持电话畅通,不同人不能使用同一个号码。
3、小程序信息填写
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
4、小程序负责人信息填写及人脸核身
非个人/个人主体-默认复用主体负责人信息
非个人主体-手动填写小程序负责人信息
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
提示:人脸核身时,请确认背景为纯白色,保持表情自然、无闭眼,穿着得体,不遮挡面部。
B-平台初审
开发者在微信公众平台提交小程序备案信息后,平台将会在1-2个工作日内完成初审(具体请以实际审核时间为准),审核结果将以站内信、模板消息等形式通知管理员。在平台初审的过程中,请备案相关人员保持电话畅通,以便平台对你提交的备案信息进行核验。
提示:你可在微信公众平台内查看备案进度。
C-工信部短信核验
根据工信部的要求,小程序备案需完成短信核验。你的备案初审通过后,会收到工信部发送的核验短信(发送号码:12381),请在收到短信的24小时内登录工信部备案官网首页完成短信核验,短信核验成功后备案申请进入通管局审核流程。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
若核验时提示验证码错误或无效,你可触发一次短信重发;24小时内未核验成功,备案将被工信部系统自动驳回,你需到微信公众平台重新提交备案申请。
D-通管局审核 通管局审核各省通信管理局将在1-20个工作日内(具体以实际审核时间为准)完成审核,审核结果以站内信、模板消息、短信等形式通知。
E-备案成功
管局审核通过后,将下发的小程序备案号,代表你的小程序已完成备案,可以进入下一步版本发布等流程。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原教程:微信小程序AI类目-深度合成 - 算法备案
设置-> 添加类目(AI功能需要添加相应的ai类目,否则无法通过审核)
image.png
比如选择深度合成-AI换脸举例:
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
image.png
它会提供三种方式给你选,我们默认选第2个就行(第一个自己去算法备案的不用管,算法备案听说要3w。。,所以我们直接用大型公司已经备案好的进行合作)
image.png
重点
1、 这里我们选择百度智能云进行企业认证(企业营业执照, 企业公章,找公司人事协助) https://cloud.baidu.com/ 注册登录后进行企业认证,完成后直接搜索申请千帆大模型
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
image.png
计费管理这里很多套餐,选一个付费就行
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
image.png
付完后,点击右上角财务,然后找到合同管理,找到自己买过的套餐(买了他就会包含合同了,点击下载)。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
image.png
买了他就会包含合同了,点击下载 注意:合同要打印彩纸版(不然黑白的乙方公司章微信不认),打印好后让公司盖公章 签完后,把图片拼在一起(微信审核只能上传一张图,所以自己用美图工具啥的拼一下)
- 百度算法备案截图 https://beian.cac.gov.cn/ 直接搜 北京百度 然后把结果截图下来就ok。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
到这里,申请AI类目的2份资料都有了,提交审核就行
原教程:Cursor小程序实战系列② 如何从原型界面到小程序界面
本视频地址: https://www.bilibili.com/video/BV19PoQYnESx/?spm_id_from=333.1387.collection.video_card.click
一、原型界面的生成
在cursor中用以下提示词
我想开发一个小程序
目标用户:
- 主要用户:25-45岁的家长,没时间来教小孩怎么写作文,也可能不知道还在对应年级作文的写作规范和要求
- 用户痛点:1、家长难以针对孩子写作弱点提供定制化提升方案
2、无法获得实时写作建议
我目前想到的核心功能如下:
1、用户可以对作文进行拍照,然后上传图片
2、调用大模型对作文进行批改
3、每次批改作文消耗一个积分,使用微信支付进行充值可获得积分
4、用户使用微信授权登陆,登陆完成需要绑定手机号
现在需要你帮我输出高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:
1、用户体验分析:先分析这个小程序的主要功能和用户需求,确定核心交互逻辑。
2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。
3、高保真 UI 设计:作为 UI 设计师,设计贴近真实小程序设计规范的界面,使用现代化的 UI 元素,使其具有良好的视觉体验。
4、HTML 原型实现:使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面,并使用 FontAwesome(或其他开源 UI 组件)让界面更加精美、接近真实的 小程序 设计。拆分代码文件,保持结构清晰:
5、每个界面应作为独立的 HTML 文件存放,例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口,不直接写入所有界面的 HTML 代码,而是使用 iframe 的方式嵌入这些 HTML 片段,并将所有页面直接平铺展示在 index 页面中,而不是跳转链接。
- 真实感增强: - 界面尺寸应模拟 iPhone 15 Pro,并让界面圆角化,使其更像真实的手机界面。
- 使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)。
- 添加顶部状态栏(模拟 iOS 状态栏),并包含 App 导航栏(类似 iOS 底部 Tab Bar)。
请按照以上要求生成完整的 HTML 代码,并确保其可用于实际开发。
二、导出原型图
使用谷歌 Fireshot 插件,导出PNG图
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
三、用小程序开发者工具新建项目
下载地址
使用云开发与不使用云开发的区别
| 对比维度 | 使用云开发 | 不使用云开发(传统开发) |
|---|---|---|
| 开发方式 | 前后端分离,无需自建服务器,直接调用云函数、云数据库等API完成全栈开发 | 需自建后端服务器,前后端分离需联调接口,需编写完整后端逻辑代码 |
| 开发成本 | 初期成本低(免费基础额度),按量计费;无需服务器购置及运维费用 | 需自购服务器、维护数据库、支付带宽费用,人力成本高(需前后端分工) |
| 服务器运维 | 由腾讯云托管,无需开发者维护 | 需自行搭建服务器,处理负载均衡、安全防护、扩容等运维问题 |
| 数据存储 | 内置NoSQL JSON数据库,支持实时同步,可直接在前端操作 | 需自建关系型数据库(如MySQL)或非关系型数据库,需编写CRUD接口及后端逻辑 |
| 实时数据推送 | 内置实时推送能力,通过API直接实现 | 需自行实现WebSocket或长轮询,代码复杂度高 |
| 扩展能力 | 通过云函数快速扩展功能,集成微信生态API(如支付、登录) | 需手动修改后端代码并重新部署服务器,灵活性受限 |
| 开发难度 | 低门槛,前端开发者可独立完成全栈开发,无需后端知识 | 需掌握前后端技术栈(如Node.js、Java),团队协作要求高 |
| 适用场景 | 中小型项目、快速迭代试错、轻量级应用(如工具类、展示类小程序) | 复杂业务逻辑、高并发场景、需深度定制或对接外部系统(如电商、金融类应用) |
| 性能与扩展限制 | 高并发或大数据量时可能遇到性能瓶颈,需优化或升级服务 | 可自主优化服务器配置,灵活应对高并发需求 |
| 数据安全与迁移 | 数据存储于腾讯云,迁移需通过导出接口;权限管理较简单 | 数据完全自主控制,可自由迁移至其他云服务或本地服务器 |
建议:
超级简单的小程序,使用云开发
其他只建议传统开发
1)使用云开发跟微信生态强绑定在一起,而且随着数据量的增加,成本有可能会比购买服务器要高
2)传统开发更灵活,框架的生态更丰富。
比如需要包含一个任务调度功能
传统开发就有非常多的框架可以选择
云开发只能做到最简单
3)接口可以公用,APP
新建项目的目的是保证文件架构的准确性
四、初始化rules
目的是保证小程序能遵循统一的规范
匹配 /components//*,/pages//*
你是一个经验丰富的小程序开发人员,擅长解决各种小程序开发问题,严格遵守小程序开发规范
项目结构
- components
/**这里存放小程序的自定义组件,每个组件单独一个文件夹 */
- pages
/**这里存放小程序的页面,每个页面单独一个文件夹 */
- api
/** 这里存放调用后端服务的文件,按模块划分,每个模块一个文件,文件命名:**Api.js */
- static
/**存放其他常用js或者静态资源图片 */
ui及页面规范
- 所有页面必须包含 js、json、wxml、wxss文件,json文件必须包含以下基本内容
{
"navigationBarTitleText": "上传作文",
"usingComponents": {
}
}
代码规范:
- 使用微信小程序原生框架进行开发,合理使用组件化开发。
- 遵循微信小程序设计规范,确保良好的用户体验。
- 利用微信小程序提供的API进行功能开发,如登录、支付、地理位置等。
- 使用分包加载优化小程序体积和加载性能。
- 合理使用页面生命周期函数和组件生命周期函数。
- 编写详细的代码注释,并在代码中添加必要的错误处理和日志记录。
- 合理使用本地存储和缓存机制。
跟后端交互的rules文件
匹配 api/*.js
** 入参要求
- header中必须设置 auth, 值为当前登录后保存的token值
- 请求的参数使用json 格式, 就算是参数为空,也需要使用 {} 来代替
** http请求
请求方式默认是post,除非有明确要求
** 返参
- 后端统一返回的参数为json对象,格式如下
{
"error": 0,
"body": object,
"message": ''
}
error =0, 表示没有任何异常
error = 500, 表示系统异常,需要弹出系统异常的错误
error = 401,表示需要登录
error 其它值,表示业务异常,直接弹出 message内容
body 是一个对象
** 设计一个通用函数来处理后端API返回值,所有的API文件都是用这个通用函数
五、开始生成界面。
将fireshot导出来的图片,复制到cursor中,输入以下语句
请参考图片,完成所有小程序页面的开发,遵守 @wechat.rules, @api.rules 两个规则
第一次使用,一定要加上规则,不然会失效。
六、微调界面
fireshot导出来的界面可能不完整,需要手动截取图片发到cursor中再进行调整。
这里要有耐心,一个页面一个页面去检查,也是花费时间最久的
七、常见的问题及解决方案
1)小程序的顶部导航和底部tab
用rules提前来规范,我就是刚开始没有,导致导航一直不对
2)使用第三方框架一直有问题
给出示例代码,让cursor明白正确的是什么
3)出现卡顿
使用 @pastchats 来新开对话窗口
4)生成的小程序页面结构不全
在rules中已经设定了规则
八、下期视频:小程序对接python后端
原教程:Cursor小程序实战系列③ 前后端对接保姆级拆解
本视频地址: https://www.bilibili.com/video/BV1NJZ2YfEdn/?spm_id_from=333.1387.collection.video_card.click
往期文档:
-
Cusror rules
-
Cursor小程序实战①:微信备案、注册、生成小程序界面
-
Cursor小程序实战②:原型到小程序界面
一、先理解下什么是前后端,为什么叫对接?
二、谁来定义API接口
1、传统的模式
先后端出接口定义,前端人员按照接口定义自己搭建模拟数据,这样的好处是
前端,后端都能同时开发,互不影响
2、cursor模式
三、生成API接口文档
1、最好的方式,在rules中定义接口变化同时更新接口文档
** 入参要求
- header中必须设置 auth, 值为当前登录后保存的token值
- 请求的参数使用json 格式, 就算是参数为空,也需要使用 {} 来代替
** http请求
请求方式默认是post,除非有明确要求
** 返参
- 后端统一返回的参数为json对象,格式如下
{
"error": 0,
"body": object,
"message": ''
}
error =0, 表示没有任何异常
error = 500, 表示系统异常,需要弹出系统异常的错误
error = 401,表示需要登录
error 其它值,表示业务异常,直接弹出 message内容
body 是一个对象
** 设计一个通用函数来处理后端API返回值,所有的API文件都是用这个通用函数
** 当接口发生修改或者新增时,将接口信息按照如下格式:
接口名称
- 接口核心功能描述,不超过200字
- 接口地址: /print/assembly/{id}/export-pdf
- 方法: GET
- 需要登录: 是
- 请求参数: 无
- 响应类型: blob
- 返回值:{}
同步更新到 @接口文档.md
2、也可以全局扫描的方式生成接口文档
我现在需要一份接口文档,你需要扫描每个页面,页面在 @pages @components ,按照以下流程来获取页面中的接口信息
- 从页面中获取调用的接口,并找到接口调用的真实地址,如果没有你可以自己生成真实的接口地址
- 从页面中获取调用接口的入参和返参,并放到下面的格式中返回
- 出参和入参的格式定义需要符合接口的统一规则 api.mdc
- 接口需要标出是否需要登陆才能访问
最后生成md文档保存起来
格式如下:
接口名称
- 接口核心功能描述,不超过200字
- 接口地址: /print/assembly/{id}/export-pdf
- 方法: GET
- 需要登录: 是
- 请求参数: 无
- 响应类型: blob
- 返回值:{}
记得把 接口规则文档放到上下文中
四、需求文档
需求文档的目的是 让后端明白系统是干什么用的,不用拘泥于需求文档是什么格式。
你可以自己写,或者让AI生成。
根据 核心功能和
- 核心功能1
- 核心功能2
- 核心功能3
参考 @API_DOCUMENTATION_NEW.md 接口定义,总结一个标准的需求文档给我
五、生成后端项目
1、先建空的文件夹,配置好rules
rules使用网上开源的
2、将接口文档和需求文档拷贝到空文件中
去掉需求文档中非功能描述的其他内容。
使用thinking 模式
请仔细阅读 @接口文档.md , @需求文档.md , 遵守 @flask.mdc 规则,完成项目的初始化。请注意以下事项:
- @接口文档.md 里面定义的所有接口必须全部实现,接口名称和出入参格式保持一致
- 数据库使用mysql
3、生成建表语句
按照rules生成的项目会有初始化数据库的方法
或者用以下提示词生成建表语句
@models 根据文件生成对应的mysql 建表语句
4、项目这就完成了?
远远还没结束。
你需要完成页面中每个功能对应的后端流程的调试和修改
六、下期视频预告:使用cursor完成后端逻辑编写的几个常用技巧
原教程:Cursor小程序实战④:如何让AI写好后端代码
本视频地址: https://www.bilibili.com/video/BV1dPLszDEEx/?spm_id_from=333.1387.collection.video_card.click
一、你可能碰到的问题
-
你试图修复一个小错误
-
人工智能给出一个看似合理的更改建议
-
这个修复导致其他地方出错
-
你要求人工智能修复新出现的问题
-
这又产生了另外两个问题
-
如此反复
二、老生常谈rules
-
通用性rules
-
框架型rules
-
个性化rules
/Generate Cursor Rules 我现在需要生成一个rules,目的是 @api 里面的每个route发生变化时必须执行自动化测试,并将测试结果告诉我
Generate Cursor Rules 的出现,让rules的创建更偏向从问题出发,更容易创建属于自己的rules
开源常用的rules
三、做好自动化测试很重要
-
项目初始化完成后的第一次测试
-
平时变更完成后的测试
四、少说车轱辘话,多说流程的话
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
五、用好mermaid流程画图工具
A smarter way of creating diagrams.
原教程:Cursor小程序实战⑤Cursor对接微信两大核心问题
本视频地址:
https://www.bilibili.com/video/BV1wJjwzKEJ3/?spm_id_from=333.1387.collection.video_card.click
一、对话内容
-
非技术人员的语言
-
程序员/技术人员的语言
-
比如:回调地址,api,发送请求 .....
二、微信的两大问题:授权、微信支付
目的是对于非技术人员能够输出一段比较精确的提示词,方便完成功能的开发
1)微信授权登陆
1、永远绕不开用户登陆流程
- 用户登录
手机号验证码登陆
微信授权一键登录
- 用户注册
手机号验证码直接注册
微信授权直接注册
小程序的体系里面,如果你不需要用户的什么信息
采用微信一键自动登录注册
否则就使用
微信一键授权之后,让用户填写你需要的信息,比如手机号,姓名等
APP一般是微信授权后,再同时绑定手机号,或者先手机号在绑定微信
所有的微信授权,都是为了拿一个用户 的openId或者叫unionId
| 类型 | 说明 | 建议 |
|---|---|---|
| openId | 每个用户对小程序的唯一标识 | 只做小程序可以使用openId |
| unionId | 每个用户对小程序所属的开放平台的唯一标识,可以理解为,你公司在微信平台上的所有产品,对这个用户的唯一标识,比如你有小程序,你有APP对接了微信,你有公众号,那么这个用户对这些应用都是唯一标识 | 你多个微信场景且希望打通,则需要记录这个unionId以及openId |
获取方法:
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
其他用户的基础信息
-
头像(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html)
-
昵称(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html)
-
手机号(微信有手机号获取组件,需要付费)
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
2、静默授权以及主动授权
-
静默授权,不需要用户授权,就可以使用
-
主动授权,需要用户同意,拒绝的话会记录这个拒绝关系,只有用户删除小程序才能重新请求授权
3、登陆状态的维持
用户登录后,需要保持登录状态,一般登录状态会有时效,你可以告诉cursor你的时效要求,比如 保持用户登录状态为1天,或者其他更高级的玩法
用户静默授权->获取openId,unionId-> 获取手机号->调用微信头像昵称填写功能,完成昵称填写
帮我做一个微信用户授权功能,授权流程是先通过wx.login获取openId和unionId,保存到数据库,再使用手机号快速验证组件获取手机号,保存到数据库。将用户登录状态维持一天,授权的页面在 @login.wxml , 相关的后端服务在 @user.py
2)微信支付
1、微信支付申请
-
微信商户
-
微信服务商
-
第三方支付渠道
费率的不同,根据自己的情况去选择渠道
2、了解微信支付的流程
3、安装花生壳内网穿透
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原教程:Cursor小程序实战⑥前后端联调常用技巧
本视频地址: https://www.bilibili.com/video/BV1wJjwzKEJ3/?spm_id_from=333.1387.collection.video_card.click
一、什么叫前端,什么叫后端?
前端:注重UI展示和交互
APP、小程序、网页,比如界面上的按钮、图片、文本输入框等
后端:注重数据存储和逻辑,负责接收从前端发送过来的请求并处理这些请求,然后将结果返回给前端
各种后端语言及框架
所以前后端的联调不仅仅限制于小程序,这是一套通用的方法论
二、什么叫开发环境,线上环境
开发环境(本地环境): 后端服务在本地启动,数据库在本地,只能自己访问
线上环境(正式环境): 后端服务在服务器启动,数据在服务器,所有人能访问
所以,联调的前提必须有环境的配置,这也是一个正常前后端项目应该具备的
-
前端项目的环境配置,最主要是 需要对接的API服务地址
-
后端项目的环境配置,最主要是 数据库链接地址,或者其他一些重要的配置
如果现有的项目没有环境配置,你可以添加以下对话提示词,让cursor给你生成:
帮我生成项目的环境配置文件,环境包括开发环境和线上环境,需要支持我很方便的进行环境切换。
有环境配置的项目,最好是在通用的rules或者自定义rules中加上如下一条内容,防止cursor误改了环境配置的内容
禁止随意修改环境配置
- 严禁未经授权修改环境配置,包括但不限于:
- 修改环境的配置
- 修改环境的配置
- 添加或删除环境变量
- 严禁在未经测试的情况下修改环境配置
- 严禁在未经项目负责人批准的情况下向生产环境提交环境配置的更改
或者自己手动生成rules
/Generate Cursor Rules 这个项目是微信小程序项目,帮我生成一个通用的项目规则,需要包含环境的配置,支持快速切换不同的环境,并且要求环境的配置没有经过我的允许不能修改
三、两种联调方式
1)一键联调
将前端后端项目放到一个文件夹内,在cursor中可以共享上下文
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
优点:
- 方便快速,能一次对话完成前后端同时修改
缺点:
-
上下文长度容易超出,经常要new Chat
-
rules比较多,管理容易混乱
-
你需要经常在对话中指定 项目所在的目录,比如 改小程序,你需要@ 小程序目录,这样才能限定cursor检索代码的范围
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
原文此处包含图片,当前版本保留文字说明;请查看原始飞书页面中的图片。
2)跨项目联调
优点:
-
职责单一,管理清晰,上下文的内容比较明确,因为你只针对 前端的逻辑或者后端的逻辑
-
rules管理起来比较方便
缺点:
-
需要维护API文档(其实这是一个好习惯)
-
需要打开两个cursor
-
如果前后端改的是同一个东西,同样的逻辑你需要在前端的cursor对话框和后端的cursor对话框中说两次
四、跨项目联调API文档处理方法
用API文档的变化来驱动前后端项目的变化
-
从前端同步到后端: 界面先行,更容易理解,有视觉上的变化差异
-
从后端同步到前端:接口先行,适合前后端分开处理,能清楚知道逻辑
你的对话内容->拆解后端API及逻辑,生成一个让后端服务能懂的业务清单->让后端服务生成实现的代码
/Generate Cursor Rules 我的项目是一个前后端分离的项目,现在这个项目是前端项目,我希望前端项目在发生变更时,如果涉及到后端的接口变化,你帮我生成一个后端服务的任务清单,我将任务任务清单发给后端服务能直接生成代码。
任务清单放到doc中。
基于以上需求,帮我生成一个rules
API接口变更追踪规则
目的
该规则用于监控前端项目中涉及后端接口的变更,并自动生成后端服务的任务清单,便于直接发送给后端团队进行实现。
规则指引
接口文档
前端项目中的接口文档位于 @doc/api.md,所有接口变更应该同步更新到此文档。
后端任务清单
当前端需求变更涉及到后端接口时,应生成后端任务清单,并存放在 @doc/backend-tasks.md 文件中。
任务清单格式规范
任务清单应包含以下内容:
- 变更概述 - 简要描述此次需求中涉及的接口变更
- 详细任务列表 - 每个接口变更的详细信息
-
接口名称与路径
-
变更类型(新增/修改/删除)
-
请求参数变更
-
返回值变更
-
业务逻辑说明
-
预计工作量
- 依赖关系 - 接口之间的依赖关系
- 测试用例 - 关键测试场景描述
工作流程
- 前端开发确认需求变更涉及后端接口
- 更新接口文档,明确接口规范
- 生成后端任务清单
- 提交给后端团队,进行开发实现
- 完成后进行联调测试
示例任务清单
后端任务清单 - 用户登录模块优化
变更概述
优化用户登录流程,增加第三方登录支持,调整密码规则
详细任务列表
1. 新增第三方登录接口
- 接口路径: /user/thirdPartyLogin
- 变更类型: 新增
- 请求参数:
"platform": "string", // 平台类型: 'wechat', 'qq', 'weibo'
"code": "string",
"userInfo": {
// 用户信息对象
}
}
// 用户信息对象
},
"isNewUser": true // 是否新用户
},
"message": ""
}