19 万字拆解，从0到1！手把手带你用Cursor克隆我的第2个小程序_怎么用 cursor 来 git 别人的代码

技术文档

01 前言

前面一期介绍如何使用Cursor和其他AI工具开发一款小程序，由于涉及到新闻资质备案的缘故最后没有上线使用。下面这个小程序是全程由Cursor开发的第2个小程序，目前已备案通过审核上线了。灵感来源在“衣食住行、吃喝拉撒”中选择了其中1个，也思考过记账类、读书打卡类、减压类的等等，最后定位到了当前这个小程序：便便小管家。

小程序的相关功能：拉粑粑计时功能、记录功能、日历功能、提肛训练功能、排行榜功能、个人信息功能。相关页面如下，点击图片可放大查看：

首页

记录

打卡

日历

提肛

排行

我的

如前文所说，首次使用Cursor开发出了浏览器插件、使用Cursor+扣子一个周末开发出了工具合集的小程序之后，这次的小程序多了很多交互：

1、排行榜功能用到了云开发的云函数、数据库等功能。2、提肛运动的页面的提肛动画效果。3、记录、汇总、排行榜页面的数据一致性问题。

专业的小程序开发人员可能觉得以上不算问题，但在接触AI编程之前，从未接触过小程序相关开发，也非全栈开发工程师，现在借助Cursor开发出了导航栏中的五个功能，并且在这么短的时间内成功发布上线了，换做以前，这样的效率是不可想象的。

接下来，将把开发过程全程无死角输出，用到的提示词、处理错误的过程以及踩的坑全部托出，希望能让任何一个无小程序开发经验、无前端编程经验的用户也能轻松复刻。

全文1w字左右，70 张图，如果对你有帮助，希望点赞关注。

02 整体流程

本次开发的整体流程如下图：

03 需求分析

在确定了要开发小程序的定位后，主要需求内容其实也就对应的确定下来了。

比如拉粑粑功能，流程为：开始计时、结束计时、记录相关信息、生成趣味海报；再加上排行榜、提肛运动功能。

▷ 需求描述

简单整理之后，将相关功能用文字描述出来如下：

1、开始拉粑粑时可以点击记时功能，拉粑粑结束后点击拉完了，背景图使用assets目录下的otter-bg.jpg，该页面上面就一个计时器，一个开始计时按钮。2、点击“拉完了”后选择记录粑粑的相关形状、颜色、状态、粑量，选用合适的图标展示。3、第2步生成记录完成后，弹出当前拉粑粑的记录海报，可分享，可关闭，关闭后进入记录页面，排列布局。4、记录页面中可以看到拉粑粑汇总，也有有具体的日历，点击某一天的可以看到那天的记录详情，比如拉粑粑时间、拉粑粑次数、拉粑粑颜色、粑量等信息。5、提肛运动，点击提肛运动后，正中间是一个菊花图案，最中间是开始训练、点击后，可以动态伸缩，下方是早、中、晚，可以随时进行开始和结束，随时随地训练，训练完成后可以添加一条当日提肛次数在拉粑粑汇总页面中。6、添加一个排行榜功能，排行榜功能最顶端可以选择次数榜、持久榜，点击后显示相应的排行。7、添加”我的“页面，页面上展示头像、名称和签名，旁边有一个编辑资料，下边有一个是否参与排行的选项、还有一个记录选项，点击记录后跳转到记录页面。8、最下方的导航页面有五个：噗噗、记录、提肛、排行、我的。

可以看到，只是一份很简单的功能清单，将自己的想法描述出来就行。

▷ 背景图

为了增加页面的趣味性，在拉粑粑页面添加一个可爱风格的背景图，使用即梦AI多次抽卡生成背景图片，并放在相关目录下。试了兔子、大象、考拉、小狗、水獭等等各种动物的组合，最后选择了水獭当整体的背景图和形象。

04 原型生成

首先在相关目录下新建一个空的文件夹，然后将上面用即梦生成的图片放在对应的文件夹里面

有了Cursor,原型图只需几分钟便可以生成，使用万能的提示词模板+上面列举的功能清单，用Cursor打开这个文件夹，输入相关的提示词。

提示词如下：

