VibeCoding微信小程序实战
Posted On 2026年9月27日
输入想法提示词和设计框架，让workBuddy为我们生成设计图稿
设计是为了保证开发的时候有个依据而不是天马行空地去实现。当然如果我们没有任何思路和想法，没有特别具体的设计要求，完全可以跳过该步骤。
整理我的需求如下，非常简单。只做功能要求，因为我不是美术专业出身，针对于 样式、配色、交互 全交给 workBuddy自己根据需求去帮我自由实现。
|
|
|
|
|
周一至周日，周六日可显隐，隐藏忽略周末；上午默认 2 节课、下午默认 4 节课、晚上默认隐藏（展开 2 节），各时段可增加课时；底部放学时间可手动填写，默认空白
|
|
|
首页入口跳转导入页；省 / 市 / 区县三级选择、小学名称、年级、班级；GPS 自动定位地区，支持模糊搜索；查到已有课表直接导入返回首页
|
|
|
点击保存上传服务端；存储：年份、省、市、区县、学校、年级、班级；供给其他用户搜索导入
|
|
|
分享给微信 / 支付宝好友；打开分享链接：本地无课表自动保存；本地有课表弹窗确认是否覆盖
|
|
|
|
使用小程序的开发者账号appid和secret 告诉code Buddy，输入我的提示词让他开始工作。 先说下整体思路，因为我要实现 课程表云端数据同步，所以需要同时又后端代码。 因我已有一台服务器是lamp架构的，再加上php用来开发和验证非常简单，所以就使用前端 + 后端（php+mysql)的架构。
file:///Users/summer/WorkBuddy/小程序-课程表/output/小学课程表小程序-UIUX设计.html
这是我让别人已经设计好了这个 微信、支付宝小程序的 ui/ux，整体色调和ux交互我已确认无太大问题。
有一个就是 一键导入的时候，输入条件后，要提示是否有已存在的 记录，无则提示然后返回到 首页即可。
然后根据设计就开始开发吧。 因为这个还涉及到 后端的简单的功能，所以前端和后端同步开发。
前端和后端的目录请分开。
便于后端部署的时候只看下后端的代码。 后端的代码可以用php+mysql，因为我已经有一台服务了。lamp的后台。
如果之后我需要迁移到 java，我再重写。 好，开始工作吧。
微信和支付宝小程序的在平台上的创建和部署 ，等完成代码开发完成后 再告诉我创建、调试 和部署。
我再进行最终部署和线上验证。
需要说明的是， CodeBuddy可以实现运维的工作，只需要我把服务器的地址和ssh登录方式（我已经提前配置好了 登录秘钥可以实现无密码登录）和部署后端的位置。 CodeBuddy全程可以实现开发完毕并部署后端服务。注意：每次部署的时候请一定要 review 部署代码，防止其他事故。
开发完毕后，我们就需要自己集成测试一下前后端的功能。
1.首先我们需要下载wechat deveoper tools (也就是微信开发者工具），这是我们做测试必须得工具之一。
2.打开微信小程序工程，登录工具然后点击一个 圆圈的刷新按钮，在开发者中举中使用模拟器进行集成测试
3.或者使用真机进行测试，点击 “眼睛”图标进行预览
此时会将程序上传到 开发版本可用于临时的开发验证。只需要用手机扫描二维码，手机即可打开。
4.经过几轮测试和bug定位并修复，终于可以达到了上线的要求。
bug定位有时候交给codebuddy 也不是很快就能解决的，可以使用别的ai tools 或者加上自己的分析。 这个也是最考验工程能力的时刻，往往初期我们给的AI工具的自由度太大时，反而工程架构设计的非常不易于理解，再加上几次功能的叠加修改，一些语义很容易分歧。 这个也是我在bug修复和定位过程中遇到的最难的问题。
所以我们设计一个应用时，不仅仅是设计UI，UX，而是产品设计。对其术语，对其场景，对其模式。任何产品的文字定义上觉不能有二义，这样AI工具才能更好的理解，即使他理解错误经过我们人的review和指点也能很快的解决问题。
1.第一次代码review审核是相对比较慢的， 此时我们应该注意我们是否使用了用户隐私数据等，这个是要严格控制如果使用了也要进行申报说明。 还有就是互联网UGC内容的审查义务。
2.还有就是第一次 管局ICP备案，每一个小程序都需要备案，这个管局是国家工信部相关部门审核，也是需要耐心等待
上传到开发版本后，可以先自己进行上线前的最后一轮测试和验证。点击体验版，假如体验者的人员使用二维码扫描后可以打开进行验证和测试。
验证测试通过之后，点击提交审核。这次是正式上线前的审核，审核速度相对就快很多。 每一次发布新版本均需要审核。
此篇文章已被阅读4 次
