VibeCoding开发小程序总结与思考

一、写在前面学生的AI开发实验首先介绍一下我的项目背景~我没有企业资质只是纯粹的学生个人开发者想做个微信小程序体验一下我感兴趣的的全vibe coding流程。项目叫食算纪——一个帮你算每日热量、做AI食谱推荐的工具类小程序。分工比较明确Trae以及Codex负责全部前端UI交互从页面骨架到样式调试到交互逻辑几乎没手写过一行WXML我负责底层的部署——微信登录、云函数接口、Dify AI对话对接、数据流转、上线配置等。这篇文章是想存档并且分享一个全流程——两个AI协作、一个小程序、从零到上线的完整心路。二、两个关键方案要取舍做决策比写代码重要2.1 弃用手机号登录改OpenID静默方案最开始想得很理想——“用户进来一键登录我拿手机号做用户标识” 然后就去研究微信的 getPhoneNumber 接口。结果是个人小程序接不了。微信要求 getPhoneNumber 必须在微信开放平台绑定个人主体没这权限。折腾了两天试过各种曲线救国方案方案一让用户手动输入手机号 验证码。被自己否决了——个人小程序发短信要钱接入验证码SDK要企业资质此路不通。方案二纯邮箱注册。在小程序端邮箱输入体验极差而且微信生态里用户天然抵触填表单留存率会崩。最终方案OpenID 静默登录 游客模式。思路比较简单——用户打开小程序我在后端自动调 wx.login拿到临时code后传给云函数云函数换回 openid这就是用户的唯一标识。全程不需要用户点任何按钮自动注册。用户首次进入是游客可以浏览首页食谱、看内容只有用到AI推荐、收藏、记录三餐等核心功能时才弹出温和提示引导登录。落地时的核心代码云函数端有脱敏处理javascript// 云函数: user_loginconst cloud require(‘wx-server-sdk’)cloud.init()const db cloud.database()exports.main async (event) {const { cloudID } eventconst wxContext cloud.getWXContext()// openid 由云函数自动解析不涉及敏感信息const openid wxContext.OPENID// 查询或创建用户let user await db.collection(‘users’).doc(openid).get().catch(() null)if (!user) {await db.collection(‘users’).add({_id: openid,role: ‘guest’,createdAt: db.serverDate()})}return { openid, isNew: !user }}客户端这边我在 uth.service.js 里封装了一层isLoggedIn() 检查缓存中是否有 uth_tokenisGuest() 判断 uth_guest 标志。首页 onShow 里做一次判断没登录且非游客状态才跳登录页。游客登录和正式登录是独立的两条路径互不干扰。这个取舍让我省掉了短信费用、规避了资质问题体验上用户进来就能看内容留存反而比强制登录好。2.2 本地Dify迁移云端SaaSAI接入的完整落地记录AI食谱推荐是我的小程序“食算纪”的核心功能。最初我在本地搭了Dify社区版部署在内网服务器上通过内网穿透让小程序访问。但这个方案的问题很关键问题1本地Dify的稳定性取决于内网穿透服务的可靠性。我用的frp穿透高峰期经常断连用户那边AI推荐食谱按钮转圈30秒然后报错equest:fail排查半天发现是穿透服务有问题。问题2Dify社区版更新频繁每次升级都要手动迁移数据工作流和知识库配置得重配。问题3最关键的一点——微信小程序要求所有请求域名必须配置在合法域名白名单中。内网穿透的域名每次换服务器IP都要重新配置审核周期1-3个工作日等项目审批下来用户早流失了。最终决定迁移到Dify云端SaaSdify.ai的官方云服务。迁移过程踩了几个坑工作流兼容性本地版导出工作流DSL文件导入云端SaaS后发现部分节点配置不兼容本地版的自定义工具节点在云端的映射规则不同。解决逐个节点检查把自定义HTTP请求节点改成了LLM节点代码节点组合。API密钥管理本地版直接用API Key调用云端SaaS要求用 pp-secret pp-id 的方式鉴权。我需要在云函数端重新封装Dify对接逻辑。响应格式差异本地版流式返回SSE格式云端SaaS返回JSON格式。客户端那边的解析逻辑要同步改。迁移后的对接代码如下云函数端有脱敏处理javascript// 云函数dify_chatconst cloud require(‘wx-server-sdk’)cloud.init()exports.main async (event) {const { query, user_id } eventconst DIFY_API ‘https://api.dify.ai/v1/chat-messages’const res await cloud.callFunction({name: ‘http_proxy’,data: {url: DIFY_API,method: ‘POST’,headers: {Authorization: Bearer ’ event.api_key,‘Content-Type’: ‘application/json’},data: {inputs: {},query: query,user: user_id,response_mode: ‘blocking’}}})return res.result}核心经验内网穿透方案在开发阶段够用但上线必须上云端产品。不是因为本地Dify不好而是小程序生态对域名、HTTPS、稳定性有硬性要求是绕不过去的。三、VibeCoding开发经验总结Trae前端 后端接口融合经验我自己记录了比较丰富的踩坑经验结合了自己做底层接口对接的体会总结出一套融合AI协作的高效方法论。3.1 指令要量化到像素级不要给AI模糊空间Trae文档里有个特别真实的案例——早期做个人中心页时指令写做一个个人中心页简约古风结果AI生成了【界面还原描述顶部出现一个超级大的浅绿色椭圆背景包裹着头像椭圆宽度远超头像两倍以上昵称在头像正下方竖排显示热量卡片被挤到右下角且尺寸巨大整体布局臃肿不对称】这问题我在后端接口对接时也遇到过。让AI写一个 “用户登录接口”它给我写了一个 wx.login wx.getUserProfile 数据库读写 页面跳转全都揉在一个云函数里。原因我认为是指令缺少约束维度。两个AI协作后我提炼出一个标准指令模板无论给Trae写前端还是给我底层写接口都按这个结构任务[一句话说清做什么]输入输出[明确入参类型和返参结构]约束条件[技术栈、环境限制、禁止项]代码规范[文件命名、模块拆分规则]适配要求[多端兼容、边界情况]禁止事项[明确排除的内容]举个例子我让AI写Dify对接云函数时的指令任务编写云函数调用Dify chat-messages API接收用户query返回AI回复输入event.querystringevent.user_idstring输出返回AI回复文本约束运行在微信云函数环境使用cloud.callFunction代理HTTP请求代码规范拆分为dify_chat主函数和http_proxy辅助云函数禁止不要硬编码API密钥使用cloud的环境变量不要使用axios这个命令的关键在于——把期望变成约束AI自由发挥的空间小了返工率就低了。3.2 需求拆分不要一次给AI完整页面/完整接口Trae文档里有个很好的实践结构 → 样式 → 交互 → 适配四步迭代。做后端接口对接也是类似的“入参定义 → 逻辑实现 → 异常处理 → 性能优化”。我做Dify对接时第一步只让AI写API调用的函数签名和入参校验第二步才填充核心的业务逻辑第三步补异常处理和重试机制第四步优化超时和缓存。每次只改一个关注点AI不容易翻车出了问题也知道精确到哪一行代码。Trae那边踩过一个同样逻辑的坑——让AI一次性生成AI推荐食谱完整页面结果WXML结构做对了但CSS样式太丑修样式时又不小心改坏了WXML结构。后来改成先让Trae生成骨架WXML确认布局没问题后加样式最后补交互逻辑。每一步改动都在前一步确认的基础上叠加不会发生改A坏了B的连锁崩塌。3.3 多AI分工的关键建立统一的上下文锚点两个AI做同一个项目最大的问题是风格漂移。今天用Trae生成了一个页面配色是 #1F6B3E 深绿配 #F9F6EF 米白底明天用另一个AI写后端管理面板它自己选了蓝色主色调跟小程序前端完全对不上。我的解决办法是在项目根目录维护一份设计规范文档和接口规范文档每次对话开头都附带一句记忆锚点。给Trae的锚点沿用食算纪规范主色#1F6B3E背景#F9F6EF卡片圆角28rpx 字号24-40rpx七级体系按钮渐变#D7EFDD→#A7E0B8配深绿文字给我底层AI的锚点项目环境微信云开发云函数Node.js 12数据库云数据库集合命名users/meals/favorites/recipes鉴权方式OpenID静默登录auth_token缓存机制API代理通过http_proxy云函数转发外部API请求这一行锚点能让AI从第一个回答就开始保持在正确的上下文中不需要你反复纠正不对颜色改成绿色“不对用云函数不是Express”。成本几乎为零但效率提升很明显。3.4 AI生成的代码一定要做人工审查这句话听起来像废话但实际开发中是很多人包括我会偷懒的环节。AI生成的代码看起来能用就直接部署了然后线上出问题才回头排查。我踩过的几个太过信任AI的坑Trae生成的头像选择按钮用了 包裹没有清掉微信小程序的默认 ::after 伪元素边框和 line-height导致头像在真机上变成椭圆形。排查了半小时才发现是button默认样式问题。我让AI写的云函数登录接口它没有做 ry-catch用户网络差时 wx.login 偶发失败请求直接抛错小程序白屏。加了一个全局错误中间件才稳定。所以我现在养成了习惯AI提交代码后我至少花5分钟做code review——看异常处理是否完备、边界情况是否覆盖、敏感信息是否泄露。这5分钟帮我拦截了至少80%的上线后故障。四、全场景Debug排错合集五大类真实问题这一章是真正的血泪史。我按问题类型分类每条统一格式现象 → 根源 → 解决方案。4.1 权限类问题getPhoneNumber接口调用失败返回无权限现象用户点击微信手机号一键登录按钮弹窗提示获取手机号失败。根源个人小程序没有 getPhoneNumber 的调用权限这是微信开放平台对认证企业的专属能力。我绕了一大圈才发现根本不是代码问题是资质问题。解决放弃手机号方案彻底改用OpenID静默登录 游客模式。对外展示用户昵称和头像通过 wx.getUserProfile仅限已登录用户触发用户标识只用openid。问题头像选择后保存失败现象用户点击头像区域弹出选择器选完头像后保存到数据库再次打开仍是旧头像。根源微信头像URL有时效性直接存 vatarUrl 到数据库一段时间后URL过期失效。另外 在部分基础库版本下 indinput 不触发导致昵称丢失。解决头像用云存储转存——用户选完头像后云函数把临时URL下载并上传到云存储存云存储的永久FileID昵称同时监听 indinput 和 indblurlur 时兜底取值。4.2 域名类问题request:fail 域名不在合法列表中现象小程序调用Dify API时真机上始终返回equest:fail。开发工具中不校验合法域名勾上能跑真机一关就不行。背景【界面还原描述手机上打开小程序点击AI推荐食谱功能后页面底部出现红色toast提示网络异常稍后loading消失页面没有任何数据展示。开发者工具中看到控制台报错信息指向request失败URL为自定义穿透域名。】根源微信小程序要求所有 wx.request 的域名必须在微信公众平台配置为合法域名且必须是备案过的HTTPS域名。内网穿透的临时域名不可能通过备案审核。解决所有外部API调用统一走云函数代理。云函数不在域名白名单限制范围内云函数的HTTP请求微信不管。我建了一个 http_proxy 云函数做通用转发层所有第三方API请求经它中转。问题云函数请求超时现象用户连续快速点击换一批切换AI食谱页面loading转圈超过20秒最终显示请求超时。根源云函数默认超时时间是3秒免费版Dify的AI生成需要5-15秒必然超时。加上快速点击产生多个并发请求云函数并发数超限。解决在云函数控制台将超时时间调整为20秒免费版最大支持客户端加防重复点击锁以及一个请求合并机制——相同查询在5秒内只发一次缓存结果返回。4.3 Dify对接类问题Dify响应内容格式异常现象AI回复中包含大量Markdown标记和列表符号在小程序端直接显示成了原始符号而不是格式化文本。根源Dify的Prompt中没有要求纯文本回复默认输出Markdown格式。小程序端没有Markdown渲染能力直接当纯文本显示了。解决在Dify的Prompt末尾加了约束请使用纯文本回复不要使用Markdown标记、列表符号、粗体斜体标记。用数字序号顿号表示列表用换行分段。同时在小程序端用正则过滤残留标记。问题Dify工作流导入失败现象从本地Dify社区版导出的DSL工作流文件导入云端SaaS时报节点配置不兼容。根源本地版和云端版的节点Schema有差异特别是自定义工具节点和HTTP请求节点的配置格式不同。云端版不支持本地版的部分插件。解决云端重新搭建工作流对照本地版的逻辑链用云端的原生LLM节点 代码节点 知识检索节点重新组合。写了一份迁移文档记录节点映射关系本地节点云端替代方案自定义HTTP工具LLM节点 代码节点知识库检索云端知识库节点需重新上传文档条件判断代码节点内写if逻辑变量聚合LLM节点输出格式化指令4.4 UI布局类问题flex布局文字溢出现象食谱详情页中菜名超过10个字时文字把右侧的热量卡片和收藏按钮挤出屏幕热量卡片只显示一半。根源AI生成的flex布局中文字区域没有设置 min-width: 0flex子元素内容溢出时不收缩。这是CSS flex布局的经典问题。解决文字容器加 min-width: 0右侧固定元素加 lex-shrink: 0长文本用 -webkit-line-clamp: 2 限制显示两行。问题按钮文字显示HTML实体编码现象登录页 getPhoneNumber 按钮上显示  和 › 字符看起来像乱码。根源AI在生成WXML时混入了HTML实体编码如  是字体图标编码小程序WXML引擎不解码HTML编码直接当文字显示。解决全文搜索WXML中所有 #x 开头的字符串替换为纯文字。指令中明确要求不要使用HTML实体编码所有符号用Unicode字符直接写。问题loading状态卡片留白过大现象AI推荐食谱的加载状态卡片上下padding设了48rpx配合64rpx的图标和28rpx的按钮间距中间出现大片空白视觉上像内容丢失。根源AI认为空状态需要呼吸感给了过大的内边距和元素尺寸但空状态内容少大padding反而暴露了内容不足的缺陷。解决空状态卡片padding统一32rpx图标56rpx元素间距16rpx。核心原则空状态的视觉重量应低于正常内容卡片。4.5 网络与性能类问题退出登录后缓存残留导致状态异常现象用户退出登录后重新登录个人中心仍显示旧头像和昵称首页数据也未清空。根源logout() 只清了 uth_token 和 uth_user没有清理 mine_user、profile、meals 等业务缓存。重新登录后从缓存中读取了旧数据。解决logout() 中统一清理所有用户相关缓存Key用一个白名单管理只保留不依赖登录态的基础配置其他全部清除。退出后eLaunch 清空页面栈。问题快速点击触发重复请求现象用户快速连续点击换一批按钮触发了多个并发Dify请求服务器端生成多个回复页面展示混乱。根源按钮没有防重复点击机制异步请求未完成时按钮仍可点击。解决所有异步按钮设置 loading 和 disabled 双重保护javascript // 通用按钮防重复点击逻辑handleTapButton: function () {if (this.data.isSubmitting) returnthis.setData({ isSubmitting: true })// 异步操作wx.showLoading({ title: 处理中... })doAsyncTask().finally(() {this.setData({ isSubmitting: false })wx.hideLoading()})}五、个人小程序上线适配实操经验这一章全是我在上线过程中用血泪换来的经验!5.1 隐私协议修改微信从2023年9月开始要求所有小程序必须配置《用户隐私保护指引》否则部分接口无法调用。踩坑点1隐私协议写得太全。我一开始直接复制了网上某大厂的隐私协议模板结果微信审核反馈协议内容与小程序实际功能不符。原因是我的小程序没用到「位置信息」「相册写入」等权限但协议里写了审核认为声明权限超出实际功能。解决老老实实对照微信公众平台的功能列表逐项确认自己的小程序用什么权限只声明真正用到的——用户昵称、头像、openid、剪切板复制食谱文字。踩坑点2隐私授权弹窗触发时机不对。我开始在 onLaunch 时弹隐私授权弹窗结果小程序都还没渲染就弹窗用户点同意后页面没加载出来体验极差。解决移到首页 onShow 中检测如果 wx.getPrivacySetting 返回eedAuthorization: true再弹窗。同意后正常加载页面不同意则显示部分功能受限的提示页。5.2 域名配置域名配置直接决定小程序能不能正常跑。我的配置清单云开发域名自动白名单微信云开发cloudbase的域名不需要手动配置自动在白名单中外部域名如果小程序直接调外部HTTP API必须在「开发管理 - 服务器域名」中配置equest合法域名。但我的方案是全部走云函数代理所以这一步我几乎没配任何外部域名业务域名如果需要内嵌web-view还要配业务域名。个人小程序用web-view有限制我干脆没做这个功能核心建议能用云函数代理的请求全部走云函数代理省去域名配置的麻烦。云函数请求外部API时微信不检查域名白名单。5.3 上线自查清单我整理了一份上线前的checklist每次提审前对照检查首页不依赖登录态游客能顺畅浏览所有 wx.request 域名已配置合法域名或已走云函数代理隐私协议已配置并正确触发无硬编码密钥、内网IP所有敏感信息存云函数环境变量所有API调用有异常处理网络差不白屏所有按钮有防重复点击退出登录后缓存完全清除加载状态有loading指示空数据有占位提示头像URL已转存云存储非微信临时URL字号统一rpx单位flex布局有min-width:0防溢出真机测试通过非仅开发者工具测试已设置合理的云函数超时时间AI功能20s普通接口5s符合微信「个人主体小程序」的类目要求审核最关注的审核被拒重灾区个人小程序最容易在类目选择上被拒。我用的是「工具-计算类」需要提供计算功能的文案说明。如果你的小程序涉及医疗建议“饮食建议”可能会被归到医疗健康类目——个人小程序做不了。所以AI食谱推荐的文案要加仅供参考的免责声明文案上刻意避开口吻像专业建议。六、VibeCoding开发模式总结与深度思考做完整食算纪我对用AI写代码这件事有了完全不一样的理解。6.1 VibeCoding真正的优势在哪1. 快速搭建原型。从0到MVP的速度是传统开发的5-10倍。我花了3天时间课余就让食算纪的基础页面跑起来了——首页、食谱列表、个人中心、登录页几乎所有UI都是AI一句话生成的。换做手写至少一周起步。2. 消灭了不敢动手的心理门槛。以前做一个新功能要先调研API、看文档、写demo光心理准备就要半天。现在直接跟AI说帮我写个XXX5分钟后就有可运行的代码。哪怕代码不全对至少有了一个可修改的起点。这个心理门槛的降低对独立开发者来说是巨大的生产力释放。3. 适合你不知道你不知道的东西的场景。比如我一开始不知道微信云函数可以自动解析 wxContext.OPENID我甚至不知道有云函数这个东西。AI直接帮我写了完整的登录云函数我才知道哦原来微信生态里可以这么干。AI像是一个懂很多但需要你指挥的技术顾问。6.2 但是——必须清醒认识到的短板1. AI没有全局意识。它帮你写一个页面的时候很厉害但它不会考虑这个页面和另外五个页面的视觉一致性它帮你写一个函数很高效但它不会考虑这个函数和其他十个函数的数据流是否闭环。全局架构、技术选型、方案取舍还是必须人来做。2. AI生成的代码质量不稳定。有时候给你一个工业级封装有时候给你一个玩具级实现。你需要有能力判断这坨代码能不能用——这恰恰是需要基本功的地方。如果你完全不懂代码让AI写个完整的微信小程序几乎一定会踩坑就像我踩的那些。3. 调试成本被转移了。传统开发是写代码2小时调试0.5小时VibeCoding是写代码5分钟调试2小时。AI帮你快速生成了但出了问题你得自己排查。这对开发者的排查能力要求反而更高了——你不仅要会写还要会读懂AI写的东西然后修它。6.3 给独立开发者和毕设同学的建议如果你打算用VibeCoding模式做自己的小程序/毕设我的建议是首先技术基本功不能丢。至少要能读懂AI生成的代码能判断它写得对不对能定位问题在哪儿。AI写代码不等于你不用学了——它像是让你的阅读能力变得比写作能力更重要。其次选型比编码重要一万倍。我这个食算纪项目里最关键的决定不是怎么写登录接口而是用不用手机号登录、“Dify放本地还是云端”。这些决策AI做不了需要你结合微信生态规则、个人资质、成本、用户体验来权衡。方案对了代码只是执行。再次用AI要叠层而非一次性。不要指望给AI一个终极指令就得到一个完美产品。按骨架→功能→样式→适配→优化的节奏迭代每层用AI辅助完成但每层都要经过人类评审。我和Trae分步做前端的方式和我自己分步做后端接口的方式本质上是一回事把问题拆到AI能稳定输出的粒度。最后接受AI写了一堆你也能手写的代码。很多时候AI写的代码你自己也能写甚至写得更好。但AI的价值在于帮你省掉写作时间让你把精力放在更重要的事情上——测试、优化、上线、迭代。这就像用脚手架而不是徒手搬砖虽然砖还是砖但效率不同。6.4 我的个人评价回头看看食算纪是我做过最复杂最从0到1的项目也是我做过最累的项目。我觉得VibeCoding最好的使用姿势是决策靠人执行靠AI。技术选型、架构设计、方案评估用人的判断力编码实现、样式调试、多端适配让AI冲在前面。不神话AI也不抵制AI它就是一把好用的工具——但握工具的得是清醒的手。如果让我重新开始做食算纪我会在第一天就确定好登录方案、域名策略全部云函数代理、Dify部署方式直接云端SaaS不折腾本地而不是等到上线前才一个一个改。这些决策上的经验我觉得比烧一个月的token都值钱。附录A. 可复用的AI开发指令模板前端页面指令模板页面[功能名称] 设计规范主色#1F6B3E背景#F9F6EF卡片白底圆角28rpx 布局[flex方向/排列方式/对齐规则] 元素规格[各元素具体的rpx尺寸、间距] 交互[点击跳转/状态切换/禁用态] 适配box-sizing:border-boxmin-width:0单位统一rpx 禁止[明确排除的元素和样式]后端接口指令模板任务[一句话描述] 输入[入参结构] 输出[返参结构] 约束[技术栈/环境/限制条件] 异常处理[网络超时/参数错误/空数据] 密钥管理[说明密钥如何传入禁止硬编码] 文件规范[模块拆分/命名规则]多AI协作上下文锚点项目食算纪微信小程序 前端规范主色#1F6B3E背景#F9F6EF卡片28rpx七级字号24-40rpx 后端规范云函数Node.js云数据库OpenID鉴权Dify SaaS 通信方式云函数代理外部API请求B. 个人小程序避坑速查表类别常见坑正确做法严重程度登录getPhoneNumber个人小程序不可用改用OpenID静默登录致命登录onLaunch跳转页面白屏onShow中跳转用reLaunch高域名直接调外部API报request:fail全部走云函数代理致命Dify响应含Markdown无法渲染Prompt约束客户端过滤高Dify云函数超时3s默认调大到20s客户端loading高UIflex布局文字溢出min-width:0 flex-shrink:0中UIButton默认样式干扰::after清除border-box中UI头像URL短暂过期转存云存储FileID中UIHTML实体编码乱码禁用#x编码中权限隐私协议与功能不符只声明实际使用的权限高权限隐私授权弹窗过早首页onShow按需弹窗中上线类目选择错误被拒工具-计算类加免责声明致命性能快速点击重复请求按钮loadingdisabled双重锁中性能退出登录缓存残留logout()全量清除用户缓存高食算纪是我第一个完整走完AI辅助开发→上线全流程的小程序。文章里的每一个问题都是我真实踩过的坑每一个方案都是我改过至少两版才落地的。希望能帮同样在VibeCoding路上探索的你少走一些弯路~~~如果你也在用AI做小程序开发欢迎交流心得。