背景

本文将手把手完整演示纯 AI 驱动（Vibe Coding开发微信小程序的全流程，涵盖 AI 编码开发、本地调试、真机调试、小程序认证备案、代码发布、云服务器部署、HTTPS 代理穿透等完整链路。

本次实战项目为一款「加班取证统计小程序」，全程贯彻 Vibe Coding 理念：全程不手写一行业务代码，所有开发工作由 AI Agent 完成。本人仅承担产品经理 + 测试工程师角色，负责梳理需求、精准描述 Prompt、验收功能、定位问题、反馈报错日志，由 AI 完成编码、Bug 修复、项目搭建、文档生成等全部开发工作。

看完本文，零基础非技术人员（哪怕是餐厅老板、个体户、副业开发者）也能独立完成一套可上线、可商用的微信小程序。

一、整体任务与工作流程总览

本次小程序开发不再传统手写代码，而是以「AI 开发为核心、人工验收调试为辅」的全新模式，整体任务分工清晰、流程标准化。全流程工作内容汇总如下：

任务分类	核心工作内容
环境搭建	基于 CodeBuddy + 微信开发者工具搭建全套小程序开发环境
需求整理	基于 SMART 原则梳理精准需求，输出完整 Prompt，交付 AI 进行开发
开发调试	1. 依托 CodeBuddy Agent 模式，对话式迭代开发、自动修复 Bug；2. 配合微信开发者工具完成编译、真机调试，通过 Console、日志定位问题，所有报错交由 AI 闭环修复；3. 解决小程序强制 HTTPS 限制，配置内网穿透与 HTTPS 代理
小程序认证与备案	1. 认证、备案与开发同步进行，整体周期约 1 周； 2. 小程序名称认证：第三方审核，费用 30 元，周期 1 天左右； 3. 网信办备案：需身份证、居住证材料，微信审核后提交工信部备案，整体周期约 1 周
小程序发布	依次提交体验版测试、正式版代码审核，通过微信官方安全审核后即可上线发布（常规均可顺利通过）
后端部署	1. 本地调试：PC + Ngrok 实现内网穿透与 HTTPS 代理； 2. 线上部署：腾讯云轻量服务器（99 元/年），基于 Ubuntu 镜像搭建，操作简单，全程耗时约 1 小时

二、项目需求梳理 & AI 开发 Prompt

Vibe Coding 的核心关键是需求讲清楚、条件给完整。无需限定技术框架，只需明确功能清单、运行环境、版本限制，AI 即可自动完成全套开发。

本次「加班取证小程序」完整需求 Prompt 如下，可直接复用：

请开发一款加班取证小程序，需求描述如下：
*  功能列表
1. 用户上传加班证据如工作拍照证据，时间水印，以做保存后续仲裁取证。
2. 支持导出证据，以word文档形式。
3. 获取每个公司的加班数据
4. 隐私保护，决定是否公开证据，匿名发布。
5. 支持类似朋友圈的功能，可以查看其它用户开发的证据信息。
6. 统计功能:  
1）基于周，月，年，总计。
2）理论上的加班工资(工作日+节假日)
3）每天加班时长统计
- 注意
后端使用python实现，python版本3.9.9。

三、基于 CodeBuddy 的 Vibe Coding 全流程开发

3.1 前期准备

提前注册微信小程序账号，获取小程序 AppID，随后下载并安装 CodeBuddy 与 微信开发者工具，新建项目并配置对应 AppID 即可开始开发。

微信小程序后台注册地址：微信小程序

3.2 CodeBuddy 三种开发模式

当前 CodeBuddy 支持免费使用，内置三种开发模式，适配不同开发场景：

• Ask 模式：仅对话框输出答案，不修改任何项目文件，适合咨询问题、查询语法、梳理思路。

• Craft 模式（核心常用）：根据需求自动编写代码、创建文件、修改项目，完整落地功能，本次开发全程使用该模式（Agent 自动化开发）。

• Plan 模式：需求模糊时，与 AI 共同梳理方案、拆解功能、规划架构，适合项目前期立项。

通常使用craft形式开发，将完整需求 Prompt 输入后，CodeBuddy 会自动从零搭建项目、生成前后端代码、创建目录结构、输出使用文档，全程约 1 小时即可生成完整可运行的初版项目。

3.3 小程序技术栈与项目目录结构