我想开发一个{类似便便小管家的小程序}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：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 代码，并确保其可用于实际开发。主要有以下几个功能1、开始拉粑粑时可以点击记时功能，拉粑粑结束后点击拉完了，背景图使用assets目录下的otter-bg.jpg，该页面上面就一个计时器，一个开始计时按钮。2、点击“拉完了”后选择记录粑粑的相关形状、颜色、状态、粑量，选用合适的图标展示。3、第2步生成记录完成后，弹出当前拉粑粑的记录海报，可分享，可关闭，关闭后进入记录页面，排列布局。4、记录页面中可以看到拉粑粑汇总，也有有具体的日历，点击某一天的可以看到那天的记录详情，比如拉粑粑时间、拉粑粑次数、拉粑粑颜色、粑量等信息。5、提肛运动，点击提肛运动后，正中间是一个菊花图案，最中间是开始训练、点击后，可以动态伸缩，下方是早、中、晚，可以随时进行开始和结束，随时随地训练，训练完成后可以添加一条当日提肛次数在拉粑粑汇总页面中。6、添加一个排行榜功能，排行榜功能最顶端可以选择次数榜、持久榜，点击后显示相应的排行。7、添加”我的“页面，页面上展示头像、名称和签名，旁边有一个编辑资料，下边有一个是否参与排行的选项、还有一个记录选项，点击记录后跳转到记录页面。8、最下方的导航页面有五个：噗噗、记录、提肛、排行、我的。9、整体风格跟assets目录下的otter-bg.jpg风格保持一致，可爱卡通治愈解压风格。

之后Cursor便开始噼里啪啦的进行输出了，等Cursor输出完毕后，原来的文件夹下便多出了几个文件

可以看到多了8个文件，然后使用浏览器打开index.html文件：

打开后，看到相关的原型图如下，实话说对于这个原型图生成的质量，我还是感到很惊艳的。不过同样的提示词，Cursor生成的原型图每次可能都会不一样，可以多次抽卡找到自己觉得合适的原型图。

05 架构设计

前端使用微信小程序原生框架，后端使用微信云开发。

06 开发阶段

▷ 准备阶段

首先新创建一个用于开发小程序的文件目录，使用微信开发者工具打开这个目录，依次填写AppID，这里选择不使用模板。

这里有一个坑：由于最开始选择了云开发，并选择了相关模板，之后发现模板中很多文件都是当前这个小程序不需要的文件，也不确定某些文件是否有用，导致后续处理起来很麻烦。因此这里选择不使用模板，这样只生成开发小程序时最基本的一些文件。生成后如下图：

▷ 云开发

排行榜功能需要数据来做支撑，如果采用mysql之类的数据库，相对而言开发任务太重了，看了微信云开发的介绍以及观看了微信云开发的官方教程后，决定采用微信云开发中的数据库进行数据存储。

首先在微信开发者工具中打开云开发按钮，可以看到首月免费，点击开通。

开通后可以看到数据库、存储、云函数等功能，记录下环境ID，下面开发会用到。

▷ 开发流程

使用Cursor打开刚才新建的小程序的相关目录，可以看到微信开发者工具生成的基础文件；之后将上一步生成的原型图粘贴到Cursor中，填写相关的提示词，点击发送。

注意事项：这里一定要使用Agent模式，并选择claude 3.7，只有这样才能发挥出它真正的实力。

▷ 云函数上传

在使用云开发时，跟着官方的云开发教程在选择不使用模版的情况下，Cursor自动帮我们生成了相关云函数，我们只需要点击该云函数并右键，选择上传并部署：云端安装依赖，之后便可以点击云开发，在点击云函数，便可以看到上传的这个函数了。

这里有一个坑：有的时候Cursor可能并不会主动在project.config.json文件添加这一行代码，如果我们发现云函数颜色没有发生变化，或者右键没有相关选项时，在project.config.json文件下添加以下代码。

\"cloudfunctionRoot\": \"cloud/\"

这段代码的作用就是：指定本地已存在的目录作为云开发的本地根目录。

点击上传后便可以在云开发后台看到相关的云函数了。

▷ 流程详解

经过上面的步骤之后，小程序的基本的框架就算搭建起来了，剩下的便是每一个页面每一块逻辑进行微调。在这里也有一个坑，当把问题图片复制给Cursor并让其分析原因并解决时，如果不给Cursor指定范围，Cursor有时候修改的范围会过大，会把其他功能代码也给修改掉。前篇文章提到过的，可以用到Cursor的【@功能】，这个功能可以指定修改的文件范围，减少Cursor大范围无差别修改的概率。

掌握这个技巧后，便可以测试每个页面进行相关优化了。

这里以相对复杂的【提肛功能】的页面为例进行说明，其他的页面相对简单，基本思路一致。

【提肛功能】页面中的动画过渡效果相对比较复杂，所以，针对这个页面按照上面生成原型图的方法，重新生成了一次原型图如下：

