
Codex 这种东西,直觉告诉你应该是程序员用的。但最先玩转它的那批人,是产品经理、运营、自媒体博主、大学生、个体户老板——没几个会写代码的。
因为程序员用它,是从 80 分到 95 分。你不会写代码,是从 0 分直接到 60 分。那个跨越感,完全不一样。
黄仁勋讲得更直白:一个年薪五十万刀的工程师,一年用不了二十五万 token,那才不正常。token 不是成本,是生产资料。以前工厂烧煤,今天知识工作烧算力。你不用,别人用。
别再只把 AI 当聊天机器人了。ChatGPT 陪你唠嗑,Codex 替你干活。两个东西。
我用 codex,一个月收入 10W+,今天把使用方法全部开源。从注册、安装到每种使用方式的页面拆解,全部配截图。不需要编程基础,跟着走一遍,让 AI 开始替你干活。
一、Codex 是什么
Codex 是 OpenAI 推出的 AI 编程 Agent。它跟普通 ChatGPT 对话不一样,Codex 能直接在你的电脑上创建文件、修改代码、运行命令、安装依赖、部署网站。
你说需求,它干完活,你审核结果。
用 Codex 能做这些事。
- 开发网站:帮我用 Next.js 做一个个人博客
- 修 bug:这个登录接口为什么会 500,帮我查一下
- 写脚本:写一个 Python 脚本,每天自动抓取微博热搜
- 部署上线:把这个项目部署到 Vercel
- 重构代码:把这段代码从 JavaScript 改成 TypeScript
- 写文档:给这个项目写 README 和 API 文档
- 数据处理:把这个 CSV 里的数据清洗一遍,输出统计图表
- 开发小程序:帮我初始化一个微信小程序项目
- Codex 不等于 ChatGPT。ChatGPT 只能给你文字建议,Codex 能直接动手改你的项目文件、跑终端命令。
二、注册与订阅
Codex 不单独收费,包含在 ChatGPT 套餐里。你需要有一个 ChatGPT 付费账号。
1.注册 Google 账号
打开 https://accounts.google.com/signup ,按提示填写信息。

注册时需要手机号验证,国内手机号 +86 开头可以正常收到验证码。注册完成后你就有了一个 Gmail 邮箱。
- 如果已经有 Google 账号,跳过这一步。
2.注册 OpenAI 账号

打开 https://chatgpt.com/ ,用刚才注册的 Gmail 邮箱注册 OpenAI 账号。国内手机号也可以用来验证。
- 注意,OpenAI 对部分 IP 有限制。如果注册时提示不可用,换个网络环境再试。
3.套餐选择
- 套餐:Plus;月费:$20/月;Codex 权限:可用,有使用额度;适合谁:个人学习、轻度开发,推荐先开这个
- 套餐:Pro;月费:$100-200/月;Codex 权限:可用,额度很高;适合谁:重度日常使用、专业开发者
- 套餐:Team;月费:$25/人/月;Codex 权限:可用;适合谁:小团队协作
- 套餐:Business;月费:联系销售;Codex 权限:可用;适合谁:企业
- 套餐:Enterprise;月费:联系销售;Codex 权限:可用;适合谁:大企业
4.订阅方法,推荐安卓 Google Play
ChatGPT Plus 最稳的订阅方式是通过安卓手机上的 Google Play 支付。下面是完整流程。
–
第一步,准备一台安卓手机
没有安卓手机的话,可以在电脑上装一个安卓模拟器,比如 MuMu 模拟器或雷电模拟器。
第二步,在手机上登录 Google 账号
打开手机设置,找到「账号」或「账户」,添加 Google 账号,用 2.1 里注册的 Gmail 登录。
第三步,给 Google Play 添加支付方式
打开手机上的 Google Play 商店,点击右上角头像,进入「付款和订阅」、「付款方式」,添加一张信用卡或借记卡。
国内银行发行的 Visa 或 MasterCard 信用卡大部分可以用。如果没有外币信用卡,可以在淘宝购买 Google Play 礼品卡充值。
第四步,安装 ChatGPT App
在 Google Play 商店搜索「ChatGPT」,下载安装。注意区分,OpenAI 官方的 ChatGPT 图标是绿色底白色线条,别下错了。
第五步,登录并订阅
打开 ChatGPT App,用 2.2 里注册的 OpenAI 账号登录。登录后点击左下角的「Upgrade plan」,选择 Plus 套餐,支付方式选 Google Play。
价格显示为 $19.99/月,Google Play 会自动按当月汇率扣款。
三、Codex 的四种使用方式
Codex 提供了四种入口,针对不同使用习惯。
- 方式:Web 网页端;是什么:浏览器打开 chatgpt.com/codex;适合谁:新手入门、不想装任何东西
- 方式:桌面 App;是什么:下载安装 ChatGPT 桌面应用;适合谁:需要读写本地文件、日常主力使用
- 方式:CLI 命令行;是什么:终端里运行 codex 命令;适合谁:习惯命令行的开发者、在服务器上使用
- 方式:IDE 插件;是什么:在 VS Code、Cursor 或 Windsurf 里装扩展;适合谁:已经在用这些编辑器的人
四种方式共用一个账号、共享额度,选一个最顺手的就行,不用全装。
四、安装分步教学
1.Web 网页端,零安装
直接用浏览器打开 https://chatgpt.com/codex
登录你的 ChatGPT 账号,即可在网页里使用 Codex。
- 优点是不用装,任何电脑打开就能用。缺点是不能直接访问你电脑上的本地文件夹,需要手动上传文件。

