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

WeChat Mini Program Real-Device Preview and Debugging: Preview QR Code, Remote Debug, Trial Version

Working in the simulator does not count; working on the phone does

一句话先懂 · TL;DR

The difference between preview, real-device debugging, and the trial version, the three most common causes of a blank screen on the phone, and how to hand phone-side errors to Claude Code to fix.

Three Ways to Get It onto Your Phone

The top-right of DevTools has three related buttons:

- Preview: generates a QR code. Scan it with WeChat and your phone immediately runs the latest code. Scan after every change; this is the one you use most.
- Real-device debugging: while the phone runs the code, your computer shows the phone-side console errors. Use it when something goes wrong on the phone.
- Upload → Trial version: after uploading, set it as the trial version in the Mini Program admin console and add "trial members"; they can open it without scanning a dev code. Use it when letting friends and clients try it out.

⚠️Lesson 7's lesson again: working in the simulator does not count. Screen size, OS version, and network are all different; only a run on a real phone counts as acceptance.

Three Common Causes of a Blank Screen on the Phone

1. Network request blocked: a Mini Program may only request "trusted domains" configured in the admin console. Cloud Development needs no configuration; the moment you bring in a third-party API you hit this. That red line in our CLAUDE.md exists to prevent exactly this.
2. The phone's WeChat version is too old and does not support some newer API. Have the AI use a compatible approach or add a capability check.
3. "Do not verify trusted domains" is checked in the simulator, so it works on the computer but not on the phone. This is the most common "works on my machine."

交给 AI 的正确姿势:
「真机调试控制台报错:(原话)。手机微信版本 8.0.x,机型 xxx。请修复,只改相关文件,并说明为什么模拟器里没有报错。」

自测 · 学完检查一下

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

You want 5 friends to test it for a week and report problems. Which method should you use?

答案:Upload a trial version and add them as trial members

The trial version is designed exactly for "a fixed group of people testing over time." Preview codes expire quickly and must be resent after every change; installing DevTools is too heavy for non-developers; submitting for review is the step that launches to all users, and you are not there yet.

The phone shows a blank screen while the simulator works. You want to see what error the phone is actually reporting. Which do you use?

答案:Real-device debugging

Only real-device debugging sends the phone-side console output back to your computer. Preview and trial version only show you the symptom, and the simulator is simply not a phone.

Real-device debugging shows "request:fail url not in domain list." What does it mean, and what should you do?

答案:The code requests an external domain that is not configured; either add it as a trusted domain in the admin console, or follow the red line and go back to Cloud Development

The error text already explains the cause: the domain is not in the list. It is exactly what the CLAUDE.md red line "no external requests that need trusted domains" is meant to prevent. Ask the AI why the simulator did not report it, and you will find "do not verify" was checked.

True or false: a friend on the trial version reports "tapping Add does nothing," you try it in the simulator and it works, so you can reply "works on my end, probably your phone."

答案:False

Lesson 7 and this lesson say the same thing: if it fails on someone else's phone, it is a real problem. The right move is to ask for the phone model and WeChat version, reproduce it yourself with real-device debugging, and hand the exact error to the AI.

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

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

进入互动课程 →

Learn something new — don't miss updates

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