个人知识库

2026-09-08-vibecoding-wechat-miniprogram

13分钟阅读

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

本文以《海拔打卡一起玩》为例，完整演示了普通人如何靠 Vibe Coding 完成可发布的微信小程序——从产品设计、AI 编程开发、真机调试到上线审核全流程。

基本信息

核心观点

  1. Vibe Coding 的本质是”人机协作新范式”，不是”一句话生成 App”：核心是人用自然语言描述目标、规则和问题，AI 负责代码实现、排查报错、优化结构；人负责判断需求合理性、效果符合预期、最终上线决策。普通人最重要的工作是：把想法讲具体、不断真机测试、准确反馈问题、控制范围。

  2. 产品设计是小程序开发最难、最关键的一步：作者用 Workbuddy 通过两轮提示词完成产品文档——第一轮让 AI 以产品经理身份分批提问澄清意图（目标用户、海拔数据获取、卡片视觉、存储隐私、社交留存、合规商业化），第二轮让 AI 梳理”开工前准备清单”，覆盖小程序账号开通、设计稿、地图服务 Key、云开发环境等六大前置卡点。

  3. MVP 策略是控制 AI 编程范围的关键：第一版只做核心体验——获取经纬度、显示海拔地址、上传照片选心情、保存记录、生成分享卡片、基础昵称勋章墙云端数据；明确不做复杂轨迹、天气系统、公开社交广场、户外社区。边界越清晰，AI 产出越稳定，测试成本越低。

  4. AI 编程工具选型与协作模式：国内工具（Workbuddy、Codebuddy、Trae、秒哒）和国外工具均可，关键是选支持”在项目目录持续协作、读写文件、运行命令、分析报错”的工具。作者用 Finch+Codex，按 8 个阶段提示词推进：工程初始化+设计系统、海拔首页+勋章匹配、打卡创建、拍照备注、分享卡片、勋章墙增强、我的页、动效打磨。

  5. 微信小程序上线的完整合规路径：需准备名称图标简介、服务类目、隐私指引（定位/相册用途说明）、权限用途说明、审核可用完整路径；真机测试清单覆盖 iPhone/Android 首次授权、拒绝定位提示、地址海拔正确性、Android altitude=0 兜底、POI 加载、照片上传、海报保存、分享卡片、云函数部署、弱网提示；审核常见坑：隐私指引缺失、页面打不开、功能类目不符、审核人员走不通主路径、残留测试内容、功能描述不符。

实操内容保留

必填节。素材中的代码块、Prompt 模板、配置参数、分步教程等用户可直接复用的内容，必须原样保留在此节。

Prompt 模板

产品文档生成提示词（第一轮）

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

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

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

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

文档需条理清晰、结论明确，可直接用于开发排期，避免空泛表述。

开工前准备清单提示词（第二轮）

我们已完成一份微信小程序的产品策划文档，现在准备进入开发阶段，并最终提交审核、发布到微信官方平台。

请你作为项目负责人，帮我梳理一份「开工前准备清单」，明确我需要提前准备并提供哪些开发条件与信息，你才能顺利接手开发。

AI 编程启动提示词

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

1. 工程初始化 + 设计系统
2. 海拔首页 + 勋章匹配
3. 打卡创建，不含照片
4. 拍照 / 备注
5. 分享卡片
6. 勋章墙增强
7. 我的页
8. 动效与打磨

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

操作步骤

  1. 产品设计阶段：

    • 用 Workbuddy 发送第一轮提示词，让 AI 以产品经理身份分批提问
    • 逐条回答 AI 问题，确认意图无歧义
    • AI 生成结构化产品文档
    • 发送第二轮提示词，获取”开工前准备清单”
    • 完成六大前置工作：小程序账号开通、设计稿生成、地图服务 Key 申请、云开发环境创建、AppID 配置、隐私指引编写

  2. 设计稿生成：

    • 用 Lovart.ai (GPT Image 2) 生成多版本设计稿，选定最终版本

  3. AI 编程开发阶段：

    • 在本地建立工作文件夹
    • 将产品文档、设计稿、准备清单喂给 AI 编程工具
    • 按 8 个阶段提示词逐步推进开发
    • 使用微信开发者工具导入项目、预览、真机调试、云函数部署

  4. 地图服务接入：

    • 申请腾讯位置服务 Key (https://lbs.qq.com)
    • 接入逆地理编码（经纬度转地址）、地点搜索（附近景点/餐厅/酒店）
    • 限制 Key 来源和权限，不暴露 AppSecret/支付密钥/数据库密码

  5. 云开发环境配置：

    • 开通微信云开发：云数据库、云存储、云函数
    • 前端页面放小程序，数据逻辑和第三方 API 请求放云函数

  6. 真机调试与测试：

    • 用微信开发者工具导入项目、预览、真机调试
    • 执行 11 项真机测试清单（iPhone/Android 双端）

  7. 上线发布流程：

    • 准备上线材料：名称图标简介、服务类目、隐私指引、权限说明、审核路径
    • 上传代码 → 生成体验版 → 邀请测试 → 提交审核 → 审核通过 → 发布
    • 审核版本通过后成为线上版本

代码/配置

（本文以自然语言描述开发流程为主，无具体代码块配置）

关键概念

  • Vibe Coding — 核心方法论，人机协作新范式
  • 微信小程序 — 目标发布平台
  • MVP（最小可行产品） — 产品策略核心
  • Workbuddy — 国产 AI 编程工具（产品设计阶段）
  • Finch+Codex — AI 编程工具（编码实现阶段）
  • Lovart.ai — AI 设计工具（设计稿生成）
  • 腾讯位置服务 — 地图/逆地理编码/POI 搜索服务
  • 微信云开发 — 云数据库/云存储/云函数后端方案
  • 海拔打卡一起玩 — 本文案例小程序名称

与其他素材的关联

  • 与 AI 编程工具选型类素材的关系：本文给出了国内外主流工具的具体对比和选型建议，补充了工具在实战中的协作模式差异
  • 与 产品经理/提示词工程 类素材的关系：展示了”像 PM 一样提问”的具体提示词模板，是提示词工程在产品设计落地的实战样本
  • 与 微信小程序开发 类素材的关系：提供了从 0 到上线的完整合规路径和真机测试清单，填补了技术实现到合规发布的空白

原文精彩摘录

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

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

“显示海拔”本身是一个工具功能，用户用完就走，留存并不强。但如果把海拔和地点、照片、心情、勋章、朋友分享结合起来，它就会变成一种表达：我今天到了哪里？我站在多高的地方？这是我的人生新高度吗？我想把这一次旅行分享给谁？

相关页面

关系图谱

快速导航

反向链接