The Three Essentials of a Page
In a web page you never had to care how the AI wrote things. A Mini Program has one rule you must know, or you will not understand why "I changed it and nothing happened":
- Page data lives in data.
- Changing data must go through setData for the screen to update. Change this.data.todos directly and the screen does not move.
- To survive a reload, save with wx.setStorageSync('todos', list) and read it back on startup with wx.getStorageSync('todos').
Page({
data: { todos: [] },
onLoad() {
this.setData({ todos: wx.getStorageSync('todos') || [] });
},
addTodo(e) {
const todos = [...this.data.todos, { text: e.detail.value, done: false }];
this.setData({ todos }); // 界面更新
wx.setStorageSync('todos', todos); // 本地保存
},
});Acceptance Criteria, Mini Program Edition
The acceptance criteria from Lesson 2 can be reused almost as-is, with just two changes:
把待办清单完整做进 pages/index。
验收标准：
1. 输入框输入后点「添加」，列表多一条
2. 点一条切换完成状态，完成的划掉
3. 每条右侧有删除，删除后列表和本地存储里都没了
4. 关掉小程序再打开（模拟器点「编译」），数据还在 ← 原来是「刷新页面」
5. 列表为空时显示「还没有待办」
约束：只改 pages/index 四个文件，不新增页面，不引入组件库。 ← 原来是「只用一个 html」自测 · 学完检查一下
想真正动手做题、记进度、攒连胜？到互动课里练。
The AI wrote this.data.todos.push(newItem). The console shows the array does have one more item, but the list on the page has not changed. Why?
答案：setData was not used; a Mini Program only refreshes the screen on setData
This is the biggest difference between a Mini Program and a web page: data changing is not the same as the screen changing; setData is the action that "tells the screen to refresh." push works fine, restarting is unrelated, and local storage only decides whether data survives a reload, not what is currently displayed.
True or false: once you use setData, the data is automatically saved to the phone; close the Mini Program, reopen it, and it is still there.
答案：False
setData only handles what is currently on screen; close the Mini Program and the data is gone. To have it there next time, you must also call wx.setStorageSync to save and getStorageSync on startup to read. Two jobs, two actions.
When converting the web acceptance criteria to the Mini Program version, what should "data is still there after refreshing the page" become?
答案："Close the Mini Program and reopen it (or recompile in DevTools); data is still there"
A Mini Program has no "refresh page" action; the matching user behavior is close and reopen. This item cannot be deleted, because it verifies that local storage works. "Still there after reinstalling" is a cloud-sync requirement; that is Lesson 4.
After the AI finishes, you add two to-dos in the simulator, click "Compile" to reload, and the list is empty. Following the acceptance criteria, what should you send back?
答案："Acceptance item 4 failed: after adding two items and recompiling, the list is empty; local storage is not working"
Lesson 2's acceptance feedback method: item number, what happened, your judgment. Item 4 is exactly about storage; point it out and the AI knows to check the read and write. Guessing setData is the wrong direction (the screen works; what is lost is persistence); redoing everything and adding requirements are the same old bad habits.