🛠️ Build Your First Mini App with Claude Code · Week 2: Turn It into a WeChat Mini Program on Your Phone

Generate a WeChat Mini Program Skeleton with Claude Code: app.json and the pages Folder

Four files, one page: get it running first

一句话先懂 · TL;DR

The minimal structure of a native WeChat Mini Program, what app.json controls, and why each page has four files. Put it in CLAUDE.md and let Claude Code generate a skeleton that compiles in WeChat DevTools with one instruction.

The Smallest Possible Mini Program

The skeleton of a native Mini Program is small:

- app.json: registers which pages exist, plus global settings like window title and colors. A page that is not registered does not exist.
- app.js / app.wxss: global logic and global styles; leaving them empty is fine for now.
- Four files under pages/index/: index.wxml (structure), index.wxss (styles), index.js (logic and data), index.json (settings for this page).

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

Update CLAUDE.md First, Then Give the Instruction

The rule from Lesson 4: stable rules go into CLAUDE.md. A Mini Program project has a few rules a web project does not. Write them in first, and the AI will not build it the web way:

# 待办清单小程序

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

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

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

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

Then one instruction:

> Following the tech stack in CLAUDE.md, generate a minimal runnable Mini Program skeleton: only one page, pages/index. The page shows a "To-Do List" title and an "Add" button; tapping the button prints "clicked" to the console. Make sure the page is registered in app.json and that it compiles in WeChat DevTools.

What to Do When It Will Not Run

After the skeleton is generated, click "Compile" in DevTools. If it does not run, the DevTools "Console" will show a red error. Troubleshooting order:

1. Copy the exact wording of the red error in the console.
2. Send it to Claude Code: "DevTools compile error: (exact text). Please fix it, changing only the relevant files."
3. Compile again.

💡Do not describe it as "it won't open" or "blank screen"; give the exact text. The error message contains the file name and line number, so the AI knows exactly where to look. This is the same idea as Lesson 2's "send back the exact wording of the failed acceptance item."

自测 · 学完检查一下

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

The AI created the four files under pages/settings/, but the page will not open in DevTools no matter what. What is the most likely cause?

答案:pages/settings/settings is not registered in the pages list in app.json

Page files existing is not the same as the page existing; it only counts once registered in app.json. This is the most common "I wrote it but it does not show" in native Mini Programs. Add it as a red line in CLAUDE.md: any new page must also be registered in app.json.

In a Mini Program project's CLAUDE.md, which red line is the most targeted and most worth writing?

答案:"Any new page must also be registered in app.json"

Red lines should target the mistake this project is most likely to make. Forgetting app.json is a Mini Program-specific trap; write it down and the AI will not fall into it. "Elegant" cannot be judged, and working hours and syntax preferences are not project rules.

True or false: the CLAUDE.md from the Week 1 web project can be copied unchanged into the Mini Program project.

答案:False

The web project's file says "a single index.html, plain HTML"; a Mini Program is nothing like that. Copy it over and the AI really will write HTML for you. The tech stack, how to run, and red lines all need rewriting for the Mini Program. Only collaboration rules like "change one thing at a time" carry over as-is.

After compiling, the simulator shows a blank screen. Which feedback is most likely to get the AI to fix it in one pass?

答案:Console error: Error: module "pages/index/index.js" is not defined, require args is "pages/index/index.js"

The exact error text points straight at the file that failed to load, so the AI can locate it. "Blank screen" and "you got it wrong" are symptoms and guesses; "regenerate" throws away the parts that were already right.

The error says a path referenced in app.json's pages cannot be found. What check can you do yourself first?

答案:Compare the path written in app.json with the pages folder and see whether the four files with that name actually exist

A registered path not matching the actual files is the most common skeleton-stage error, and one glance confirms it. Reinstalling the tool or changing the AppID has nothing to do with the error; deleting app.json leaves the Mini Program with no page registry at all, which is killing the patient.

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

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

进入互动课程 →

Learn something new — don't miss updates

New courses, features and learning tips. Occasional emails, unsubscribe anytime.