2.桌面 App,推荐大多数同学用这个
macOS 安装
- 打开 App Store,搜索「ChatGPT」
- 点击获取 / 安装 ChatGPT
- 打开后登录你的 ChatGPT 账号
- 在 App 内选择 Codex 模式
- macOS 用户注意,App 需要 macOS 14 Sonoma 及以上版本。
Windows 安装
- 打开 https://chatgpt.com/download
- 下载 Windows 版安装包
- 双击安装,一路下一步
- 打开后登录 ChatGPT 账号
- Windows 用户注意,需要 Windows 10 及以上。
打开 App,登录,如果看到 Codex 入口,就说明安装成功。

3.CLI 命令行,在终端里用
macOS 和 Linux 安装
打开终端,复制粘贴这行命令。
- curl -fsSL https://chatgpt.com/codex/install.sh | sh
也可以用包管理器安装。
- # npm,需要先装好 Node.js
npm install -g @openai/codex# Homebrew,仅 macOS
brew install codex
Windows 安装
打开 PowerShell,复制粘贴这行命令。
- npm install -g @openai/codex
在终端输入。
- codex
如果出现登录界面,说明安装成功。

第一次运行会提示你登录,选择 Sign in with ChatGPT,浏览器会自动打开,确认授权,就完成了。
- CLI 除了登录 ChatGPT 账号,也可以配 API Key 使用。但新手直接用 ChatGPT 账号登录就行,不用折腾 API。
4.IDE 插件,在编辑器里用
VS Code 安装
- 打开 VS Code
- 打开扩展面板(左侧方块图标,或 Ctrl+Shift+X)
- 搜索「Codex」或「OpenAI Codex」
- 点击安装

五、桌面 App 页面功能全解
这一章按你实际看到的界面来讲。桌面 App 左侧有四块主导航:新对话、搜索、已安排、插件。中间是对话或功能页,底部是账号和权限入口。
下面 8 张图,清楚一块区域。建议装完 App 后对照着点一遍。
1.对话主页面,日常干活的地方

- 编号:②;区域:项目区;干什么用:按项目归类会话,一个文件夹对应一类工作;怎么用:先建项目再开对话,比如「老王Win库」「调研短链方案」;同项目下的对话共享上下文
- 编号:④;区域:会话标题;干什么用:当前这条对话的名字;怎么用:顶部显示,方便辨认;建议改成任务名,别留着默认的「新对话」
- 编号:⑥;区域:内容区;干什么用:Codex 的回复正文;怎么用:看它写了什么、改了什么、跑了什么命令;长回复往上滚
- 编号:⑦;区域:链接;干什么用:回复里的可点击 URL;怎么用:比如本地预览地址 http://127.0.0.1:8788/,点一下直接在浏览器打开
- 编号:⑨;区域:附件列表;干什么用:本轮改动涉及的文件卡片;怎么用:显示 log.md、README.md 等;点文件名或用「打开方式」在系统默认编辑器里打开
- 编号:⑩;区域:消息操作;干什么用:复制、点赞/踩、重新生成;怎么用:回复不满意点重新生成;好的回复可以复制存档
- 编号:⑫;区域:权限与模型区;干什么用:当前账号、权限档位、模型选择;怎么用:见 5.4 账号菜单;编程建议开「完全访问」,模型一般默认即可
- 新项目:左侧项目区 → 选或建项目 → 点「新对话」→ 改会话标题 → 在输入框描述需求。
- 它改完文件后,先看 ⑧ 要点列表 和 ⑨ 附件列表,确认动过哪些文件,再逐个点开检查。
- 本地服务跑起来后,直接点 ⑦ 链接 预览,不用自己猜端口。
2.插件页面,给 Codex 接外部工具

