如何用AI编程上线一款微信小程序：手把手教你Vibecoding

我用 AI 编程开发上线了一款微信小程序。

先看作品，直接扫码就可以体验。

 

下面的卡片，就是由小程序生成的一张记录了海拔高度、地址、心情、照片的旅行卡片。

 

这个小程序，是我在去云南高黎贡山旅行的过程中用腾讯老同事舜子的团队开发的 “Finch+Codex”开发完成。

普通人用 AI 编程开发微信小程序，可以用的工具很多，例如：

国内工具：Workbuddy，Codebuddy，Trae，秒哒等。

国外工具：Codex，Claude code, Cursor。

下面就用“海拔打开一起玩”作为案例，讲清楚普通人如何用AI 编程（Vibe Coding）完成一款可发布微信小程序的全过程，所有代码都是 AI 完成，自己没有写一行代码。

很多人以为，做小程序需要先学会 JavaScript、后端、数据库、服务器和产品设计。

现在，流程大致如此，但已经被 AI 大幅降低了门槛，不用写一行代码就可以上线微信小程序。

你不需要变成专业工程师，但你需要学会一件更重要的事：像产品经理一样提出问题，像测试人员一样发现问题，像负责人一样做取舍。

一、做好产品设计

用AI开发小程序，这个过程最难的不是 AI 写代码，是想清楚自己要做什么。

《海拔打卡一起玩》的提示词，最初只有一句话：

我想做个微信小程序，用户打开小程序，可以看到自己当前的真实海拔；拍一张照片、生成一张可以记录当前海拔高度的打卡卡片。先和我讨论一个产品文档，你可以向我提问，明确我的意图后，生成一份产品文档。

如果你用Workbuddy，就把这句话粘贴到对话框，如下图。

 

在左下角，指定要给AI工作的本地电脑文件夹，后面可以存放你的代码，也是用微信开发者工具导入项目的文件夹。

可以用右下角的“提示词增强”优化提示词，让模型更加可以理解你的意图。

下面是增强后的提示词：

我要为一款微信小程序撰写产品文档，核心功能是：用户打开小程序后查看自己当前的真实海拔，并可拍照生成一张记录当前海拔高度的打卡卡片。

请先以产品经理身份向我提问，每次提出 3–5 个问题、分批进行，重点澄清以下方面：

1. 目标用户与典型使用场景（登山、徒步、旅行打卡还是日常记录）；
2. 海拔数据的获取途径与精度预期（设备定位、气压传感器、第三方高程服务），以及室内或信号弱时的兜底方案；
3. 打卡卡片的视觉风格、尺寸比例与必须展示的信息字段（海拔值、地点、时间、照片、天气等），是否支持模板切换；
4. 照片与打卡记录的存储方式、保留时长与隐私策略；
5. 是否需要历史记录、足迹地图、排行榜、分享到微信好友或朋友圈等社交与留存功能；
6. 用户体系、内容审核合规要求，以及后续的商业化设想。

在我逐条回答、你确认意图无歧义后，再输出一份结构化的产品文档，包含：产品定位与目标、核心用户故事、功能清单及 MVP 优先级、主要页面与关键交互流程、核心数据字段与外部接口依赖、技术可行性与风险（尤其关注海拔精度与微信平台能力限制）、上线验收标准。文档需条理清晰、结论明确，可直接用于开发排期，避免空泛表述。

给Workbuddy发送这个提示词，就可以得到下面的问题，按照问题逐个回答，就可以在AI的帮助下写出你的产品文档。

 

和AI进行这样来回的讨论对话，逐步完成一份产品策划文档。

后面，就是把生成的产品策划文档给到AI，询问AI，你需要提前准备什么。

这段提示词非常重要，关乎你的小程序可否发布到腾讯微信官方平台。

重要提示词：

我们已完成一份微信小程序的产品策划文档，现在准备进入开发阶段，并最终提交审核、发布到微信官方平台。请你作为项目负责人，帮我梳理一份「开工前准备清单」，明确我需要提前准备并提供哪些开发条件与信息，你才能顺利接手开发。