这个图片上是一个页面的不同展示情况，然后，将自己想要的效果，在相关目录下创建一个文件，这个文件名称为：require.md，通过观察pages目录下的文件夹，可以看出【提肛训练】的代码主要在train的目录下，之后让Cursor修改代码时，使用Cursord的【@功能】指定train目录便可以减少Cursor的改动。

在开始正式修改之前，问一下Deepseek,然后可以根据AI的相关建议按需采用。

开发这个小程序的第一原则是简单，这个页面只打算设置随机提示语、训练页面、训练内容、训练说明四部分，之后将详细的要求添加到刚才require.md文件里，如图：

相关require.md中的需求可以详细写一下，比如【提肛功能】页面的需求如下：

整个提肛运动页面只有以下四个功能：随机提示语训练功能训练内容训练说明1、随机提示语功能：在训练页面的下方随机展示出以下提示语：“橡果即将滚落！用菊花刹车紧急制动～\"\"检测到鱼群经过！启动水下菊花推进器\"\"蒲公英飘过鼻尖～忍住喷嚏夹紧树洞\"\"模仿水獭晾肚皮，悄悄收紧秘密武器\"\"上游漂来小木筏！菊花马达全速运转\"\"马桶变身钢琴凳，用菊花弹奏《菊次郎的夏天》\"\"快递小哥正在敲门！菊花肌肉智能门锁启动\"\"老板突然查岗！火速切换工作专注模式\"\"闻到隔壁烤鱼的香气！菊花自动开启省流模式\"\"假装正在给气球打结，每一秒都要稳稳哒\"\"模仿潮汐节奏，让菊部随月光轻轻舞动\"\"成为会呼吸的陶艺师，塑造完美菊部曲线\"\"想象自己正在收纳银河，每颗星星都要归位\"\"变身水獭瑜伽大师，在呼吸间雕刻时光\"2、训练功能训练功能上方有上午、中午、下午。训练的规则如下：当点击上午时，依次按照 爆发训练10次，休息10秒，耐力训练5次 休息10秒 的训练方式进行，提肛中心做成动态收缩和舒张形式。同理训练内容如下：上午：爆发训练10次，休息10秒，耐力训练5次 休息10秒中午：爆发训练10次，休息10秒，三段式5次，休息10秒，爆发训练10次，休息10秒晚上：爆发训练5次，休息10秒，耐力训练5次 休息10秒，爆发训练10次，休息10秒具体训练方式：爆发训练：2秒收紧pc肌，保持2秒，然后放松三秒三段式收紧和放松：分3次逐渐收紧pc肌，保持5秒，然后再分3次逐渐放松pc肌中级耐力：按照系统提示收紧pc肌，保持收紧状态5秒，然后放松。 举个例子如下：点击上午时，自动匹配爆发训练10次，休息10秒，耐力训练5次 休息10秒 的训练方式，动态的中心00:00文字修改为“开始训练”，当点击动态的中心文字开始训练时，变更为：爆发训练10次 --> 爆发训练9次 --> 爆发训练8次 .... 爆发训练1次 --> 休息10秒 --> 休息9秒 --> 休息8秒 --> ... 休息1秒  --> 耐力训练5次 --> 耐力训练4次 --> ... 耐力训练1次 --> 休息10秒--> --> 休息9秒 --> 休息8秒 --> ... 休息1秒  --> 训练结束当训练完成一次后记录下来训练的次数，每天的提肛训练记录也会在日历页面展示。训练内容功能：根据具体的上午、中午或下午展示具体的训练内容训练说明功能：在最下方添加训练说明：【文字说明，原封不动展示】1. 点击图中开始训练后，PC肌跟着图中的动画进行收缩、保持、放松。2. 图中圆圈向内是收缩、暂停时保持、向外时扩张，分别对应PC肌的收缩、保持、放松。3. 建议检索专业教程确认PC肌位置后在进行练习。4. 建议循序渐进，每天训练次数不宜超过三次，每周可以放松1～2天

然后在Cursor中进行提问，提示词如下：

仔细分析require.md这里的需求，只需要修改train目录下的文件，其他地方不要修改；理解需求后，给出三个最可靠的方案，并在三个方案中选择兼顾性能、代码量、大小等维度最好的方案开始执行，动画效果要尽可能流畅丝滑。

优化前的【提肛功能】页面如下：

Agent模式下，模型使用3.7，点击发送：

可以看到Cursor最后修改了哪些文件以及最后的总结：

生成的页面如下：

编译后，如果发现不能上下滑动，直接截图描述问题给Cursor，让Cursor进行解决：