- 编号:②;区域:页面标签;干什么用:在「插件」和「技能 Skills」之间切换;怎么用:插件管外部集成;技能管内置能力包,别混
- 编号:③;区域:页面标题;干什么用:当前是插件市场;怎么用:副标题「在你常用的工具中使用 Codex」
- 编号:⑤;区域:已安装区域;干什么用:当前启用的插件图标条;怎么用:右侧齿轮进插件总设置;已装的会出现在这里
- 编号:⑥;区域:来源分类;干什么用:按提供方筛选;怎么用:OpenAI 官方 / 工作空间 / 个人,找自己需要的来源
- 编号:⑧;区域:插件卡片;干什么用:单个插件的介绍;怎么用:看图标、名称、一句话说明判断要不要装
- 编号:⑨;区域:Try in chat;干什么用:已安装插件的快速入口;怎么用:点它直接开对话并带上该插件上下文
- 编号:⑪;区域:更多集成提示;干什么用:底部折叠的更多插件;怎么用:点「查看 Notion、Outlook…」展开完整列表
实操建议
- 写代码常用:GitHub(读写仓库)、Chrome(浏览器操作)。按你实际栈再装 Figma、Cloudflare 等。
- 装完看 ⑤ 已安装区域 有没有图标,没有说明没装成功,重试或检查网络。
- 想立刻试:点 ⑨ Try in chat,别回对话页自己猜插件有没有生效。
3.已安排页面,定时任务和提醒

- 编号:②;区域:页面标签;干什么用:Tasks(任务)/ Templates(模板);怎么用:任务看已创建的;模板从预设快速建
- 编号:③;区域:页面标题;干什么用:当前模块名「已安排」;怎么用:—
- 编号:⑤;区域:了解更多;干什么用:官方帮助文档链接;怎么用:不确定能干什么时点进去看
- 编号:⑥;区域:通过聊天创建;干什么用:右上角主操作按钮;怎么用:点下拉选创建方式,或跳回对话用自然语言建任务
- 编号:⑧;区域:创建首个已安排任务;干什么用:空状态下的引导文案;怎么用:鼓励你先建一条
- 编号:⑨;区域:快捷模板;干什么用:一键套用常见任务类型;怎么用:每日简报 / 每周回顾 / 项目监控,点一个按提示填参数
- 新手先点 ⑨ 每日简报 或 每周回顾,感受一轮自动化输出长什么样。
- 也可以回对话页直接说:「每天早上 9 点给我昨天 GitHub 提交摘要」,它会帮你落到已安排里。
- 有任务后 ⑦ 会变成列表,可暂停、编辑、删除。
4.账号菜单,用量和设置入口

左下角头像点开后弹出账号面板。管登录信息、设置入口、额度、升级。
- 编号:①;区域:头像与账号入口;干什么用:左下角固定入口;怎么用:显示昵称和套餐徽章(Plus / Pro);点开弹菜单
- 编号:②;区域:账号菜单面板;干什么用:账号相关功能集合;怎么用:点外面或再点头像关闭
- 编号:④;区域:个人账户;干什么用:账号类型标签;怎么用:个人版 / 团队版区分
- 编号:⑤;区域:个人资料;干什么用:改昵称、头像等;怎么用:按需维护
- 编号:⑦;区域:邀请好友;干什么用:生成邀请链接;怎么用:有邀请额度时用
- 编号:⑧;区域:剩余用量;干什么用:额度概览标题;怎么用:下面两条进度条看细节
- 编号:⑩;区域:升级至 Pro;干什么用:订阅升级入口;怎么用:Plus 不够用时考虑
- 编号:⑪;区域:了解更多;干什么用:额度规则说明;怎么用:搞不清限速原因时点
- 感觉变慢或提示限额:先看 ⑨ 哪条满了。
- 改权限、装 MCP、远程连接:都从 ⑥ 设置 进,别在对话里瞎试命令。
5.设置 · 常规,工作模式和权限