AI会告诉你需要做很多的提前准备，尤其是进行小程序账号的开通，这个步骤，我花了快两天的时间，因为中间有很多需要审核的等待时间。

概括来说，有下面六个前置工作需要完成，中间可能有一些你不太懂的细节，没关系，逐个问AI，都会得到答案，尤其是有一些反馈信息不太懂，就截图给AI进行提问，这个过程，是会踩一些坑的。

 

实际上，我开始做这个小程序的时候，没有完全做好准备，一边做一边摸，下面的过程，有些是我后面总结的方法，可以帮助大家少一些踩坑，譬如，上面的六个阻塞卡点，我并没有从一开始就知道，现在用Workbuddy总结出来，方便大家做一些提前准备。

你可以把这六个卡点截图给AI，让AI详细给你讲解。

按照做产品的套路，发布一个最小可使用的产品，非常重要，产品经理的行话，就是一个MVP产品，譬如，先实现最简单的可以定位打开，显示当前海拔高度，连照片都不用，就是做一个当前为止的海拔高度测量工具。

这个步骤，我以前用Claude code做过一个海拔测量表，也算是为这个“海拔打卡一起玩”做的一次MVP产品。

 

跑通了第一个测量海拔高度的MVP小程序，后面，再逐步开发真实定位、地址解析、地图高程兜底、景点选择、勋章墙、云端打卡记录、分享海报和 API 缓存。

所谓Vibe Coding，并不等于“对 AI 说一句话，它就自动做出 App”。

更准确地说，它是一种新型协作方式：你用自然语言描述目标、规则和问题，AI 帮你完成代码、排查报错、优化结构；而你负责判断需求是否合理、效果是否符合预期，以及最终是否可以上线。

在这个过程中，普通人最重要的工作不是背代码，而是做好这四件事：

1. 把想法讲具体：不要只说“做个打卡小程序”，要说清页面、数据、交互和边界。
2. 不断真机测试：模拟器能跑，不等于真实手机能用。
3. 准确反馈问题：告诉 AI“哪里不对、想要什么、不能影响什么”。 
4. 控制范围：第一版先让核心体验成立，不要一开始就做成一个大而全的社区。

AI 擅长的是执行和推演；你擅长的是判断“这是不是用户真正想要的”。

为什么我选择做“海拔打卡一起玩”？

“显示海拔”本身是一个工具功能，用户用完就走，留存并不强。

但如果把海拔和地点、照片、心情、勋章、朋友分享结合起来，它就会变成一种表达：

• 我今天到了哪里？
• 我站在多高的地方？
• 这是我的人生新高度吗？
• 我想把这一次旅行分享给谁？

所以，这款产品不是一个纯“海拔查询器”，而是一个轻量的户外打卡工具。

它的核心价值可以概括为：

用真实海拔，记录一次到达；用分享卡片，把一次到达变成可传播的故事。

第一版功能怎么定？

我给自己定的 MVP（最小可行产品）非常克制：

• 获取用户真实经纬度
• 显示当前海拔和地址
• 支持上传照片与选择心情
• 保存打卡记录
• 生成分享卡片和保存海报
• 有基础的用户昵称、勋章墙和云端数据

同时明确不做：

• 复杂轨迹记录
• 天气系统
• 公开社交广场
• 户外社区

这一步很重要。

AI 最怕模糊且无限膨胀的需求。你把第一版边界画得越清晰，AI 产出的代码越稳定，你的测试成本也越低。

二、AI编程开发小程序

下面说一下微信的小程序的开发和发布过程。

1. 微信小程序账号和 AppID

前往微信公众平台，注册小程序账号，创建小程序后会得到一个 AppID。

https://mp.weixin.qq.com/cgi-bin/wx

 

AppID 可以理解为小程序的“身份证”。本地开发、云开发、真机预览和最后发布，都会围绕它进行。

网址：www.lovart.ai

 

 

 

下图是我使用的AI编程工具Finch+Codex。

 