微信小程序开发逻辑与传统前端开发高度相似，只需掌握前端基础三件套（HTML/JS/CSS）对应小程序语法，无需学习复杂原生组件。

本项目由 AI 自动生成完整前后端结构，技术栈：Python3.9.9 + Flask 后端、Vue3 + Vite 前端、SQLite 数据库，完整目录如下：

D:\work\2_项目\1_加班取证小程序\
├── frontend/           # Vue3 前端
│   ├── src/
│   │   ├── views/      # 9个页面组件
│   │   ├── components/  # 导航栏组件
│   │   ├── stores/     # 3个状态管理
│   │   ├── router/     # 路由配置
│   │   └── assets/     # 全局样式
│   └── package.json
├── server/             # Python 3.9.9 + Flask 后端
│   ├── routes/         # 5个API路由
│   ├── models/         # SQLite数据库
│   ├── app.py          # Flask应用入口
│   └── requirements.txt
├── SPEC.md            # 设计规范文档
└── README.md          # 项目说明

后端启动命令：

python app.py

3.4 问题迭代与 Bug 修复方案

Vibe Coding 开发模式下，人工只需承担测试角色，所有报错、兼容问题、编译问题全部交由 AI 修复。为提升修复效率，可遵循万能问题反馈模板，精准给到 AI 全部报错信息：

1. 明确场景：哪个页面、执行什么操作出现问题；

2. 附上截图：Web/小程序端报错界面截图；

3. 前端日志：F12 Console、Network 报错信息（微信开发者工具日志同理）；

4. 后端日志：服务端控制台报错、异常打印信息。

小技巧：微信小程序抓包调试不便，可先让 AI 生成 Web 调试版本，在浏览器中完成功能调试、抓包排错，功能稳定后再适配小程序端，大幅提升调试效率。同时可通过指令锁定目录，让 AI 精准修改小程序代码。

3.5 整体软件架构

全套架构由 AI 自动设计生成，整体包含：Admin 后台管理系统、Web 调试前端、Flask 业务后端，数据库采用 MySQL 存储业务数据，架构清晰、分层明确，满足个人项目上线使用需求。

四、小程序 HTTPS 报错解决方案 & Ngrok 内网穿透

4.1 小程序 HTTPS 强制限制问题

微信小程序出于安全限制，仅允许 HTTPS 协议请求，禁止直接调用 HTTP 接口。模拟器可临时关闭校验，但真机调试必须合规 HTTPS，否则会出现证书报错、接口请求失败：

VM75:363 error occurs:no such file or directory, access 'wxfile://usr/miniprogramLog/log2'
p @ VM75:363
(anonymous) @ VM75:363
(anonymous) @ node:fs:181
appservice.app.js:68 API 请求失败: /auth/login {errMsg: "request:fail -202:net::ERR_CERT_AUTHORITY_INVALID", errno: 600001}
fail @ appservice.app.js:68

4.2 临时调试方案：关闭域名校验

在微信开发者工具「设置 - 项目设置」中，勾选「不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书」，可临时解决模拟器调试问题，但该方式不支持真机调试。

4.3 终极方案：Ngrok 内网穿透 + HTTPS 代理

Ngrok 可将本地 HTTP 服务转为公网 HTTPS 服务，同时实现内网穿透与证书代理，完美适配小程序真机调试场景。

1）Ngrok 注册与配置

官网：ngrok: AI & API Gateway | Secure Tunnels & Traffic

详细教程参考：利用ngrok实现内网穿透（全网最详细教程） - 知乎

可直接使用 GitHub 账号登录，获取个人 Authtoken。

2）PC 客户端安装与启动

# 安装 
ngrokwinget install ngrok

# 配置个人密钥
ngrok authtoken $(yourkey)ngrok update

# 代理本地 3000 端口（根据自己后端端口修改）
ngrok http 3000

执行命令后会生成公网 HTTPS 链接，替换小程序内的本地 HTTP 接口地址，即可正常真机调试。

3）常见报错与解决方案

报错信息	问题原因	解决方式
ERR_NGROK_6024	免费版 Ngrok 带有浏览器确认中转页	请求头添加：ngrok-skip-browser-warning: 69420
小程序/Postman 拦截无法访问	非浏览器客户端无法手动跳过验证页	添加请求头 + 后台关闭 Browser Verification 校验
HTTPS 证书不授信	工具自签名证书不被系统信任	真机调试开启「不校验合法域名」