发送后，Cursor会给出解决方案：

解决后，页面可以上下滚动了

测试问题修复后，点击Accept：

在这里有三个实用的技巧：

技巧一：

在进行每一轮的对话中，因为Cursor每次调用大模型返回的结果是不可预测的，有时候可能一次就解决了存在的问题，有时候需要连续抽卡好几次，可能会面临这样情况：比如总共提问了3次，第1次和第2次的输出结果符合你的预期，但没有及时点击【Accept】，第3次输出的结果反而最不符合你的预期，这时点击【Reject】，会直接导致前两次的代码会消失，这种情况下，建议大家使用git进行版本管理，遇到测试通过的代码就Accept一次，不合适的就Reject，这样整个代码的修改会更清爽一些。不过这个也不是完全必要的。

如果不知道git是什么，可以直接问AI让它给你通俗的介绍一下，并按照相关安装步骤进行安装（这里不进行详细介绍，请自行搜索相关资料）。

git安装完成后，在Cursor中搜索Git Graph这个插件，并点击安装。

安装完成后，便可以对代码的每次提交记录进行可视化管理了：

技巧二：

参考短视频女生给自己男朋友下达指令干活的例子，把Cursor当成男朋友进行下达指令和提问。描述的越详细，它最终实现的就越接近真实的诉求。如下图：

上图是直接询问的Deepseek输出的内容，可以看到，在对Cursor提问时，加上明确的指令会事半功倍。

技巧三：

遇事不决问AI，如果自己哪里没有灵感或者暂时没有头绪，可以随时随地使用AI。例如上面提肛运动的提示词，可以得到不同维度的提示语。

再比如对分享海报的图片配色不知如何设置时，可以将相关目录下的js、wxss、wxml代码粘贴给Deepseek，之后AI便可以给我们进行相关优化建议。

熟练使用以上三个技巧，便可以高效解决多种维度的问题。

▷ 小程序调试

经过上面每一步的调试以及修改之后，在微信开发者工具上进行编译后，可以不断的进行测试。比如提肛页面中进行了训练内容的字体修改、将按钮点击的触点加在了圆形训练的中心位置、调整了页面的相关布局及颜色，最终的效果如下：

同理，测试【排行榜功能】、【记录功能】，比如一次拉粑粑的记录完成后，同步查看排行榜中的记录是否同步更新，拉粑时间和次数是否同步变化，验证数据是否一致。如果存在问题，便截图将相关的问题仔细描述并将自己的期望按照步骤描述出来后，Cursor会根据提示词解决相关问题。

▷ 真机测试

在微信开发者工具中编译调试通过后，确定相关需求逻辑都走通之后，下一步便是真机测试，真机测试有两种方式，一种是二维码真机调试，一种是自动真机调试。

点击二维码真机调试后，选择下方的ios或者Android系统后，等待编译上传代码后便可以进行扫码调试。

点击自动真机调试时，打开当前登录的开发者账号的微信便可以自动看到对应的小程序。

这里有一个坑：在微信开发者工具中调试编译通过后，在真机上有可能是白屏或者滑动不生效或者相关样式不兼容，这时候，便可以截图并询问Cursor，让Cursor解决这个问题。例如提肛运动页面在真机上调试时，动画不匹配，这时将手机上的截图上传给Cursor并详细描述异常和期望的结果，等待Cursor解决即可。

提示词如下：

提肛页面的动画在微信开发者工具上完全生效，但是在真机调试时，动画无法展示，点击无动画效果，使用的真机是ios系统，不要急着改代码，先仔细分析原因并给出三个最可靠的方案，并在三个方案中选择兼顾性能、代码量、大小等维度最好的方案开始执行，动画效果要尽可能流畅丝滑。

可以看到Cursor会对产生的原因进行详细分析，并根据提示词选择最合适的方案进行解决该问题。

如果有条件，可选择不同系统、不同型号的手机进行测试，以解决屏幕的适配问题、动画效果展示问题等等，遇到问题便截图给Cursor解决，直到在测试的手机上把相关的需求逻辑流程走通为止。

▷ 发布审核

准备工作

在正式上传代码审核前，可以使用微信开发者工具的体验评分的功能来进行检测一下。

根据微信官方文档的描述：体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。

#关于微信官方【体验评分】文档请看：https://developers.weixin.qq.com/miniprogram/dev/framework/audits/audits.html

我们使用这个功能检测后可以将检测结果发给Cursor，然后按照优化建议进行优化。

