第一次听到VibeCoding这个词我第一反应是这不就是拿嘴写代码吗后来自己上手试了几天发现这事儿还真有点门道。我决定拿它做一个旅行类微信小程序试试水从产品原型到页面设计再到云函数、地图打卡、Excel导出全程尽量用自然语言描述需求让AI帮我完成绝大部分代码。今天把这次实战里踩过的坑、试出来的经验、以及一套能直接照抄的流程整理出来给准备用VibeCoding方式做微信小程序的朋友当个参考。这篇文章适合这几类人看想用AI辅助自己从零写一个小程序的新手已经在用uniapp开发但总在细节上反复试错的开发者还有对低代码、AI编程这类工作方式好奇、想评估它到底顶不顶用的产品同学。我不会只讲“AI真厉害”这种正确的废话会把真实遇到的问题和绕路过程都摊开讲尤其是一些文档里语焉不详、搜起来特别费劲的小细节。1. 项目整体设计与思路拆解1.1 为什么选旅行小程序作为VibeCoding实战项目选旅行这个主题不是随手拍脑袋。我当时的判断标准很简单一个项目要能真正检验AI写代码的成色它必须有足够的复杂度但又不能复杂到AI完全接不住。旅行小程序恰好卡在这个位置上。旅行场景天然包含了几类典型的微信小程序能力目的地列表需要列表渲染和下拉刷新行程编辑需要表单交互和动态表单字段地图打卡需要定位和地图组件旅行清单需要本地存储或云数据库分享行程需要生成海报或分享链接。这些都是小程序开发里最高频的能力任何一个单独拿出来都不算难但组合在一起就能把AI代码生成的真实水平暴露出来。技术栈我选了uniapp而不是原生微信小程序。原因有三第一VibeCoding生成代码时uniapp的模板语法比原生WXML在结构上更规整AI生成的代码兼容性更好出错的概率明显低第二HBuilderX可以直接运行uniapp项目到微信开发者工具在“AI写代码—预览—修正”循环里少了一道手动转码的工序第三以后想顺手发到H5或其他端不用重新开发。实际用下来这个选择是对的后面几乎所有AI生成页面在微信开发者工具里都能直接编译通过。1.2 VibeCoding开发方式怎么拆解需求很多第一次尝试VibeCoding的人有个误解觉得只要说出“帮我做一个旅行小程序”AI就能给你变出一个完整应用。实测下来这句话只够生成一个看起来像样的Demo首页距离能跑通业务流程还很远。问题不在AI不行而在需求描述太模糊。我的做法是把需求拆成原子级描述然后用“三段式提示词模板”来约束AI。这个模板可以当作你以后写提示词的起点第一段角色设定和背景告诉AI项目使用的框架、目标平台和业务是什么比如“你是资深uniapp/微信小程序开发工程师项目是一个旅行记录小程序使用vue3 setup语法”。第二段功能描述要具体到页面结构、交互行为和数据字段比如“首页包含顶部搜索框、横向滚动的分类标签栏、下方目的地卡片列表卡片展示封面图、地名、评分、游玩天数、收藏按钮”。第三段约束条件明确尺寸、样式偏好、组件使用边界比如“所有尺寸使用rpx图片使用绝对路径占位收藏按钮切换时需要更新本地状态”。这套方法下AI一次生成可用的代码比例大概在七成左右剩下的三成靠追问修正。比如它生成的页面里经常会出现固定像素高度的滚动区域在真机上就露馅了这时只需要补一句“把scroll-view高度改成flex:1自适应”它就能改对。所以说白了VibeCoding不是把写代码这件事消失了而是把大部分编码动作变成了需求描述和结果验收。2. 核心细节解析与实操要点2.1 页面设计里的尺寸单位和顶部导航栏高度刚开始做页面设计时我总被各种尺寸问题搞到怀疑人生。微信小程序的rpx单位是自适应屏幕宽度设计的设计稿按750rpx宽度来出在普通手机上1rpx约等于0.5px。如果你用uniapp开发这个问题稍微缓和一些因为uniapp在编译时会自动换算但在自定义导航栏、多端适配这些场景里还是得手动处理。顶部导航栏高度是第一个大坑。用原生导航栏时你可以不管它但旅行小程序首页想要“沉浸式”效果让背景图延伸到状态栏后面就必须自己做自定义导航栏。自定义导航栏的前提是知道状态栏高度、胶囊按钮位置和整个导航栏的安全高度。我在项目里用了一段通用代码来动态计算导航栏高度可以无缝粘贴到你的组件里const sysInfo uni.getSystemInfoSync(); const menuButton uni.getMenuButtonBoundingClientRect(); const statusBarHeight sysInfo.statusBarHeight; const navBarHeight (menuButton.top - statusBarHeight) * 2 menuButton.height;这段代码的思路是菜单胶囊按钮右上角那三个点的top值减去状态栏高度得到胶囊距离状态栏底部的间距再乘以2是因为胶囊上下间距对称加上胶囊自身高度就是自定义导航栏应该占用的总高度。我在实际项目里测了iPhone和几台安卓机这个算法都稳。记住拿到这些值之后要存到全局变量或缓存里等页面二次进入时直接读取不要每次启动页面都重新计算否则导航栏会出现肉眼可见的跳动。页面设计上还有一个容易忽略的点底部安全区。旅行行程编辑页有固定在底部的“保存行程”按钮如果不处理iPhone的底部横条按钮会被Home Indicator挡掉一部分。uniapp里可以在样式里用env(safe-area-inset-bottom)来处理或者直接用uni-app提供的safe-area-inset-bottom类。这些细节AI很少主动帮你覆盖需要你在验收代码时自己盯一眼。2.2 动态设置标题和优化进入时的加载页面旅行小程序里动态标题是刚需因为你进入某个目的地详情页时标题栏应该显示“大理七日游”而不是千篇一律的“详情”。原生小程序的页面标题可以在pages.json里配置navigationBarTitleText但要动态修改就得靠接口。uniapp里我习惯这样处理uni.setNavigationBarTitle({ title: this.destinationName });这段代码放在onLoad或者异步获取目的地信息后的回调里都行。注意一个细节如果页面标题在请求数据前先设置成固定占位请求回来后再次设置标题会有闪跳。我最后的做法是先在onLoad里设置成“加载中”数据返回后再设置成真实标题这样视觉上虽然也有变化但比空标题体验好很多。“修改刚进入的加载页面”是热搜词里另一个高频需求。很多新手第一次看到小程序启动时会白屏一段时间以为是出bug了。其实这是小程序冷启动时逻辑层和视图层都在初始化页面还没有渲染完成导致的。解决方案通常有两种一种是在pages.json里把第一个页面配成一个独立的启动页启动页里放品牌Logo和转场动画等首页数据预加载完成后用uni.reLaunch跳过去另一种是首页不跳转但页面里用骨架屏占住结构让用户感觉页面是“秒开”的。我更推荐骨架屏方案因为它避免了页面跳转的系统级动画体验更流畅。实现也不复杂页面模板里用v-if控制数据没回来时渲染一组灰色块数据回来后切换成真实内容。AI生成首页时我让它单独生成了一套骨架屏结构它给出的灰色块布局基本能对上真实内容的形状实测观感很自然。2.3 跳转链接、单选框和雷达图这些交互细节VibeCoding生成代码时交互细节往往是最容易翻车的地方因为它会给你一个“看起来差不多”的方案但真正跑起来才发现少了关键配置。先说跳转链接。小程序内部跳转我用的是uni.navigateTo或uni.switchTab这个比较常规。但需求里有一个“复制链接分享行程”的功能这就涉及微信提供的weixin://dl/business这类协议链接。这个链接不是随便拼的它需要你在微信公众平台后台生成对应的URL Link或URL Scheme然后在代码里通过接口换取短链再复制给用户。如果只是硬编码一个weixin://dl/business的格式真机上点击基本没反应。我当时在这上浪费了将近半天最后发现是后台没配置业务域名、也没在“生成URL Scheme”里设置有效的路径参数。后来我把整条流程改成云函数里调用小程序的generateUrlLink接口拿到链接后再显示给用户才算真正跑通。单选框的坑相对小一点。旅行偏好设置页需要让用户选“一个人的旅行、情侣出游、亲子游”等选项AI生成的代码用的是label包input的写法功能没有问题但样式比较原始。如果你想要那种圆角卡片样式的单选效果建议先用view模拟通过active类来控制选中态这样视觉上更统一也更好定制。雷达图是我当时加的一个炫技模块用来展示用户在多个旅行维度的能力值比如“攻略达人、美食雷达、摄影高手、徒步耐力”。微信小程序里没有现成的雷达图组件我让AI直接基于canvas画它给的方案是计算五边形的顶点坐标再用canvas绘制网格线和数据区域。这段代码生成得很顺利但调试canvas时我在H5端预览正常微信开发者工具里却显示空白最后发现是canvas的type属性要设置为2d在旧版canvas接口里坐标转换方式不同。如果你也遇到类似问题优先检查canvas类型和绘制时机。3. 实操过程与核心环节实现3.1 从注册到备案备注环境搭建全流程环境搭建听起来简单里面全是细碎但不过不行的事情。首先是注册小程序账号。个人主体和企业主体的权限差别很大个人主体不能开通微信支付很多接口也受限。我做旅行小程序需要支付功能做付费攻略解锁所以用了企业主体。注册时要注意选择“小程序”而不是“公众号”两者是独立的产品线。备案那一步很多人都被卡过尤其是备案备注信息不知道怎么写。我一开始填“个人小程序开发测试”直接被驳回了。咨询之后发现备注要写清楚小程序的实际业务内容和运营方向比如“本小程序提供旅行攻略分享和旅行计划管理服务用户可浏览目的地信息、创建和分享行程计划”。更重要的是这个业务描述要和你选择的类目一致比如你选了“旅游-旅游攻略”那备注就得围绕攻略和行程来讲不能写“电商销售”。这条可以记下来能帮你少走一次驳回流程。工具链上有两条路线。一条是直接用微信开发者工具新建小程序项目写原生代码另一条是我这次用的HBuilderX创建uniapp项目然后在HBuilderX里运行到微信开发者工具。我强烈建议VibeCoding实战走第二条路线因为HBuilderX对AI生成代码的兼容性更好而且运行按钮直接在编辑器顶部调试起来顺很多。别忘了在HBuilderX里配置微信开发者工具的安装路径否则预览会报“工具服务端口未开启”。云开发是另一个需要提前开通的环境。旅行小程序的行程数据、用户打卡记录、附件存储我全放到了微信云开发里它相当于腾讯给你托管的云数据库、云函数和对象存储。开通之后建一个名为trip的集合导入几条简单的测试数据后面AI生成的增删改查代码就能直接跑通。3.2 高德地图打卡与行程记录实现旅行小程序的核心功能之一是打卡地图用户旅行途中点一下就可以记录当前地点。这个模块的地图部分我直接用微信小程序自带的map组件但它只负责展示地图和标记点逆地址解析就是把经纬度转换成“洱海生态廊道”这种文字描述需要接入第三方地图SDK。这里我选了高德地图因为它的逆地理编码接口返回的POI信息很丰富也有现成的微信小程序SDK。接入流程大概是在高德开放平台创建应用拿到Web服务Key和微信小程序Key然后需要注意配置request合法域名把高德的域名加进小程序后台的服务器域名白名单里否则真机请求会被拦。这个白名单配置在开发阶段可以临时开启“不校验合法域名”但上线前一定要配上。核心流程跑起来之后我让AI生成了一段定位和逆编码的代码。这里贴上关键逻辑uni.getLocation({ type: gcj02, success: (res) { const latitude res.latitude; const longitude res.longitude; // 调用高德逆地理编码 uni.request({ url: https://restapi.amap.com/v3/geocode/regeo, data: { key: 你的Key, location: ${longitude},${latitude} }, success: (geoRes) { const address geoRes.data.regeocode.formatted_address; this.currentLocation address; } }); } });这段代码在开发者工具里很容易通过但真机上第一次使用会弹权限申请用户如果点拒绝代码会直接走fail回调。我建议fail回调里做一层友好提示告诉用户去设置页开启定位权限而不是静默失败。另外行车途中连续打卡的场景建议加一个防抖逻辑避免用户点一次按钮触发多次请求白白消耗云函数调用次数。打卡数据存到云数据库之后行程记录页需要按时间线展示这些地点徽章。这里我踩到一个数据结构的坑一开始把打卡记录嵌套在行程文档里导致多人同时打卡时反复读取同一个大文档性能很差。后来改成打卡记录独立成一条数据只存tripId关联查询时用where过滤性能立刻好了很多。这也是AI不会主动告诉你的设计取舍需要你自己根据业务量级来判断。3.3 Excel导出、附件保存与多人协同网友热搜词里有“微信小程序导出excel”和“保存附件 wx.env.user_data_path”这两个我都在项目里实现了放在一起说。行程结束后用户想把旅行计划导出来分享或者归档我选择在云函数里用node-xlsx生成Excel文件。云函数这样写const xlsx require(node-xlsx); const rows [[日期, 地点, 备注], ...tripData]; const buffer xlsx.build([{ name: 行程, data: rows }]); return { buffer };云函数返回的是Buffer对象前端拿到之后需要把二进制内容写入本地文件。这里就用到了wx.env.USER_DATA_PATH它是小程序当前用户专属的本地文件目录每个用户隔离适合放临时文件。我当时的保存代码是这样的const fs wx.getFileSystemManager(); fs.writeFileSync(${wx.env.USER_DATA_PATH}/trip.xlsx, res.result.buffer, binary);写完文件之后可以调用uni.openDocument预览或者用微信的分享文件能力把文件发给好友。这里有个坑writeFileSync的第三个参数编码一定是binary不然生成的Excel会损坏另外在部分安卓机型上文件路径要拼接时间戳防止覆盖否则第二次导出会显示旧文件。多人协同是另一个相对复杂的功能。我的方案是给行程文档加一个onMember字段协作者加入后通过云数据库的watch操作实时监听文档变化db.collection(trips).where({ _id: this.tripId }).watch({ onChange: (snapshot) { this.tripData snapshot.docs[0]; // 刷新页面行程计划 }, onError: (err) { console.error(watch error, err); } });实测下来watch监听在小数据量文档上非常顺手几个好友同时编辑同一个计划基本能做到秒级同步。但要注意watch连接数是有限制的如果用户量大或者并发编辑频繁还是建议引入更严谨的消息推送机制。对于一个小范围使用的旅行小程序watch方案够用且开发成本极低。多人协同还涉及一个权限问题云数据库默认只允许创建者读写自己的记录协作者要访问行程文档必须用自定义安全规则或者在服务端通过云函数间接操作。这个约束很容易被忽略我一开始直接设成“所有用户可读”结果发现任意陌生人都能看到行程数据吓得马上改掉。建议你在小程序后台的安全规则里把读写权限精确控制到“创建者可写旅行团成员可读”这个粒度。4. 常见问题与排查技巧实录4.1 支付能力被限制和开发者权限异常开发过程中会遇到两个最让人心烦的拦截一个是支付能力被限制一个是用手机扫码预览时报“登录用户不是该小程序的开发者”。支付能力被限制这个问题我一开始以为是小程序代码的问题反复查了几天才发现原因五花八门。最常见的情况是企业主体没开通微信支付或者开通后没有在商户平台里绑定小程序AppID其次是小程序类目和支付场景不匹配比如你做的是旅游内容却想售卖实物商品在审核时容易被卡。如果搜索“小程序对应支付能力已被限制”你会发现还有一类是支付商户号存在风控或交易异常被限制这种需要登录微信支付商户平台查看“风险控制”的提示。我的处理路径是先在小程序后台的“支付”菜单里看开通状态确认是否显示“已开通”然后去商户平台确认AppID绑定关系最后检查代码里调用wx.requestPayment时传入的参数有没有拿到真实的预支付交易会话标识。这里有个调试技巧支付参数最好在云函数里统一生成不要在前端拼接既能避免参数泄露也方便排查是哪一段报错。另一个“不是该小程序开发者”的报错本质上是账号权限问题。你在开发者工具里用自己的微信号预览没问题但换一台手机用另一个微信扫码而那个微信没有被添加为小程序项目成员就会提示这个错误。解决办法是在小程序后台“成员管理”里添加体验成员或开发者注意区分“体验成员”和“开发者”前者只能体验不能看到代码后者才有完整的开发权限。我记得第一次Add错了角色导致对方在真机调试时一直看不到报错信息又折腾了一轮。4.2 抓包不是万能的调试要讲基本法搜索词里“小程序抓包”热度很高这里我必须多说一句抓包工具在开发调试中是合法的技术手段可以用来检查自己服务端的接口返回、排查请求参数是否正确。我平时排查接口问题时最常用的是微信开发者工具自带的Network面板它能直接看到每个请求的URL、请求头、响应体和请求耗时比任何第三方抓包工具都直观也更安全可靠。如果你非要抓真机的请求包现在的微信开发流程里其实不需要额外工具。微信开发者工具提供“真机调试2.0”手机和电脑连同一局域网真机上的网络请求会实时同步到工具里还能看到完整的console日志排查定位比抓包高效得多。我第一次用真机调试时发现手机预览和模拟器上看到的数据不一致正是靠真机调试的日志发现是后端某个字段在IOS端被缓存成了旧值。说白了抓包这个操作本身不复杂但使用场景和边界一定要分清楚。调试自己开发的小程序用官方工具就是最优解至于网上那些教人抓别人小程序的分析教程既涉及合规风险也没几个人需要真的用到。开发调试将就的是效率和可维护性能拿到的信息足够定位问题就够了。4.3 鸿蒙适配、图片处理和杂项问题速查我身边实际有用户用鸿蒙系统的手机打开小程序看旅行视频反馈播放异常这个我排查了一轮问题出在video组件的视频地址上。部分鸿蒙设备对视频编码格式的兼容性不如安卓的通用播放器尤其是H.265编码的视频很容易出现只有声音没有画面。解决办法有两个方向视频源转成H.264编码或者在video组件上强制设置custom-cachefalse避免一些机型的缓存策略导致播放失败。图片处理也是个高频需求。旅行小程序里用户上传的照片体积普遍很大直接存云存储不仅浪费空间上传体验也差。我的方案是在前端先用canvas把图片压缩到指定宽高再上传实测一张3MB的照片能压到200KB左右清晰度肉眼几乎看不出差别。AI生成压缩代码时容易漏掉一个关键点canvas绘制图片前要确保图片已经加载完成否则绘制出来是空白。另外还有一个很常见但不值得深入研究的问题把excel、图片等文件从云存储下载后在小程序本地打不开。这个多数是文件后缀或者编码不对记住云存储下载拿到的临时链接有效期默认是2小时超过时间需要重新获取。下载之后写到本地文件时我习惯用uni.saveFile它自动帮你在USER_DATA_PATH下建好文件名省去手动拼接路径的麻烦。最后分享一点个人体会VibeCoding这种方式我用下来最大的收获不是“以后不用写代码了”而是“我可以把更多精力放在想明白自己要什么上”。过去写代码经常写着写着就被中间层的细节带偏等回过神来已经忘了最初产品想解决什么问题。现在和AI协作我需要把需求、边界和验收标准讲清楚这个过程本身就在逼着我更深入地理解产品逻辑。这个旅行小程序后续我还想扩展两个能力一个是基于用户打卡记录自动生成旅行回忆视频另一个是根据同城旅友的兴趣标签做匹配推荐。如果你也准备用AI辅助开发自己的小程序我给的建议是不要一上来就追求“全对话式开发”先把小程序的骨架、数据流和关键页面结构搞清楚再让AI去填细节、生成组件、修bug这才是VibeCoding真正舒服的打开方式。