4）添加小程序合法域名

在微信公众平台「开发管理 - 开发设置 - 合法域名」中，将 Ngrok 生成的 HTTPS 域名添加至白名单，避免接口拦截。

注：Ngrok 仅适合本地调试，服务不稳定、域名会变动，正式上线必须使用云服务器部署。

https://mp.weixin.qq.com/

五、小程序认证与备案（上线必备）

小程序正式上线必须完成 名称认证 + 网信备案，建议与开发同步进行，整体周期约 1 周。

5.1 所需材料

需准备身份证、居住证（深圳地区可在「深圳公安」小程序办理，粤居码可查询电子版用于备案）。

5.2 认证流程

小程序名称认证费用 30 元，由腾讯委托第三方机构审核，审核周期 1 天左右，主要校验账号主体、小程序名称合规性。

5.3 备案流程

微信初审通过后，提交至工信部、网信办备案，需线上签署确认书，整体周期约 1 周，备案完成后小程序才可正式对外提供服务。

官方备案指南：微信开放文档

六、小程序版本上传、审核与发布

6.1 版本迭代流程

微信开发者工具操作：工具 → 上传代码，项目版本分为体验版、审核版、正式线上版。

1. 上传代码后生成体验版，配置首页路径（默认 page/index/index）；

2. 扫码体验，自测功能、兼容性、隐私权限；

3. 功能无误后提交官方审核；

4. 审核通过后发布为线上正式版本。

6.2 审核注意事项

• 完善小程序主营业务标签；

• 配置用户隐私授权说明，按需上传页面截图、演示视频；

• 支持加急审核，加急后约 2 小时可出结果。

七、腾讯云服务器后端正式部署

本地 Ngrok 调试环境受电脑休眠、断电、网络波动影响，无法长期稳定提供服务。正式环境推荐使用腾讯云轻量应用服务器，新用户低至 99 元/年，部署简单、稳定性强。

7.1 服务器选购

选购轻量应用服务器，配置选择 4核4G 3M 带宽，完全满足个人小程序、副业项目使用需求，系统镜像选择 Ubuntu 24。

腾讯云活动页：https://cloud.tencent.com/act/pro/featured-202604

快速创建教程：https://cloud.tencent.com/document/product/1207/44548

控制台地址：https://console.cloud.tencent.com/lighthouse/instance/detail

7.2 服务器环境部署

通过 OrcaTerm 免密登录云端服务器，操作方式与本地虚拟机完全一致，直接拖拽上传后端项目代码即可。

环境配置（以下是我的项目配置，非必须）

1）Python 虚拟环境配置

python3 -m pip install virtualenv --break-system-packages

# 3. 使用 virtualenv 创建虚拟环境（功能与 python3 -m venv 完全相同）
python3 -m virtualenv venv

# 4. 激活虚拟环境
source venv/bin/activate

# 5. 现在可以安全地使用 pip 安装项目依赖了
pip install -r requirements.txt

2）Node 环境安装（前端编译依赖）

# 1. 确保snap已安装
sudo apt install snapd -y

# 2. 安装Node.js
sudo snap install node --classic --channel=18

# 3. 验证安装
node --version
npm --version

7.3 后端后台常驻运行

直接终端运行程序会随断开ssh连接而终止，使用 nohup 实现后台常驻：

nohup python app.py

7.4 防火墙端口开放

Admin 后台默认占用 5174 端口，需在腾讯云控制台防火墙规则中放行该 TCP 端口，否则公网 IP 无法访问后台服务，可直接使用腾讯云 AI 助手一键配置放行。

7.5 线上 HTTPS 方案

付费专属 HTTPS 证书每年约 66 元，个人测试阶段可继续使用 Ngrok 做临时 HTTPS 代理，稳定上线后可配置正式域名证书。

总结

本文完整复盘了 零代码 Vibe Coding 开发微信小程序 的全流程：从需求梳理、AI 自动编码、调试排错、HTTPS 代理穿透、小程序认证备案、版本审核发布，到云服务器线上部署，实现了真正意义上「不懂代码也能做开发」。

当下开发模式已经迭代升级，普通人无需深耕编码技术，只需掌握需求梳理、AI 协作、项目验收、线上部署能力，即可独立落地完整可上线的软件项目，非常适合副业开发者、个体从业者、零基础新手入门学习。