Ctrl+, 或账号菜单 → 设置,左侧选 常规。这里决定 Codex 说话风格、文件权限、终端环境。
- 编号:①;区域:返回应用;干什么用:退出设置回主界面;怎么用:左上角箭头
- 编号:③;区域:左侧设置导航;干什么用:个人 / 集成 / 编码 / 已归档 分类;怎么用:权限相关分散在多处,编程重点看「常规」「MCP 服务器」「连接」
- 编号:④;区域:页面标题;干什么用:当前在「常规」;怎么用:—
- 编号:⑦;区域:默认权限;干什么用:工作区内读写文件;怎么用:基础权限,一般保持开启
- 编号:⑧;区域:自动审核;干什么用:自动批准额外访问请求;怎么用:省事但有误操作风险;新手先关,熟悉后再开
- 编号:⑩;区域:常规选项区;干什么用:文件打开方式、Shell、语言、终端位置;怎么用:Windows 把 Shell 设 PowerShell;终端位置选底部或右侧看习惯
实操建议
- 第一次用:工作模式选 适用于编程,开 默认权限,完全访问 按你能接受的风险决定(要写本地项目基本需要)。
- 自动审核 建议关着,至少前两周。每次批准命令,你知道它在干什么。
- 命令跑不起来:检查 ⑩ Shell 是不是 PowerShell,跟你系统一致。
6.设置 · MCP 服务器,接外部数据源

- 编号:②;区域:搜索设置;干什么用:搜 MCP 相关项;怎么用:服务器多时用
- 编号:③;区域:左侧导航;干什么用:当前在「集成」分组;怎么用:MCP / 浏览器 / 电脑控制 都在这里
- 编号:⑤;区域:了解更多;干什么用:MCP 官方文档;怎么用:自己写 MCP Server 时看
- 编号:⑥;区域:添加服务器;干什么用:新建 MCP 配置;怎么用:点 + 添加服务器,填名称、启动命令或 URL
- 编号:⑧;区域:服务器名称;干什么用:配置标识;怎么用:如 node_repl、unityMCP;对话里会按这个名字调用
- 编号:⑨;区域:设置图标;干什么用:编辑该服务器配置;怎么用:点齿轮改命令、环境变量、参数
实操建议
- 装第三方 MCP 后:列表里要有条目 → 开关打开 → 回对话试一句「列出 MCP 可用工具」。
- 某个 MCP 报错:先 ⑩ 关掉,确认是不是它引起的,再 ⑨ 改配置。
- 本课前期可以空着,用到 Unity、数据库、自定义 API 再装。
7.设置 · 连接,手机遥控这台电脑

设置 → 编码 → 连接。用手机或其他设备远程让 Codex 控制这台电脑。
- 编号:①;区域:返回应用;干什么用:回主界面;怎么用:—
- 编号:③;区域:设置导航;干什么用:当前在「编码」→「连接」;怎么用:同组还有 Hooks、Git、环境、Worktree
- 编号:④;区域:页面标题;干什么用:连接配置;怎么用:管远程控制
- 编号:⑥;区域:可控制此电脑的设备;干什么用:已授权设备列表;怎么用:看谁连过
- 编号:⑦;区域:刷新设备列表;干什么用:更新列表;怎么用:新设备授权后点一下
- 编号:⑨;区域:添加设备;干什么用:授权新设备;怎么用:按提示在手机 Codex / ChatGPT App 扫码或确认
- 编号:⑩;区域:其他设置;干什么用:辅助选项;怎么用:—
实操建议
- 不需要手机遥控:⑧ 直接关,少一个攻击面。
- 要用:开 ⑧ → ⑨ 添加设备 → 手机端确认 → ⑦ 刷新看是否出现。
- 合盖跑远程:开 ⑪,并保证电源接通。
8.设置 · 宠物,界面上的小伴侣