真正高效的 AI 编程，不是复制一段代码到聊天框，而是让 AI 在项目目录里持续协作，能够读写项目文件、运行命令、分析报错的 AI 编程工具。

• 阅读现有文件
• 修改页面
• 新建云函数
• 检查语法
• 分析日志
• 优化包体积

 

/Users/jun15prolan/Documents/altitude-miniapp-codex  在这个文件夹有“海拔打卡一起玩”微信小程序的产品设计图、海拔打卡一起玩MVP+迭代策划文档2.0 版本.pdf，根据上面的产品规划：

1. 工程初始化 + 设计系统

2. 海拔首页 + 勋章匹配

3. 打卡创建，不含照片

4. 拍照 / 备注

5. 分享卡片

6. 勋章墙增强

7. 我的页

8. 动效与打磨

启动“海拔打卡一起玩”的微信小程序开发。AppID(小程序ID): wx63e07xxxxxxxb4fd8

4. 地图服务

如果你的小程序需要真实地址、附近地点或地图高程，需要接入地图服务。

本项目使用腾讯位置服务，官网链接是：

https://lbs.qq.com

主要能力包括：

• 逆地理编码：经纬度换成地址
• 地点搜索：查附近景点、餐厅、酒店

注意：地图 Key 不要随意暴露，更不要把 AppSecret、支付密钥、数据库密码发到公开渠道。生产环境应限制 Key 的来源和权限。

5. 微信云开发环境

云开发可以让你不用自己买服务器，就拥有：

• 云数据库
• 云存储
• 云函数

对普通人来说，这是一条非常适合的路径：前端页面放在小程序里，数据逻辑和第三方 API 请求放进云函数。

三、小程序调试

小程序的调试，实用官方微信开发者工具

这是微信官方提供的开发和调试工具。

下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

你可以用它：

• 导入项目
• 预览页面
• 真机调试
• 管理云开发
• 部署云函数
• 上传体验版
• 提交审核与发布
  这个微信开发者工具安装后，就是下面这个图标。
   

 

 

创建后，进入调试页面，我用箭头表示的按钮是【云开发】，这个按钮，我以前找了很久，才知道从这个入口进入云开发，

 

进入云开发后台，这里的操作对新手有一点门槛，最简单的办法是找个人问问，如果没有人可以问，就截图问AI。

 

代码编译、预览、真机调试、上传，是我使用最多的功能。

 

四、小程序发布上线

小程序能在本地运行，不等于可以直接上线。

1. 上线前准备

你需要准备：

• 小程序名称、图标、简介
• 合适的服务类目
• 隐私保护指引
• 定位权限用途说明
• 相册权限用途说明
• 审核可用的完整功能路径

如果用户的定位和照片会被使用，一定要写清楚用途，例如：

                             定位权限：用于获取当前位置、地址与海拔打卡信息。      相册权限：用于用户自主上传打卡照片和保存分享海报。      

2. 真机测试清单

至少要在 iPhone 和 Android 上测试：

• 首次定位授权
• 拒绝定位后的提示
• 地址是否正确
• 海拔是否合理
• Android 返回 altitude = 0 时的表现
• POI 是否正常加载
• 上传照片是否成功
• 保存海报是否成功
• 分享卡片是否正常
• 云函数是否部署到正确环境
• 弱网或无网时是否有明确提示

3. 微信发布流程

通常是：

                                                     上传代码      → 生成体验版      → 邀请测试人员      → 提交审核      → 审核通过      → 发布      

4. 审核常见问题

• 隐私指引没有说明定位、相册用途
• 页面存在打不开的入口
• 功能与填写的服务类目不一致
• 审核人员无法走通主要路径
• 页面仍有“测试中”“Demo”“未完成”等内容
• 小程序功能描述与实际不符

上线前，把自己当成第一次使用产品的审核人员，从首页完整走一遍。

代码上传后，在小程序的后台 ，会生成一个开发版本

 

【开发版本】提交审核，通过后，会成为【审核版本】，提交【审核版本】，通过后，会发布出来，就是【线上版本】，就可以在线访问了。

 

再分享一张我的打卡卡片，欢迎扫码体验：