---
title: 做一个待办应用
description: 用列表页、详情页、本地存储和一次网络请求，串起一个完整的蓝河小应用。
---
这篇不引入新概念，只把前面学过的东西拼成一个能用的待办清单。
**学完能做什么：** 在 Studio 里对照粘贴，得到列表 + 详情 + 刷新后数据还在的应用；启动时尝试拉一句提示，失败则用本地文案。
**前置：** [数据、列表与事件](/guide/data-list-events/)。导入名以 [页面路由](/api/system/router/) 为准：`@blueos.app.appmanager.router`（部分旧示例写成 `@blueos.app.router`）。
数据形状固定为 `{ id, title, done }`。没有后端、没有登录。
## 1. 工程结构
在 Studio 新建工程后，改成：
```text
src/
app.ux
manifest.json
pages/
Todos/index.ux
TodoDetail/index.ux
```
## 2. manifest.json
```json
{
"package": "com.example.todos",
"name": "待办",
"icon": "/assets/images/logo.png",
"versionName": "1.0",
"versionCode": 1,
"appCategory": ["utilities"],
"config": {
"designWidth": 466
},
"features": [
{ "name": "blueos.storage.storage" },
{ "name": "blueos.network.fetch" }
],
"router": {
"entry": "Todos",
"pages": {
"Todos": { "component": "index" },
"TodoDetail": { "component": "index" }
}
}
}
```
图标路径改成你工程里真实的 icon。存储见 [K-V 数据存储](/api/storage/localstorage/)，请求见 [数据请求](/api/system/fetch/)。
## 3. app.ux
```html
```
不要删除 `/**manifest**/`。
## 4. 列表页 `src/pages/Todos/index.ux`
```html
```
`onShow` 会在每次回到列表时重新读取存储（详情页返回后才会看到最新状态）。
无网时 `loadTip` 走 `fail`，顶部保持默认文案。这是教学预期，不是缺陷。
## 5. 详情页 `src/pages/TodoDetail/index.ux`
路由参数会挂到页面实例上，类型是字符串。用 `params.id` 时，详情页通过 `this.id` 读取，所以 `id` 也要出现在 `data` 里。
```html
{{ title }}
{{ done ? '已完成' : '未完成' }}
```
从列表点进详情，切换完成或删除后返回。杀进程再进应用，列表应仍在（存储成功的前提下）。
删除后要等存储写入成功再返回，否则列表可能读到旧数据。
## 本页要点
- 两页都要写进 `router.pages`；存储和 fetch 要写进 `features`。
- 更新列表用 `this.todos = next`，不要只改 `this.todos[i].done`。
- 每个异步 API 都带 `fail`；请求失败就保留本地 `tip`。
下一篇：[常见问题](/guide/pitfalls/)