设置 → 个人 → 宠物。选一个桌面小图标陪工,纯彩蛋,不影响功能。
- 编号:①;区域:左侧设置导航;干什么用:切到「宠物」;怎么用:在「个人」分组里
- 编号:③;区域:创建自己的宠物;干什么用:自定义伴侣;怎么用:想玩可以点;一般选现成的就够
- 编号:④;区域:刷新;干什么用:重新加载宠物列表;怎么用:列表异常时点
- 编号:⑥;区域:宠物列表;干什么用:所有可选宠物;怎么用:往下滚看全套
- 编号:⑦;区域:宠物卡片;干什么用:单只宠物的名字 + 性格说明;怎么用:如 Fireball「Hot path energy for fast iteration」
- 编号:⑨;区域:已选状态;干什么用:当前激活项;怎么用:按钮变灰「已选」,同一时间只有一只
- 编号:⑩;区域:悬浮宠物图标;干什么用:窗口右下角动画;怎么用:工作时能看到;嫌碍眼可在设置里关或换回 Codex 默认
实操建议
- 纯好玩,不影响写代码。嫌分心选 Codex 默认或 Null Signal(偏极简)。
- 右下角 ⑩ 挡到按钮:换一只小的,或关掉悬浮显示(看当前版本有没有该选项)。
六、CLI 命令行使用入门
如果你装了 CLI 版本,在终端输入 codex 即可进入。
1.基本用法
# 进入交互模式
codex
# 在指定目录下启动
codex –workspace /path/to/your/project
# 直接发指令,一次性模式
codex 帮我创建一个 React 项目

2.CLI 常用命令
- /clear:清空当前会话上下文
- /model:切换模型
- /permissions:管理权限设置
- /cost:查看本次会话用量
- CLI 模式适合在远程服务器上操作、跑批量自动化脚本、习惯纯键盘操作的同学。
七、权限与安全设置,必看
Codex 能操作你的文件、执行命令,所以权限设置非常重要。
1.工作目录权限
Codex 默认只能访问你指定的工作目录。桌面 App 里选中的文件夹、CLI 里 –workspace 指定的路径,就是它的活动范围。它不能随便读你电脑上的其他文件。
- ️ 不要用 –workspace ~/ 让 Codex 访问整个用户目录。给每个项目建一个独立文件夹。
2.命令执行权限
- 模式:自动执行;说明:直接跑,不问你;推荐:仅限有经验的开发者
- 模式:禁止执行;说明:不让 Codex 跑任何命令;推荐:太受限,基本没法用
- 新手先用「每次询问」,看清楚它要跑什么命令再点同意,等熟悉了再调松。
3.网络权限
- 允许或禁止 Codex 访问网络
- 设置允许访问的域名白名单
4.Git 安全
Codex 操作项目时有几个原则。
- 不要让它直接 git push,除非你盯着看
- 建议先 git commit 保存改动,再让 Codex 干活,这样搞坏了可以回退
- 让 Codex 在独立分支上操作更安全
八、第一次使用,完整示范
场景,让 Codex 从零写一个网页计算器。
Step 1 启动 Codex
- 桌面 App。打开 ChatGPT App,切换到 Codex 模式,新建会话
- CLI。终端输入 codex
- Web。打开 chatgpt.com/codex
Step 2 指定项目目录
新建一个空文件夹,比如 ~/projects/my-calculator/,选它。
Step 3 发指令
在输入框输入。
要求是。
界面好看,现代简约风格
支持键盘输入
直接生成一个 index.html 文件
Step 4 看 Codex 干活
Codex 会按这个流程走。
- 先分析需求,告诉你它打算怎么做
- 创建 index.html 文件
- 在里面写 HTML、CSS 和 JS 代码
- 显示 Diff 对比,因为是新文件,全是绿色新增

