从零构建微信小程序 —「心羽日记」完整开发指南
适用读者：有编程意识但从未开发过微信小程序的小白。
最终成果：一款可在微信中搜索、分享并使用的小程序。
开发方式：AI 辅助开发（Vibecoding），以自然语言驱动代码生成。
目录
- 产品定义：我们要做什么
- 环境准备：从零搭建开发工具链
- 开发打磨：架构设计与调试打磨
-
发布准备：资料准备与审核发布
-
总结与复盘
过去，开发一个小程序需要学习编程语言、框架、API 文档，周期长、门槛高。今天，AI 改变了这一切。你只需要把需求说清楚，AI 帮你写代码；你只需要描述问题，AI 帮你调试。核心能力只有一个：把需求想清楚、说清楚。这篇指南覆盖从想法到上线的完整链路，包含大量踩坑点和实操细节。
1. 产品定义：我们要做什么
微信小程序是"运行在微信里的应用"：无需下载安装：用户通过搜索、扫码、分享即可使用即用即走：解决"一件小事"场景入口统一：所有小程序都在微信里打开
在构建打磨自己的小程序前，我们需要明确自己想做的产品是什么样的，适用于哪些用户，在心里有一个大概的思路与框架，以便我们更好地制定需求和发布指令。
1.1 产品愿景
「心羽日记 (Soul Journal)」是一款致力于提供极致宁静、隐私安全的个人情感记录工具。它让用户在繁忙的生活中拥有一片属于自己的隐秘角落。
与市面上依赖云端同步的日记产品不同，心羽日记的核心竞争力是三个"极致" ：
| 极致维度 | 具体表现 |
|---|---|
| 极致隐私 | 100% 纯本地存储，零网络请求，数据确权回归个人 |
| 极致流畅 | SPA 单页架构 + 冷热分离存储引擎，Tab 切换 0ms 延迟 |
| 极致情感 | 心情追踪、信纸系统、"放飞"仪式，建立人与文字的温暖连接 |
1.2 目标用户画像
- 隐私敏感型用户不信任云端存储，希望日记内容绝对私密。
- 极简主义者讨厌繁琐功能及网络社交干扰，只想安静地写字。
- 情感记录爱好者喜欢通过视觉（信纸、颜色）与图文表达当日心境。
采用本地存储，不依赖云端是为了保护用户隐私，简化了开发流程，最主要的是方便过审上架以及不用进行服务器的购买与维护。若你想构建一款完整的前后端分离的小程序，可以选择三种路线进行：
路线 1：云开发（默认推荐） - 适合新手第一次做带后端的小程序；工具类、内容类、社区类、表单类、轻电商类产品；想快速做 MVP、验证需求、快速上线。
路线 2：云托管 / HTTP 服务 - 适合中等复杂度项目，你已经有现成的 Node.js / NestJS / Express / Python / Go 服务。
路线 3：完全自建后端 - 适合有成熟后端团队，需要更强的私有化、专有网络、合规隔离。
这三种路线均可借助 AI 进行开发，不过复杂程度不同，你可以根据自己的情况选择。对于新手来说，我最推荐路线 1，也就是云开发。它简单易用，而且功能强大，完全可以满足大部分的需求。
1.3 功能清单
在开始写代码之前，我们先把整个产品的功能边界梳理清楚。这份清单既是给 AI 的"总指令蓝图"，也是后续验收的检查表。
核心日记功能
- [创作] 沉浸式编辑超长文本输入、字体大小与颜色自定义、5 级心情选择、本地图片插入与压缩。
- [信纸系统] 内置 5 套精美背景 + 支持用户上传自定义信纸。
- [浏览] 时间线首页按日期倒序排列，展示摘要预览。
- [回顾] 月历视图标记有日记的日期，支持快速定位。
- [管理] 柔性删除左滑物理删除（通用组件）+ 长按"放飞"（逻辑删除，保留记录痕迹）。
智能统计与资产
- 心情趋势图贝塞尔曲线面积图，展示最近 7 天心情波动。
- 连续打卡统计实时计算连续记录天数及周环比增长率。
- 工业级词频分析N-Gram + 标点截断 + 子词抑制 + 停用词过滤。
- 离线导出按日期筛选导出为 Word (HTML格式) 离线文档。
个性化与分享
- 5 套主题色治愈粉、薰衣草、薄荷绿、活力橙、天空蓝，一键全局换肤。
- 暗色模式深度适配微信原生暗色系统。
- 社交分享支持转发好友与分享朋友圈（固定首页路径，保护隐私）。
1.4 设计风格定义
在动手开发之前，有一个关键问题需要先确定：这个小程序看起来应该是什么感觉？
心羽日记的设计不追求「炫酷」，而是追求**「纸质温存感」**：
- 视觉语言低饱和度色彩、毛玻璃效果、大圆角。
- 亮色模式温暖、明亮、如清晨阳光透过窗帘。
- 暗色模式深邃、静谧、保护夜间阅读体验。
- 交互回馈TabBar 的果冻水珠弹跳、页面渐入动画、信纸纹理蒙版。
给 AI 的关键提示：在后续的每一轮 Vibecoding 对话中，你都可以把上面这段设计风格描述作为"上下文"传给 AI，确保生成的代码在视觉上保持一致。也可以直接加入在项目的rules里，让ai自动读取规则约束。
以上内容均为展示整个小程序编码前的整个准备阶段，你也可以直接使用ai或者相关工具进行前期的ui设计和需求调研，确定自己整个过程想要的功能与风格。
确定好需求与风格之后，接下来应该是 AI 产品经理来输出专业需求文档（PRD 文档）。
根据上述微信小程序需求分析，按照最小MVP的版本，写一份专业的产品需求（PRD）文档，并输出到PRD.md中。
简单等待一分钟，一份专业的prd文档就输出完成了，之后对照自己的功能清单确定文档内容,如果有和自己想要的不一致的，一定要提前修改好，否则后期进行调整会比较麻烦。
在进行进一步开发之前，先做好相关工具的安装与配置。
2. 环境准备：从零搭建开发工具链
2.1 你需要的工具
整个开发过程中，我们会用到三个核心工具，它们各自负责不同的环节（本文采用Antigravity+微信开发者工具）：
| 工具 | 职责 | 获取方式 |
|---|---|---|
| AI 编码助手 | 用自然语言和 AI 对话，让它帮你写代码、改代码、解释代码 | 推荐使用 Trae (trae.cn)、Cursor、codex、Claude code 或 Antigravity 等 AI IDE |
| 微信开发者工具 | 预览、调试和上传小程序 | 官方下载页 |
| HBuilderX（可选） | 若使用 uni-app 框架，可快速生成项目骨架 | DCloud 官网 |
本教程的技术选型：心羽日记采用微信原生开发（非 uni-app），直接使用 WXML + WXSS + JS 编写。这意味着你可以跳过 HBuilderX，直接在 AI IDE 中创建项目，然后用微信开发者工具预览。
2.2 注册微信公众平台账号
- 打开浏览器访问 mp.weixin.qq.com，用微信扫码登录。
- 选择「小程序」类型，按提示完成注册（填写邮箱、手机号、主体类型）。
- 注册完成后，进入后台 →「开发管理」→「开发设置」，记录你的 AppID。
重要：AppID 是你的小程序在微信里的唯一身份证。后续配置项目时需要用到。
2.3 安装微信开发者工具
1. 从官网下载对应操作系统的稳定版。 地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. 双击安装包，保持默认选项一路安装。 首次启动时用手机微信扫码登录。
2.4 创建原生小程序项目骨架
由于心羽日记使用微信原生开发，我们直接在微信开发者工具中创建项目：
- 打开微信开发者工具，选择「小程序」→「新建」。
- 填写项目名称（如 miniprogram）、选择项目目录、填入你的 AppID。
- 后端服务选择「不使用云服务」，模板选择JS。（如果你的小程序有后端服务，此处可以选择微信云开发，后续vibe的时候告诉ai或者接入云开发文档就行）
- 点击确定，工具会自动生成一个包含 app.js、app.json、app.wxss 和一个示例页面的基础骨架。
创建完成后，你会在模拟器中看到一个"Hello World"级别的页面——这就是我们的地基。接下来，用 AI IDE 打开这个项目文件夹，开始真正的 Vibecoding。
3. 架构设计与调试打磨
在让 AI 开始写代码之前，我们需要先确定整个应用的技术骨架。这一步非常关键：如果一开始就让 AI 随意发挥，后面的代码会非常难以维护。
请依据prd. md 来进行微信小程序的整体架构设计，注意希望整体前端直接使用 WXML + WXSS + JS 编写，无后端。 整体满足微信小程序的开发规范。请帮我输出架构设计文档到 ARCHITECTURE. md
之后检查输出的ARCHITECTURE. md，确认是否有遗漏或者有不合理的地方，进行修改调整。
下面是这个示例小程序的架构
3.1 整体架构
心羽日记采用以下分层架构：
关键设计决策
| 决策 | 方案 | 为什么这么做 |
|---|---|---|
| SPA 单页架构 | 三大主页降维为 Component，统一由 pages/index 管控 | 消除原生 TabBar 切换时的冷启动闪屏 |
| 冷热数据分离 | 索引表 200 字摘要 + 独立 Key 存完整长文 | 突破微信单 Key 1MB 存储限制 |
| CSS 变量驱动主题 | 全局 CSS Variables + JS style 内联覆盖 | 支持 5 套主题色 + 暗色模式秒切 |
| WXS 前端派生 | 日期/信纸/心情映射在模板层直接计算 | 减少 40%+ setData 跨线程通信 |
3.2 开发调试
在让 AI 写代码之前，先把结构规划好。你可以把以下prompt作为"总指令"的传给 AI：
请帮我根据架构设计文档@ARCHITECTURE. md、需求文档@PRD.md进行代码的开发，严格按照架构设计文档来开发。
AI会搭好完整的项目框架，完整的项目框架搭建完成后，来到微信开发者工具进行功能效果确认以及验证
- 在微信开发者工具中登录自己的微信，点击预览—>自动预览—>编译并预览。
- 打开微信进行功能效果验证。
- 同时检查控制台是否有报错或警告。（如果编译不通过或者报错可以直接截图、复制报错粘贴给AI进行解决修复，然后再次进行测试）
同时可以将微信开发者工具的本地设置参照如图进行设置
一般来说小程序发布的体积不能超过2M，如果你的小程序体积过大，可以采用分包的形式进行，你直接告诉AI就行，它会指引你如何分包。同时可以将过大的静态资源通过CDN的形式进行托管到各家云上的对象存储服务器上。
接下来就是反复的自然语言描述 → AI 解决修复 → 微信开发者工具中预览测试 → 继续对话调整，经过不断地打磨和迭代，最终就可以得到一个可用于发布的完整功能的小程序了。
注意：
1、UI不符合预期的地方尽量使用截图粘贴给AI进行修改。
2、一次性大的修改调整尽量告诉AI不要直接实施，而是先列出方案，审核通过后再让AI进行执行。
3、利用git做好每一次修改后的版本管理，AI直接回滚可能造成丢失。
4、如果存在某个缺陷AI反复修改都未能解决，尝试切换模型尝试。
5、完成比完美更重要，先完成功能后打磨细节。
4. 构建发布：让所有人都能用
4.1 最短路径——体验版上线
- 确认 AppID：在微信公众平台后台 →「开发管理」→「开发设置」中找到 AppID。
- 配置 AppID：确保 project.config.json 中的 appid 字段已正确填写。
- 上传版本：在微信开发者工具右上角点击「上传」，填写版本号（如 1.0.0）和备注。
- 设为体验版：回到公众平台后台 →「管理」→「版本管理」→ 找到刚上传的版本 → 点击「设为体验版」。
完成后你就可以将二维码分享好友，让好友用微信扫描体验版二维码进行体验。
4.2 上线流程
| 步骤 | 操作 | 时间预期 |
|---|---|---|
| ① 补充基本信息 | 填写小程序名称、简介、图标等 | 10 分钟 |
| ② 选择服务类目 | 选择"工具 > 备忘录"或类似类目 | 5 分钟 |
| ③ 完成备案 | 填写主体信息、上传证件照片 | 1-3 个工作日 |
| ④ 微信认证 | 个人 30 元，企业 300 元 | 1-5 个工作日 |
| ⑤ 提交审核 | 上传操作视频或页面截图 | 1 个工作日 |
| ⑥ 正式发布 | 审核通过后点击「提交发布」 | 即时 |
建议先进行微信认证，再进行备案，最后提交审核。特别注意小程序名称需要不重复、不涉及敏感词、不涉及品牌词，否则认证和备案不通过，改名的话需要重新提交认证和备案，这会加长上线时间。
注意：这个过程可以在一开始就进行，图标等图像类资源可以借助lovart进行生成，音效类资源可以借助suno生成，视频类资源可以借助seedance2.0进行生成。然后边编码打磨边等待审核通过。
5. 总结与复盘
无论你接下来要做什么类型的小程序，都可以复用这五步闭环：
1 想清楚需求 2 规划架构蓝图 3 用 AI 逐模块实现 4 在模拟器中验证并迭代 5 上传/备案/审核/发布
最后的话：你不再只是一个「想做点东西」的人，而是已经跑通了全流程的开发者。在这个过程中，AI 是你的编码伙伴，但产品的灵魂——那个「为什么要做这个小程序」的初心——始终由你来定义。
本教程通过记录心羽日记这个小程序的开发，让你学会如何开发微信小程序，以及如何使用 AI 开发微信小程序，希望对你有帮助！