使用流程是：在调试器区域切换到 Audits 面板；之后点击”开始“按钮，然后自行操作小程序界面，运行过的页面就会被“体验评分”检测到。

点击停止便可以结束检测。

结束后会显示相应的检测报告，根据报告进行相应的优化。

代码上传

点击代码上传，填写相关小程序的信息，点击确定后，便可以在小程序后台的版本管理中找到上传的信息。

在小程序的后台，【管理】 →【版本管理】中可以看到刚才提交的开发版本信息，左下角有一个体验版的二维码，可以用手机点击体验版的二维码进行审核前的测试，如果有问题可以在次调试修复后继续上传，如果没问题便可以提交审核。

认证及备案

在小程序的【账号设置】→【基本设置】中，可以看到认证信息和备案信息，审核通过上线前要进行微信认证以及小程序备案。这一部分可以在微信官方文档上有详细的介绍。详情可以查看微信官方文档：

#关于【微信认证】请看：https://developers.weixin.qq.com/miniprogram/product/renzheng.html#关于【小程序备案】请看：https://developers.weixin.qq.com/miniprogram/product/record/guidelines.html

审核上线

认证通过以及备案通过后，并且微信审核通过后，可以进行发布上线。上线后，小程序整体的流程基本就全部过了一遍。

注意的是，在提交审核时，会询问你是否采集用户隐私，这一部分包括但不限于：

收集昵称、头像；

收集用户位置信息；
收集用户手机号；
访问用户摄像头等等。

这里可以让Cursor自己检查一下当前小程序中使用的权限以及是否有不必要的权限，如果存在不必要的权限可以让Cursor移除这段代码，如果是必须需要的权限，比如有的小程序要使用微信号登录，这种情况在提交审核后，需要在【基本设置】→【服务内容声明】中更新用户隐私保护指引后才可以正常使用功能。

07 技巧汇总

▷ Cursor编程助手要善于使用【@功能】：

@Files是引用相关文件，可以使相关修改固定在一定的范围内；
@Folders 可以直接引入某一个文件夹，将文件夹下所有内容添加至上下文中，比如我想修改提肛页面的功能，可以直接@training这个目录；
@Code 可以直接引用某一段代码，可以更精确地定位到某一段代码；
@Docs 引用相关文档。比如想开发用户隐私保护相关的代码，微信官方文档中有相关的demo，我们只需要找到对应的API文档链接，然后按照如下步骤，便可以引用该文档进行开发。

▷ 是否安装git

如果项目比较复杂，最好安装git，并在Cursor中搜索Git Graph这个插件管理。这样可以对每一次的提交改动进行管理，方便回溯代码。当然如果项目比较简单，就一两个页面，可以直接进行开发。

▷ 如何减少Cursor 抽卡次数

与Cursor的对话时，要输入清晰且明确的指令，尽可能按照开发流程和步骤给它下相应指令，这样可以减少抽卡的次数，越详细可能一次成功的概率就越大。

▷ 遇事不决问AI

遇事不决就问AI，能让AI帮忙解决不用自己动手，包括但不限于需求描述优化、UI界面优化、寻找创意等。

▷ 多维度调试，优化小程序的体验

尽可能使用不同系统、不同型号手机进行调试，在上线前尽可能解决隐藏的问题，提高效率和用户体验效果。

08 遇到的问题汇总

如果测试通过生成的代码是确定自己想要的，及时Accept，不然有可能下一次Reject可能会将上一次的修改丢失；
在处理用户权限时，让Cursor全局检查是否有不必要的权限，如果存在的话及时移除；
更新用户隐私保护指引的文档时，尽可能先读一下官方的介绍，按照官方的指引填写，减少审核不通过的次数；
注意小程序主包的大小，在使用相关图片时，尽量将图片压缩在KB级别，代码包越小越容易通过微信官方的代码质量检测；
注意使用云开发时，Cursor可能会使用缓存，会导致缓存和实际数据的不一致，所以不要滥用缓存；
云开发中选择不使用模版，后续将云开发的根目录设置进去，减少模板中不必要的代码。

09 总结与反思

以目前AI工具的迭代速度来看，人人都能开发应用的时代应该很快就会到来，即使没有编程基础，也能从零起步打造出一款完整的小程序。在这个过程中，代码并非最关键的因素，更重要的是挖掘需求的能力以及迅速行动的决心。同时，在开发未知的领域比如小程序、APP等，要“战略上藐视对手，战术上重视对手”。AI编程大有可为，绝非空谈。

大家想用AI工具开发一款什么样的小程序呢？欢迎留言区一起讨论，共同成长。