大家好，我是程序员鱼皮。朋友们有没有这样的经历：想学点新技术，打开文档就头疼，刷视频又容易走神，买了一堆课程却总是半途而废。。。反正我是经常这样，学习焦虑症晚期患者了。

作为一名程序员，我早就想做个程序来治好自己的学习焦虑症，却因为觉得麻烦一直拖延。直到现在 AI 编程能力足够强大，我才终于出手了！通过 TRAE 只用了 1 天就完成了这个《学习英雄》小程序，让学习像玩游戏一样轻松有趣\~ ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4930717a87ee4a789d1f79557efcc682~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=ggK1djyi4L3RembVi3sTCupBq3s%3D) 下面我先带大家体验一下这个小程序，然后会分享整个开发过程中用到的工具和技巧，依然是 **AI 项目开发的保姆级教程**。点个收藏，我们开始吧！ > 推荐观看视频版： ## 项目体验打开小程序，可以看到界面非常简洁、有活力。点击开始学习，然后输入你想学习的任何主题，比如 Java 基础。

AI 会根据主题自动生成相关的知识问答卡片。

然后你只需要点点点做选择题，不用担心做错，因为每道题目都会有解释，哪怕你之前完全没听说过这个主题，一样可以让你学下去。

除了技术知识外，你还可以尝试更多主题，比如一个词汇、一部电影、甚至是一个人。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/911c5f4241594cca881af412cf8aabd8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=UPS6epqdlbcL%2BlF9s4SfJdfLnwE%3D) 原本枯燥的概念通过问答的形式变得生动有趣，学习焦虑瞬间消失了\~ 你还可以查看自己的学习记录，重新学习或者查看题解。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c8734653754f490284891fcbd4e307a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=FlpOSmCFAfGgCARS68QhhmSqnoQ%3D) 没事儿刷一刷，你就能成为学习英雄！ ## 开发实现如果是以前，这种小程序可能要做个好几天。但现在利用 TRAE IDE 的 AI 编程，我要带大家 **不写一行代码**，把这个小程序做出来。步骤： 0. 准备开发工具 1. 需求分析 2. 方案设计 3. 服务集成 4. 后端开发 5. 前端开发 6. 测试验证 7. 持续优化 ### 1、准备开发工具既然要用 AI 开发，工具选择很重要。这次我使用的 AI 编程工具是 [TRAE](https://www.trae.ai/)，因为最近它的 SOLO 模式实在太火爆了，我也想试一试。区别于传统的人类主导 + AI 辅助编程，所谓 SOLO 模式，是让 **AI 主导任务并自动执行开发**，你只需要有一个想法，然后配合 AI 就能让想法真正落地。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7993bdd57acc4421b1d9db41446d39d1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=lAGA30lzLcPjp3vyWhZmLiYHJcc%3D) 此外，既然要开发前端项目，肯定少不了 [Node.js 环境](https://nodejs.org/zh-cn/download)；既然要开发微信小程序，肯定少不了 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，直接去对应的官网下载安装就好。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4ffaa02c36254c84a4754bd569898ef6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=cUpyUJ3056zVlPJ0ikYimr3qmf4%3D) ### 2、需求分析准备好工具后，进入 Trae 的 SOLO 模式，打开比我脸都干净的项目文件夹。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/72751a58415f4a38a757cccf0565e0c8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=S0%2BFaZISh2oUk1UHoBBcRq5pgYA%3D) 首先我们要进行需求分析。别想的太复杂，只需要把自己的想法用自然语言告诉 AI 就好。比如我给 AI 提了这样的需求：你是一位专业的程序员，请帮我开发《学习英雄 - AI 问答引导式学习》微信小程序。用户可以自主设置一个想学习（或测验）的主题，由 AI 围绕主题生成若干个有趣的知识问答卡片，通过闯关答题的形式引导用户更轻松愉快地掌握知识。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/06c93372bd324b32979b203de71ad9ae~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=qgbIclH0IY1yHhPtnurYkSSAGE4%3D) AI 很快生成了详细的产品需求文档和技术架构文档，很符合企业规范的开发流程。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/71af8729d83e498295758852b73b552a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=CYy9fmGzHy2sOIEVA%2FwhouOSz4U%3D) 看得出来 AI 已经有些迫不及待想写代码了，但是千万别急，一定要先 **仔细确认需求文档**。 AI 写的还是不错的，但不一定完全符合我们的预期。因此我们要人工重点关注要实现的核心功能，移除掉不需要的附加功能，先确保核心业务流程（P0 级需求）跑通。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/004ad6fabdda41c3a5051db56338826e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=ZlKmNJ2zvVdP%2F3Xb6p%2BWSJ8o%2BWc%3D) **不要嫌这一步麻烦，现在多花 1 分钟，以后节约 1 小时！** 一定要明确需求，防止 AI 做了不该做的功能。这里有个小技巧，可以利用 TRAE 集成的 Figma 设计工具，在这里获取到一些免费的产品 UI 原型图。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/45303ad467bb497da98939b1bcd98691~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=iYDXODXJjqM56lB7eE08sIVAS5A%3D) 可以点击查看某个原型具体的设计，只需要选中你看上的原型图，点击添加到对话，TRAE 就会自动把原型图关联到发给 AI 的对话中，这个跨产品之间的交互我觉得还是蛮帅的（不过跟我学做项目的同学应该知道实现原理嘿嘿）。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9dcffbac817a4566ab0fa63b552068f5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=yYUVlu5mhINqgNUIdJ%2BZgw43K4g%3D) 不过生活需要惊喜，这里我就让 AI 自己发挥，看看会出现什么创意\~ ### 3、方案设计下面我们要进行方案设计，这以前是月薪几万的架构师干的活，现在让小 AI 帮我们 SOLO。编写这段 Prompt 时一定要注意几个细节，**遵循最小化开发原则**，防止 AI 把简单的事情搞复杂。我已经人工调整了产品需求文档，移除了很多不必要的功能。请你根据我人工修改过的需求，重新生成技术架构文档。要求： 1. 禁止增加需求文档中没有提到的功能 2. 遵循最小化开发原则，以实现功能为主，禁止提供实现功能之外的扩展，比如部署、监控、限流等 3. 遵循前后端分离原则很快 AI 生成了完整的技术架构文档，包括用什么前端和后端技术、接口怎么设计、数据表怎么设计等等。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/77f3b21d2f0141c2b69df74800d98853~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=iCJdw4XvyPFyJF%2F0C2LEzPNQZUQ%3D) 这里我建议能看懂文档的同学还是多发挥一些专业性，明确具体的技术选型，让 AI 生成的代码在自己的可控范围内。比如我明确项目使用 Supabase 数据库、使用 OpenRouter 对接 Gemini 大模型提供 AI 服务。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c9ab0dfdd6b748f2a604bb59b225fc2f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=535m7kYI8cGkdhhBXuj%2BbUfI2zk%3D) 啥啥啥？这些都是啥？别担心，等会儿就会讲。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/26bfc5f795e34f1886df0563016cddb7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=k1wU%2Fuys9Nm2l1kZnfBSoG79vUY%3D) 看不懂文档的同学也不用担心，你就把自己想象成老板或者产品经理，程序员同事吭哧吭哧拿了份技术方案给你，你就说 “怎么实现我不管，这个需求明天上线！” 让他放手干就完了。你要相信 AI，相信相信的力量\~ ### 4、服务集成完成了方案设计，在正式进入开发前，我们还要准备项目依赖的服务。把用户数据存储在哪里？怎么让程序对接 AI 大模型？这都是我们要解决的问题。相比于自己手动安装服务，可以直接使用 TRAE 提供的集成能力，不用专门去看官方文档对接服务，直接傻瓜式安装。我们重点集成 2 个服务。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/61399c6f6f124335bbb44474c13cdaac~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=B9UiwabEVHq3vrqdAwlPAYPKmhw%3D) #### 集成 Supabase [Supabase](https://supabase.com/) 是开源的后端即服务（BaaS）平台，提供数据库存储、用户身份验证、即时 API 等功能，可以帮助开发者快速构建和管理程序后端。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/737821ccb96b472297ee802fe77e8ecd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=6NmTaGUjjEFNMxltWQF1rDetaao%3D) 点击连接按钮，在弹出的页面中完成创建 Supabase 账号、创建组织、以及认证授权。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f24f7fb246e7447b8af1d3c138bdadc2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=JWBkETykpoQ%2BhlHf%2BS4Ahdm%2BF0o%3D) 然后进入到 TRAE，看到组织成功显示后，点击创建一个新项目，填写一些项目配置信息，然后点击创建。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/948ce52b9dba400eaf9210b5c5049c96~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=w2TDVbHcwy60Sf6p6Jn2iUHxCoU%3D) 创建项目后回到 TRAE 刷新一下，点击连接就可以了，就这么简单\~ ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8bf91028ffcd429588a3fca71e97c71b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=XezLLr151P4MgGopt31tfZNA3Q0%3D) 如果说之前 AI Vibe Coding 让后端开发者爽翻了，那这波可以说是前端开发者赢麻了，简单的项目都不用自己搭建后端了\~ #### 集成 OpenRouter AI 服务 TRAE 能够和多种 AI 服务集成，这里我选择 [OpenRouter](https://openrouter.ai/)，它的优点是可以通过统一的 API 对接各家大模型，比如 Gemini、GPT、Claude 等等。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a7d71d21eafe488482b0f5d7404ca9f5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=bV58ZKb2RFnSf547ALi3Uu%2FYSy8%3D) 首先到官网注册登录账号，然后进入 API Keys 页面创建一个调用 AI 的密钥，然后在 TRAE 中配置并填写密钥，AI 服务就已经集成完毕了。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b130abe0ac24ee8955a1aab8c744f1c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=30SHTbR0qZuwqdRy6kvfjC0rZS0%3D) 但是注意，要确保你有足够的用量，否则可能调用失败，或者报错调用频率太频繁。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b763d8c216ee49b6ac70ea9ca2abcae4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=VvLkXpYe0YTPiMrnwJlrW1BDwrA%3D) #### 集成 Stripe 支付服务此外，你还可以集成 [Stripe 支付服务](https://docs.stripe.com/)，它可以让你用最少的代码给产品添加支付和订阅功能。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e2321899f9e54122a039c8a65fc5aed4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=ksIDXaThLwsrleIZaQ%2FQZHXRI6s%3D) 只需要先到官网注册账号，它会自动给你提供一个沙盒测试环境、以及对应的 API 密钥，你可以创建自己的产品并设置定价。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ce3a1ac71a484907b5331ca79b289e36~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=LeZPFAMHP7Fq%2FZvIWICCWFnp4Vk%3D) 然后把这些信息填写到 TRAE 配置中，之后 AI 编程时就会生成支付相关的代码了。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/244ec538205e4fe287306bb6e63b1341~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=SginIVCFxSsjS96AH5BFpPy6WCw%3D) 但是由于微信小程序有一些限制，这里我就先不接入了，大家了解一下就好，网页端和 APP 产品接入还是很香的。 ### 5、后端开发准备工作完成后，我们终于要进入紧张刺激的开发环节了。这里要注意，由于 **AI 的上下文是有限的**，为了能更好地生成完整项目、减少 Bug，建议分个步骤：先生成后端代码，人工校验通过后，再生成前端代码。好，给 AI 输入提示词，先开发后端，确保项目可以正常运行：请你基于最新的产品需求文档和技术架构文档进行开发，优先开发后端，确保项目可以正常运行我们可以使用 TRAE 提供的 Prompt 优化功能来一键优化提示词。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1f587b6bcdf643ef9c731e1d81109531~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=GmD6tO0yfmFv7mInKEj25qObxVI%3D) 嗯，确实比之前更严谨了。点击执行，请开始你的 SOLO\~ AI 会先给出任务计划： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3376dbb0965e48608156bb7a4d2e0a5f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=cu37%2FnyQLSS%2B4g0d%2FO%2Bc%2F0y%2FON8%3D) 然后自主操作终端执行命令、编写后端配置文件和业务逻辑代码、编写数据库建表语句等等，重要操作还会找我们主动确认，非常严谨。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/42ac1cebc0e34fbca15d2498bd7cabd8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=cuj%2B5B66SxUpGY%2BzuIPAC9Dbjp4%3D) 看不懂也没关系，让他放手干吧\~ 等待期间，你可以到编程导航上看看 [免费的编程学习路线](https://codefather.cn/)。TRAE 自带消息通知功能，AI 完成任务后会提醒我们。我感觉 TRAE 调教 AI 还是有一套的，他会自己验证程序是否正常。不过由于我们还没有填写微信登录所需的信息，接口无法完整调用是正常的。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/29842ce5ff20432bbc36d255884dd987~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=C2jed8kiwedXH%2B4DUCrt9jXdMaE%3D) 一段时间后，AI 生成完毕，不仅生成了代码，还很贴心地生成了后端的接口文档。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/751535ee7d9f4ca29f05c04e1101f2cb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=WNmKTwUGGgAM4YVS7Q1I9IpqdrQ%3D) 哎，这个东西很有用哦。 ### 6、前端开发下面进行前端开发。这里一定要注意，不要接着之前的对话继续写提示词了。为什么呢？因为 AI 大模型的上下文是有限的，前面的操作已经消耗了不少上下文，为了防止 AI 上下文不足或者记忆混乱，我们生成前端时，重新开一个干净的对话来编写提示词。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1b3b5aa78f3c4123aaaca6ba74db3cfd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=4qnRdVnYNg9QshUxNnZ1EHyZIhs%3D) 提示词中提供给 AI 产品需求文档、技术架构文档和后端接口文档，就可以让 AI 专注于前端代码生成。你是一位专业的程序员，请帮我开发《学习英雄 - AI 问答引导式学习》微信小程序。用户可以自主设置一个想学习（或测验）的主题，由 AI 围绕主题生成若干个有趣的知识问答卡片，通过闯关答题的形式引导用户更轻松愉快地掌握知识。请你根据 @产品需求文档 @技术架构文档 @后端接口文档，帮我生成完整可运行的微信小程序前端代码。注意： 1. 遵循最小功能原则，不要额外开发需求文档没提到的任何功能 2. 如果需要显示图片，请使用占位图片 picsum.photos 代替（比如 picsum.photos/200/300）好，执行！等待期间，你可以到 [面试鸭](https://www.mianshiya.com/) 上看看免费的面试题和刷题路线。一段时间后，AI 生成完毕，一次性 SOLO 出了 20 多个文件！ ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/73ee4da99aec4e14ae753e67bf9c4b99~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=iZn1FfJ5VcSiHqbEKNZKZbvBcmg%3D) 虽然看着很爽，但老实说我是有点慌的，不知道能不能正常运行。 ### 7、测试验证下面我们来到了激动人心的测试验证环节。首先需要打开微信开发者工具，导入已有项目文件夹，先选择使用测试号开发调试项目。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b6f45206ba1e4fbe978a930226d70e1b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=10gm%2FbmUOImNqkTjJjxb5dYgOLg%3D) 打开项目后，我们先点击右上角的 “测试号”，按照 [文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html) 的指引获取到测试号的 AppID 和 AppSecret 密钥： ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b47796acf1ff46cd97bdcd0687f33378~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=W2EUzmhPN9Cw%2FcwP3qA34E5QNaM%3D) 然后手动填入到后端配置文件中，否则将无法正常微信登录。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d848ac0fc3074ea5a25487ca51dea5aa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=v5LhC2BFBwJ0CxpDsN8EPZzKvE4%3D) 然后我们就可以编译运行项目了。结果，果然报错了！ ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f6bf1c721cb448fa8334ae5614909d17~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=JsOp1zJbQgZjZTdCSTs4covSevw%3D) 意料之中，意料之中。。。小程序开发比网页开发还是更难一些的，毕竟微信开发者工具和文档一直在更新。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/82e770c48665407aa00655c6eb0fb737~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=ABxgMvq%2FWgy4gL2USn1GZxbfLsM%3D) 不过没关系，开发过程中难免遇到问题，解决方法很简单，一句话：**报什么错误，就把报错信息发给 AI，让 AI 来修复！** 像我这里遇到了几个典型的问题： 1）图片路径问题：利用 TRAE 的提示词优化功能，能更好地指引 AI 按照指定的步骤修复 Bug ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0974490788df42a6ade4671b0569e5f4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=Rnfo%2B%2BrcdRENjqI2oUJ%2FMAYqA5Y%3D) 2）登录失败问题：点击开发者工具右上角的 “详情”，进入到本地设置中，勾选 “不校验合法域名” ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4f9a144b84294084aa055bc12b4765af~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=Jpl9ztcdpc5i%2FA8Ke%2FZLLpFi3rY%3D) 3）接口路径问题：这可能是由于上下文过长导致的，让 AI 整体修复前端调用后端接口的路径和参数就好 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c4b6333adc554e1daa55e2091eaf9c70~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=fN8V0eff3oFKuB%2F297D2JB4b2%2BM%3D) 4）环境配置问题：代码中读取的环境变量名称和配置文件中的不一致，这个问题比较简单，我们可以手动修改。当我敲了一个字符后，编辑器会自动提示我要修改哪些代码，还支持跨行修改。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/79b630ba00914f4187e48b934382ac91~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=ISCfxBfpOJHDsvQ4%2BhH%2FY878u4k%3D) 这是 TRAE 提供的 CUE 功能，不仅可以帮你自动补全代码、还可以多行修改代码、自动预测未来可能的修改点，尤其适合重构代码的场景，效率起飞。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/75e78162c35c473eae8b98903fa0be27~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=HuL4mcQiBtxbEuwBebqlOXIEK3c%3D) 经过一段时间的修复，我们的小程序已经可以正常运行了。虽然现在页面丑丑的，但只要跑通了核心业务流程，用户能正常使用，后续的优化都很简单了。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bd5f9f9c86204be6ad2e1daa2e72700b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=F8mlP5bMhbdC5gsBuoy8gikhZbM%3D) ### 8、持续优化最后，如果你要把小程序上线，还是要花一些时间来优化的。记住，优化前先把现有代码利用 Git 版本控制工具进行托管，并且提交一个基础版本，这样之后优化出了任何问题，都可以一键回滚到老版本。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/06c2df787d714365bf4146b9420caebb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=lKvPJpjONwGSyIhC482K88gzMXA%3D) 像我重点让 AI 帮忙优化了整个小程序的样式风格，只要写一段简单的提示词：你是一位程序员，请你帮我优化整个小程序中每个前端页面和元素的样式风格，使各个页面保持一致。参考风格：主色调采用活力橙色，清新治愈的卡通风格、简约雅致、让人感到放松愉快。然后利用 TRAE 的提示词优化功能，就能得到一个更详细的优化方案。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5527fcddafef48269ba085746e8b4b59~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=k3tLXoJMeR%2BMRinEaa8PuqSjD6s%3D) 你可以按需调整，也可以让 AI 放手干。建议大家每进行一次优化或新增一个功能，都提交一次代码，并且适当地新开 AI 对话框，防止上下文过多影响生成的准确度。最终，你看到的这个小程序，就是我优化后的成品啦，效果还不错吧\~ ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3880147259994a6691051b27ad870cb0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=IytBM90aJJcnHTLqzms8O8SPj6E%3D) 但由于卡在认证备案的流程上了（已经在备案中了），要过段时间大家才能体验到小程序啦。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8b32366c47fe4dfba13157a21cea69db~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=fv5GFdETRXQhwgtaa5s1xNw3mag%3D) ## 总结最后聊聊我使用 TRAE SOLO 开发项目的感受吧。首先我感受到了 AI 编程工具的进化，SOLO 从 **将 AI 集成到工具中，进化为将开发工具集成到 AI 中**。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6207b050efee4b96b1d410159642c8b1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=4zpWgVzgEEPDViXCnJn%2BN0Aeq0Q%3D) 感觉开发工具只是 AI 的一个玩物，他可以自由地操作编辑器、终端、浏览器、文档、集成服务等等来自主完成任务，确实比以前更高效智能了，也能完成包含后端的完整项目。而且 AI 会遵循企业标准的开发流程，自动修复大部分问题、检查项目能否运行，不像以前很多时候生成的代码是运行不了的。但是开发过程中大家要注意，现在 **AI 很喜欢把简单的事情搞复杂**，所以最好人工仔细确认需求文档和方案文档，并且像搭积木一样，一步一步地完成开发。后面我也会给大家分享更多 AI 编程的技巧，毕竟 AI 是个工具，只有用对了，才能发挥他最大价值。对 AI 感兴趣的朋友，可以在我们的 [AI 导航](https://ai.codefather.cn/) 上获取到 AI 学习资源、工具大全、提示词和最新资讯等等。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6d4b46902519472aa4d84023c2f35dff~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY6bG855qu:q75.awebp?rk3s=f64ab15b&x-expires=1763343025&x-signature=a8gJGUq0ytMgmjYtiHSutonuzJ0%3D) ## 更多 💻 编程学习交流：[编程导航](https://github.com/liyupi/code-nav) 📃 简历快速制作：[老鱼简历](https://github.com/liyupi/laoyujianli) ✏️ 面试刷题神器：[面试鸭](https://github.com/liyupi/mianshiya)