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

WeChat CloudBase for Beginners: Store Mini Program Data in the Cloud Without a Server

Switch phones and your data is still there, no server to rent

一句话先懂 · TL;DR

Why local storage is not enough, what WeChat Cloud Development (CloudBase) is, enabling it and the environment ID, collections and permissions in the cloud database, and the full instruction for Claude Code to migrate the to-do list from local storage to the cloud database.

The Ceiling of Local Storage

Local storage has two problems: switch phones and the data is gone; two people cannot see the same data. The fix is to store data in the cloud, but as a beginner, renting a server and setting up a database would stall you at step one.

WeChat Cloud Development (CloudBase) is the ready-made backend WeChat provides for Mini Programs: database, file storage, and cloud functions are all there. Click "Enable" in DevTools and you can use it. It has a free tier, and personal accounts can enable it too.

🔆Local storage is keeping the ledger in your own drawer; Cloud Development is putting it in a bank safe-deposit box you can reach from whichever phone you log in on.

Enable It, and Two Concepts

In the top-left of DevTools, click "Cloud Development" → Enable → create an environment, and write down the environment ID. Then in the Cloud Development console, under "Database," create a collection called todos.

Two concepts are all you need:
- Collection: the equivalent of a table. Each record in the todos collection is one to-do.
- Permissions: a new collection defaults to "only the creator can read and write," meaning each user sees only the data they wrote. That is exactly what a to-do list wants; leave it alone.

// app.js 里初始化(把环境 ID 填进去)
wx.cloud.init({ env: 'your-env-id' });

// 页面里读写
const db = wx.cloud.database();
await db.collection('todos').add({ data: { text, done: false, createdAt: new Date() } });
const res = await db.collection('todos').orderBy('createdAt', 'desc').get();

Migrate from Local to Cloud Without Losing Old Data

This is a change that "touches the data structure," so by Lesson 5's rule it goes into Plan mode first. The plan must include one item: on first launch, write the old to-dos from local storage into the cloud database once, then clear the local copy. Otherwise users see a blank screen after upgrading.

先出方案不改代码:把待办数据从 wx.setStorageSync 迁到云开发 todos 集合。
方案要包含:
1. 首次启动检测本地有旧数据 → 全部写入云端 → 清除本地并打标记,只做一次
2. 添加/完成/删除全部改成云数据库操作,界面仍用 setData 刷新
3. 云端请求失败时的提示
4. 验证步骤:旧数据能看到;新增一条后在云开发控制台能查到;换一台设备登录看不到别人的数据

自测 · 学完检查一下

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

In which case is local storage enough, with no need for the cloud?

答案:Only you use it, and you do not mind starting over when you switch phones

Sharing, cross-device, and admin statistics all require the data not to live on one particular phone, so they need the cloud. Only "one person, one phone, no big deal if it's lost" fits local storage.

Xiao Wen changed the todos collection permission to "all users can read and write," thinking it would be convenient. What happens?

答案:Any user can see and modify everyone else's to-dos; the data all gets mixed up

Permissions decide who can read and write. "All users can read and write" means anyone who opens the Mini Program can pull the entire collection. A to-do list wants "only the creator can read and write." The default is already right; do not change it for convenience.

In the cloud database, the concept that is "the equivalent of a table" is called a ___.

答案:collection

A collection holds records, and one record is one to-do. The todos collection and the users collection each store their own data.

The AI's migration plan says "switch all operations to the cloud database" but does not mention the old local data. What should you add?

答案:"On first launch, write the old local data to the cloud once and then clear local; run only once"

Lesson 5's plan check: the biggest edge case is "what about existing data?" Losing data hurts users most; writing to both places makes the two copies drift apart; deleting first simply wipes out the user's stuff.

True or false: after migrating to the cloud database, setData is no longer needed; the screen follows the cloud data automatically.

答案:False

The cloud database only changes "where the data lives"; the screen-refresh rule is unchanged. After you fetch data from the cloud, you still need setData for it to show. Lesson 3's rule still applies.

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

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

进入互动课程 →

Learn something new — don't miss updates

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