🛠️ 零基础用 Claude Code 做出第一个小程序 · 第 2 周:做成微信小程序,跑在你手机上

用 Claude Code 生成微信小程序骨架:app.json、pages 目录讲解(零基础)

四个文件、一个页面,先跑起来再说

一句话先懂 · TL;DR

原生小程序的最小结构是什么、app.json 管什么、一个页面为什么有四个文件。把这些写进 CLAUDE.md,一条指令让 Claude Code 生成能在开发者工具里跑起来的骨架。

一个小程序最少长什么样

原生小程序的骨架很小:

- app.json:登记有哪些页面、窗口标题颜色这类全局设置。页面不登记就不存在。
- app.js / app.wxss:全局逻辑和全局样式,先留空也行。
- pages/index/ 下四个文件:index.wxml(结构)、index.wxss(样式)、index.js(逻辑和数据)、index.json(这一页的设置)。

todo-mini/
├── app.json        ← "pages": ["pages/index/index"]
├── app.js
├── app.wxss
├── project.config.json  ← 开发者工具生成的,含 AppID
└── pages/
    └── index/
        ├── index.wxml
        ├── index.wxss
        ├── index.js
        └── index.json

先改 CLAUDE.md,再下指令

第 4 课的规矩:稳定的规则写进 CLAUDE.md。小程序项目有几条网页项目没有的规则,先写进去,AI 就不会拿网页那套来做:

# 待办清单小程序

## 技术栈
- 微信原生小程序(WXML/WXSS/JS),不用 uni-app、Taro 等框架
- 数据暂存本地 wx.setStorageSync,后续改云开发

## 怎么跑
- 微信开发者工具打开本目录,编译后看模拟器
- 改完在开发者工具「预览」用手机真机看一遍

## 红线
- 新增页面必须同步登记到 app.json 的 pages
- 不使用任何需要「合法域名」配置的外部请求
- 一次只改一个功能,改前说明会动哪些文件

## 这次不做
- 登录、支付、消息推送

然后一条指令:

> 按 CLAUDE.md 的技术栈,生成一个最小可运行的小程序骨架:只有 pages/index 一个页面,页面显示「待办清单」标题和一个「添加」按钮,点击按钮在控制台打印「clicked」。确保 app.json 登记了页面,在开发者工具里能编译通过。

跑不起来怎么办

骨架生成后,在开发者工具点「编译」。跑不起来时,开发者工具的「控制台」会有红色报错。排查顺序:

1. 复制控制台里那条红色报错的原话
2. 发给 Claude Code:「开发者工具编译报错:(原话)。请修复,只改相关文件。」
3. 再编译。

💡不要描述「它打不开」「白屏了」,要给原话。报错原话里有文件名和行号,AI 一看就知道在哪。这和第 2 课「把没过的验收项原话发回去」是同一个道理。

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

AI 新建了 pages/settings/ 四个文件,但开发者工具里怎么都打不开这个页面。最可能的原因是?

答案:app.json 的 pages 列表里没有登记 pages/settings/settings

页面文件存在不等于页面存在,app.json 里登记了才算。这是原生小程序最常见的「明明写了却不显示」。把这条写进 CLAUDE.md 红线:新增页面必须同步登记到 app.json。

小程序项目的 CLAUDE.md 里,下面哪条红线最有针对性、最值得写?

答案:「新增页面必须同步登记到 app.json」

红线要针对这个项目最容易犯的错。app.json 漏登记是小程序特有的坑,写进去 AI 就不会踩。「优雅」不可判定,工时和语法偏好都不是项目规则。

判断:第 1 周网页项目的 CLAUDE.md 可以原封不动复制给小程序项目用。

答案:

网页项目写的是「单个 index.html、原生 HTML」,小程序完全不是这套。复制过去 AI 会真的给你写 HTML。技术栈、怎么跑、红线三块都要按小程序重写,只有「一次只改一件事」这类协作规则可以照搬。

编译后模拟器白屏。哪种反馈最能让 AI 一次修对?

答案:「控制台报错:Error: module "pages/index/index.js" is not defined, require args is "pages/index/index.js"」

报错原话直接指出哪个文件没被正确加载,AI 能定位。「白屏」「写错了」是现象和猜测,「重新生成」丢掉了已经做对的部分。

报错说 app.json 里 pages 引用的路径找不到文件。你自己能先做的检查是?

答案:对照 app.json 里写的路径,看 pages 目录下是不是真有同名的四个文件

登记的路径和实际文件不对应,是骨架阶段最常见的错,自己对一眼就能确认。重装工具和换 AppID 与报错无关;删掉 app.json 小程序就没有页面登记了,等于把病人杀了。

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

学点新东西,不错过更新

新课程、新功能、学习小技巧——偶尔一封,随时退订。