Step 5 审查并接受
- 看 Diff 里的代码是否合理
- 点击 Accept 接受改动
- 文件就写好了
Step 6 预览
Codex 可能会主动说「要不要我帮你打开浏览器预览」,或者说「文件已创建,你可以在浏览器打开 index.html 看效果」。
如果它没主动说,你可以接着问。
帮我在浏览器里打开 index.html 预览一下
Step 7 迭代修改
看了效果不满意?接着提需求就行。
把计算器改成深色主题,按钮换成圆角的
九、日常使用技巧
1.写好 AGENTS.md,像 Karpathy 一样
Andrej Karpathy 是前特斯拉 AI 总监、OpenAI 联合创始人,他用 AI 写代码有个标志性做法,在项目根目录放一个极详细的 CLAUDE.md,相当于 Codex 里的 AGENTS.md。
他的核心思路是,把这个文件当成给一个天才但不了解你项目的新同事写的入职文档。
下面是一个参考示例。
# AGENTS.md
> AI Agent 每次新对话、上下文恢复、开始新任务前,必须先读本文件。
> 子目录有更近的 AGENTS.md 时,读完本文件后继续读;子规则可细化,不可违反本节红线。
—
## 1. 项目是什么
– **名称**:(填项目名)
– **类型**:(网站 / 脚本 / 知识库 / 小程序 / 其他)
– **技术栈**:(如 Next.js + TypeScript + Supabase)
– **一句话**:这个项目解决什么问题
—
## 2. 红线(必须先问人)
以下操作不能自动执行,必须先征得负责人同意:
– 删除文件、目录或 git 历史
– `git push`、`git rebase`、`git reset –hard`、强制推送
– 修改 `.env`、密钥、token、CI/CD 配置
– 数据库表结构变更、数据迁移、清空数据
– 生产部署、`npm publish`、公开发布内容
– 安装全局依赖、修改系统级配置
临时脚本、预览文件、缓存等过程产物,验证完成后应主动清理。
—
## 3. 目录结构
text
(按实际填写,示例)
src/ 业务代码
app/ 页面或 API 路由
tests/ 测试
docs/ 文档
scripts/ 工具脚本
2.指令要具体
- 修一下 bug:点击登录按钮后页面卡住了,帮我看一下 LoginButton 组件
- 优化性能:首页加载要 5 秒,帮我看一下是哪个接口慢
3.分步来,别一口气说太多
4.用截图和图片
遇到报错不知道怎么描述?直接截图,上传到 Codex。它可以读图片里的报错信息。
5.不会了就问
不确定下一步怎么办?直接问 Codex。
接下来我应该做什么?
Codex 会分析当前项目状态,给你建议。
6.善用命令
CLI 里有很多快捷命令,不需要每次都打完整句子。
/help # 查看帮助
/clear # 清空上下文
/permissions # 调权限
/cost # 查看用量花了多少
十、常见问题
Q Codex 和 Cursor 有什么区别?
Cursor 是一个 AI 编辑器,你必须用它的编辑器。Codex 是一个 Agent,可以在任何地方用,终端、网页、App、甚至 Cursor 里面都行。
Q Codex 和 Claude Code 有什么区别?
两者都是 coding agent。Codex 跟 ChatGPT 账号和 OpenAI 生态绑定;Claude Code 跟 Anthropic 账号绑定。看你订阅哪个、习惯哪套工具链。
Q Plus 的 Codex 额度够用吗?
日常开发一天几小时的话完全够。如果你连续重度使用 8 小时以上,可能会触发限速。先开 Plus 一个月试试,不够再升级。
Q Codex 生成的代码能直接上生产吗?
简单的 CRUD、页面、脚本接近生产可用。复杂业务逻辑需要你 review 和调整。Codex 是加速器,不是替代你思考的东西。
Q 国内能用 Codex 吗?
能用。注册和订阅按本文 Gmail + Google Play 流程走。使用 Codex 需要能稳定访问 OpenAI 服务。桌面 App 和 CLI 在本地跑,网络主要用于跟模型通信。
Q Codex 把我的代码搞坏了怎么办?
有三个保险。第一,改之前先 git commit,搞坏了直接 git checkout 回退。第二,Codex 的改动都需要你手动 Accept,看到不合理的点 Reject。第三,对话里可以说「把刚才的改动撤销掉」。
Q 能让 Codex 连我的数据库吗?
可以。你告诉它数据库连接信息,建议用环境变量 .env,别直接写在对话里。它能帮你写 SQL、建表、查数据。但生产数据库操作要特别小心。
Q Web 端和 App 端用哪个?
新手先用 Web 零安装试一圈。真要写项目、改本地文件,装桌面 App。CLI 适合开发者和服务器场景。四种入口共用一个账号,选一个最顺手的就行。
写在最后
跟完这篇,你应该能完成:Gmail / OpenAI 注册、Plus 订阅、至少一种 Codex 入口的安装、桌面 App 各页面对号入座、第一次完整跑通一个 demo。