AI 开发饺子售卖小程序（2000 商单）

AI 开发饺子售卖小程序（2000 商单） AI 开发饺子售卖小程序（2000 商单） Modified July 20, 2025 这个时候有一些方法。 1、可以要求 Cursor 帮你在代码中输出 debug 信息，并以弹窗的形式展示出来，这样你就可以直接复制下来，让 Cursor 针对性的解决问题。 2、在”微信开发者工具“中打开调试器，很多错误信息都会在上面展示。 四、小程序上线 先发布体验版本。 在”微信开发者工具“中点击”上传“按钮，填下版本号，点击上传即可。 上传之后，怎么发给其他人进行体验呢？ 我们需要进到小程序管理后台，先补充完整小程序信息。 之后，可以在小程序后台管理 版本管理中，查看刚才上传的开发版本，在开发版本右侧设置开发版本为体验版本，设置成功之后，就可以在版本号下方看见”体验版“三个字，点开就有体验二维码，下载下来发给有体验权限的用户即可体验了。 体验没问题之后，提交审核，提交审核需要进行备案，备案通过之后，就会提交到微信团队进行审核了。 后续按照微信要求补充材料，提交备案审核就行，等通知。 五、问题处理 一）构建 npm 失败，怎么处理 点击之后，报错，报错信息如下： Code block Plain Text Copy message： NPM packages not found. Please confirm npm packages which need to build are belong to directory. Or you may edit project.config.json's and appid: XXXX openid: XXXX ideVersion: 1.06.2412050 osType: win32 x64 time: 2025 03 24 16:49:30 我们直接扔给 Cursor 继续尝试，还是不行 Code block Plain Text Copy message：发生错误 Error: The related node modules of D:\Users\shibo.zhong\WeChatProjects\mother dumplings\package.json is not found, please run at D:\Users\shibo.zhong\WeChatProjects\mother dumplings appid: XXX openid: XXX ideVersion: 1.06.2412050 osType: win32 x64 time: 2025 03 24 20:00:31 原因是电脑中没有安装 npm，需要按照步骤安装。 安装完成之后，继续在微信开发者工具中点击 ”构建 npm“ 这个时候有一些方法。 1、可以要求 Cursor 帮你在代码中输出 debug 信息，并以弹窗的形式展示出来，这样你就可以直接复制下来，让 Cursor 针对性的解决问题。 2、在”微信开发者工具“中打开调试器，很多错误信息都会在上面展示。 四、小程序上线 先发布体验版本。 在”微信开发者工具“中点击”上传“按钮，填下版本号，点击上传即可。 上传之后，怎么发给其他人进行体验呢？ 我们需要进到小程序管理后台，先补充完整小程序信息。 之后，可以在小程序后台管理 版本管理中，查看刚才上传的开发版本，在开发版本右侧设置开发版本为体验版本，设置成功之后，就可以在版本号下方看见”体验版“三个字，点开就有体验二维码，下载下来发给有体验权限的用户即可体验了。 体验没问题之后，提交审核，提交审核需要进行备案，备案通过之后，就会提交到微信团队进行审核了。 后续按照微信要求补充材料，提交备案审核就行，等通知。 五、问题处理 一）构建 npm 失败，怎么处理 点击之后，报错，报错信息如下： 我们直接扔给 Cursor 继续尝试，还是不行 原因是电脑中没有安装 npm，需要按照步骤安装。 安装完成之后，继续在微信开发者工具中点击 ”构建 npm“ 接受 Cursor 的解决方案，重新点击”构建 npm“，这会构建成功了。 二）Cursor 免费额度用完了怎么办 开发这个小程序，需要频繁的使用 Cursor 的 chat，很快额度就用完了。 看了一下官网说明，免费用户只有 50 次调用。 这个时候重新注册一个账号进行测试就行了。网易邮箱、qq 邮箱都可以。 三）Cursor 实现不稳定、随意篡改功能怎么办？ 1、按照流程，不要跳步，需求设计、系统设计、数据库设计、接口设计。 2、数据集先创建好，要求后续数据逻辑都跟着数据集走。 3、数据集创建好之后，根据数据集以及页面功能创建云函数，每个云函数都需要经过测试。 四）修改页面布局，怎么处理 提示词 修改首页布局，目标是上下架构。 上面增加 banner 自动切换的广告。 下面为左右布局，左边栏为分类，右边栏为具体的商品（饺子、馄饨）。 删除热门推荐和新品上市。 修改首页布局，目标是上下架构。 上面增加 banner 自动切换的广告。 下面为左右布局，左边栏为分类，右边栏为具体的商品（饺子、馄饨）。 删除热门推荐和新品上市。 六、心得总结 一）敢于表达，才有变现 公众号、知乎文章要规律更新，尤其是知乎，最近几年尤其是 AI 工具、AI 经验相关的内容要多发，广告、商单只有你多发才会有人找到你。 第一篇知乎文章发布后，接到了四位数的 AI 套壳网站商单。 知乎是一个公域平台，推荐流量会基于算法以及账号质量等级，对于新手来说，流量太重要了，很多人写公众号文章写了很久，一看文章阅读量还是个位数。在知乎来说，基本上不存在这个问题，文章/回答写得好，推荐流量是很大的，而且长尾流量也很大，我现在更新频率很低，每天也有 1000 左右的阅读量。 而本次的小程序商单也是来源于知乎平台，商单金额也有四位数。 二）AI 编程经验总结 1、AI 编程已经有质的变化了 这次小程序的开发过程打破了我这样一个 10 年后端开发的固有思维，完全自然语言就可以开发一个这么复杂的小程序，而且耗时很短，对比实际在公司随便加一个小功能都需要 1 2 天的开发工作量，Cursor 这种 AI 编程工具的方式简直是降维打击。 区别于 23 年左右我在使用 AI 编程的时候，现在 AI 编程能做的事情太多了，之前基本上都是指定文件、指定代码的操作，基于整个项目的修改是很难奏效的，现在你会发现 AI 编程对于这种基于整个项目的代码修改也是游刃有余了。 2、懂开发会更有优势 不过也不是说程序员就完全没有优势了，实际操作下来，懂一些软件开发流程、一些开发知识，能够更快的加速整个过程，比如说：数据集的创建，完全不懂开发的人可能都不知道 Json 数据是什么，使用字段方式就会很慢；再比如，有一些异常不在页面上显示，而在微信开发者工具中的调试器中 console 、Network 中，这种情况，有开发经验的同学能够更快的拿到错误信息，让 Cursor 更快解决。 你学到的知识不会辜负你！如果懂小程序开发的同学利用 AI 来完成这件事情，我相信会更快！ 3、相信 AI 编程，不要放弃 也许一开始 AI 给你生成的数据库设计文档、接口设计文档不是完美的，甚至只有 60 分，但是只要我们确认好需求，主体代码开发完成之后，再让 AI 二次开发、多次迭代，也是完全可行的。 针对复杂项目，会需要很多次的交互才能拿到成品，比如这个饺子售卖小程序，经历了和 AI 的超过 50 次交互最后才达到上架状态。 刚开始碰到问题，你有可能会想要放弃，觉得现阶段 AI 完成不了这么复杂的项目，一个 bug 也有可能卡半天。这个时候，不要放弃，只要你能找到报错信息，AI 都能给你解决，如果找不到报错信息，让 AI 给你提示出来，参考”问题处理“章节内容。 最后，想说一句，按照这个趋势，不需要 10 年，程序员也许就不存在了！ 大家好，我是小林，这篇教程作者是伍六七，AI 编程开源知识库作者。 一、小程序设计 1、创建一个空的文件夹 2、使用 Cursor 打开刚才创建的空文件夹 3、创建一个 readme.md 文件 直接简明扼要声明想要实现的大体功能，具体内容如下： 我想开发一款微信小程序，希望能在上面分类展示待出售的饺子、馄饨等食品。 我想开发一款微信小程序，希望能在上面分类展示待出售的饺子、馄饨等食品。 开始让 Cursor 设计这个系统。 按照软件流程，我们应该先完成系统的设计，而系统的设计，包含了需求设计、概要设计、详细设计、其中详细设计中包含了数据库设计、接口设计。 我们按照软件流程让 Cursor 完成所有的设计工作，之后让 Cursor 根据设计文档进行编码的开发，这样才能更好的保证系统的稳定性、AI 实现的稳定性。 根据文档，输出一个需求文档，保存为需求文档。md 根据文档，输出一个需求文档，保存为需求文档。md 根据需求文档，编写系统设计文档。不要添加额外功能，结果输出为系统设计文档。md 根据需求文档，编写系统设计文档。不要添加额外功能，结果输出为系统设计文档。md 输出的设计文档，功能会比较全，会有一些我们暂时不需要的功能，我们可以直接修改设计文档，删除不需要的功能。 根据需求文档、需求设计文档、系统设计文档输出数据库设计文档，保存为数据库设计。md 根据需求文档、需求设计文档、系统设计文档输出数据库设计文档，保存为数据库设计。md 根据需求文档、需求设计文档、系统设计文档、数据库设计文档输出接口设计文档，要求包含入参和出参，保存为接口设计文档。md 根据需求文档、需求设计文档、系统设计文档、数据库设计文档输出接口设计文档，要求包含入参和出参，保存为接口设计文档。md 作为一个不懂小程序开发（这是真的）、也不懂数据库的小白（假装），除了需求文档之外，我们不需要修改其他设计文档。 如果后面发现功能上有问题，再让 Cursor 进行优化即可。 这个小程序设计是不是和传统的系统设计完全不一样，只需要提出要求即可，设计细节完全不需要考虑。 二、小程序开发 根据设计文档进行阶段性开发，每个阶段开发完成后提醒我进行测试，使用小程序 AppId 为 XXXX。 根据设计文档进行阶段性开发，每个阶段开发完成后提醒我进行测试，使用小程序 AppId 为 XXXX。 这个阶段耗时可能会比较长，因为要编写的代码会很多，耐心等待。 不同的大模型输出节奏可能不一样，有的模型会分模块进行开发，停止了之后，输入“继续”即可继续开发。 代码基本上自动写完了，会告诉我们执行后续操作。 后续步骤如下： • 在微信开发者工具中创建云开发环境 • 上传并部署这些云函数 • 创建数据库集合 • 修改前端代码以调用这些云函数 我们按照顺序，告诉 Cursor 一步一步执行。 一）开始创建云开发环境 在微信开发者工具中创建云开发环境 在微信开发者工具中创建云开发环境 要使用云开发环境，必须使用正式的小程序 AppId，我们直接让 Cursor 帮我们修改。 收费说明：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/billing/price.html 可以看到从 2025 年 2 月 19 日起，微信开始了云开发环境的免费体验活动，每个没有云环境或云环境已注销超过 1 个月的小程序支持免费创建一个云环境。 免费云环境开发阶段无需开发者付费，持续使用到正式发布上线。 点击免费体验，云开发环境就创建好了，界面如下： 让 Cursor 帮我们替换代码内的云开发环境 id 按照 Cursor 的回复，执行下一步 在云开发控制台中创建以下数据库集合： user （用户表） product （产品表） category （分类表） order （订单表） cart （购物车表） address （地址表） 在云开发控制台中创建以下数据库集合： user （用户表） product （产品表） category （分类表） order （订单表） cart （购物车表） address （地址表） PS：这些操作，都是 Cursor 告诉我们的，我们只需要复制粘贴即可。 具体操作步骤，这部分属于腾讯云开发环境内的操作，只能我们自己手动完成了。 二）上传并部署这些云函数 上传并部署这些云函数 上传并部署这些云函数 还是不会？让 Cursor 给出详细说明 详细说明一个具体云函数的上传步骤 右键 user 文件夹，没有找到 "上传并部署：云端安装依赖" 选项 详细说明一个具体云函数的上传步骤 右键 user 文件夹，没有找到 "上传并部署：云端安装依赖" 选项 总结一下：有两个方案可以上传部署云函数 1、直接使用云开发环境手动上传 2、微信开发者工具，选择工具 构建 npm 我们选择第二种，构建 npm，构建成功，如果构建失败，查看本文后半部分”问题处理“，查找解决方案。 完成构建之后，就可以按照 Cursor 给的方式上传云函数，具体步骤如下： 选择一个云函数进行上传： • 右键点击云函数目录（例如 cloudfunctions/user） • 在右键菜单中选择"上传并部署： 云端安装依赖" • 等待上传完成 对每个云函数重复此操作，或者： • 右键点击 cloudfunctions 目录 • 选择"上传并部署： 所有云函数" • 等待所有云函数上传完成 上传完成后，可以在云开发控制台中验证： • 点击"云开发"按钮 • 在左侧菜单中选择"云函数" • 检查是否所有云函数都已上传成功 在云开发环境中，看到 7 个云函数已经创建成功了。 测试云函数是否能正常使用 如何在云开发环境中，测试所有的云函数是否正常 如何在云开发环境中，测试所有的云函数是否正常 查看 Cursor 返回，复制到云开发环境中进行测试。 测试界面以及效果。 查看结果，发现调用成功。 基本上都能测试成功，我们就不一一测试了，后面有问题再针对性解决，我们直接进行下一步：创建数据库集合。 三）创建数据库集合 进来之后，不知道怎么创建具体的数据集合，直接问 Cursor。 详细说明某个集合的创建步骤 详细说明某个集合的创建步骤 Cursor 就会详细说明具体操作步骤了，按照步骤，我这里创建了 user 表的第一条记录。 继续创建其他集合。 至此，完成了所有数据集合的创建。我们进行下一步：修改前端代码以调用这些云函数。 四）修改前端代码以调用这些云函数 不改变首页 UI 设计的情况下，修改前端代码调用云函数获取数据 不改变首页 UI 设计的情况下，修改前端代码调用云函数获取数据 这是我们创建的分类数据。 可以看到，首页功能现在已经实现了，不过 UI 设计上比较空，这个问题我们留着后续再解决。 三、问题排查及细分功能优化与实现 一）增加细分功能：商品详情页 现在点击首页的具体饺子商品，无法跳转到商品详情页面，请你实现这部分功能。 现在点击首页的具体饺子商品，无法跳转到商品详情页面，请你实现这部分功能。 重新编译之后，已经可以点击具体的商品了。 继续测试，发现点击添加购物车，购物车列表中没有，在云开发环境中查看 cart 数据集中也没有新增的记录。让 Cursor 实现这部分功能。 在商品详情页中，点击添加购物车，发现购物车数据集中没有新增的记录，请你实现这个功能。 在商品详情页中，点击添加购物车，发现购物车数据集中没有新增的记录，请你实现这个功能。 添加购物车成功，Cursor 的确牛逼呀！ 但是我们点击购物车，发现并没有刚才添加的商品，继续让 Cursor 实现。 点击购物车，看不到刚才添加到购物车的商品，请你实现这个功能。 点击购物车，看不到刚才添加到购物车的商品，请你实现这个功能。 可以看到已经可以在购物车中查看添加的商品了，我们点击结算看看，是否可以结算。 发现添加地址失败，我们以用户的角度，直接告诉 Cursor，让他进行解决。 在购物车中点击结算，需要添加地址，但是地址保存失败，请你实现这个功能，同时实现结算功能。 点击我的底部 tab，发现只有一个空白页面，文字显示 pages/user/index.wxml。请你实现我的页面功能，并支持登录。 在购物车中点击结算，需要添加地址，但是地址保存失败，请你实现这个功能，同时实现结算功能。 点击我的底部 tab，发现只有一个空白页面，文字显示 pages/user/index.wxml。请你实现我的页面功能，并支持登录。 完全没有样式，我们查看 Cursor 的返回，原来是因为缺少图标。 这种标准图标，可以直接在 iconfont 网站上下载，下载上传后的效果。 页面 ok 之后，发现不能登录，直接扔给 Cursor 来解决。 这里也总结一下，一开始 Cursor 出的设计文档可能不够详细，所以最后实现的的功能不完整，只有一个框架。这个时候缺少什么功能直接让 Cursor 补充完整即可，直接大白话告诉 Cursor 你需要什么功能，不需要懂开发！ 二）整体文字大小调整 在发布体验版本之后，有用户反馈字体太小，因为主要用户都是中老年人，老北京拆迁户是买饺子的主力军。我们让 Cursor 帮我们调整整个项目字体的大小。 调大所有页面上显示的文字大小，主要用户是老年人 调大所有页面上显示的文字大小，主要用户是老年人 调整后的效果，整体所有页面的字体都变大了，非常方便中老年人使用。 区别于 23 年左右我在使用 AI 编程的时候，现在 AI 编程能做的事情太多了，之前基本上都是指定文件、指定代码的操作，基于整个项目的修改是很难奏效的，现在你会发现 AI 编程对于这种基于整个项目的代码修改也是游刃有余了。 三）问题排查经验 有些问题你会发现界面没有明确的错误信息，但是 Cursor 编码之后的效果就是没有达到预期。 继续报错，继续扔给 Cursor，Cursor 可能会找捷径，要求它不要跳过 npm 方式。