企业官网建设流程全解析

1. 为什么 uni-wx 项目直接丢给 Codex 会翻车

uni-wx 是一套跑在 UniApp 上的移动端项目模板，用 Vue 写页面、SCSS 管样式、rpx 做单位，内置了一批以xt-打头的公共组件和useTableMixin、useFormMixin这类组合式逻辑。它适合谁？适合已经在用 UniApp 做小程序或 H5、又想让 Codex 帮忙写页面的团队。它能做什么？能让你少写重复的列表、表单、弹窗代码。但前提是——你得先把项目上下文喂给 Codex。

我试过直接把一个空页面需求丢给 Codex，让它"写个带分页的订单列表"。结果它给我生成了一个用axios请求、用px写样式、自己new了一个空状态 div 的页面。代码本身没错，但放进 uni-wx 里就是异物：请求没走项目封装的request，样式和视觉规范对不上，空状态也没复用xt-noData。这就是典型的"AI 生成代码与运行时脱节"。

问题不在 Codex 会不会写 Vue，而在于它不知道你这个项目把哪些能力封装好了、哪些行为必须留在页面文件里、哪些地方不能自己临时造。移动端页面真正麻烦的地方从来不是语法，而是生命周期、参数接收、返回刷新、触底加载这些散落在页面里的行为。Codex 默认会把这些塞进组件，组件越"能干"，页面越难控。

所以这篇要交付的是一份可复制的移动端上下文清单模板，加上给 Codex 的提示词配置，最后给出在本地跑通 uni-wx 编译验证的具体动作。清单不长，但能挡住很多低级返工。下面按"先确认组件、再确认行为、最后确认样式和文件拆分"的顺序展开，每一步都给可直接粘贴的片段。

2. 接入前的 TaoToken 前置准备与 Codex 配置

Codex 要能读到你的项目上下文，得先有一个稳定的模型调用入口。我用的是 TaoToken 做统一接入，官网在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api 。它的作用是把你对模型的请求收敛到一个 Base URL 上，Codex、Cline、Claude Code 这些工具都能指向同一个入口，省得每个工具配一套。

先说清楚：TaoToken 不是编辑器，它不替代你的 IDE，也不碰你的代码仓库。它只负责模型调用这一层。你的 uni-wx 项目还是老老实实放在本地，Codex 通过配置读文件、写文件。

第一步，去控制台拿 Key。打开 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，在 API Keys 页面创建一个新 Key，复制出来。这个 Key 只显示一次，丢了就重建。拿 Key 的入口在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。

第二步，确认你要用的模型 ID。不同工具对模型名的写法不一样，Codex 走的是 OpenAI 兼容格式，Claude Code 走的是 Anthropic 格式。你可以在模型对话页 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 先试一下模型能不能正常回话，确认 ID 拼写没错再往配置里填。

第三步，如果你打算长期用 Codex 做编码和 Agent 任务，建议直接上 Coding Plan，入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。它比按次调用更适合"反复读项目、反复改文件"这种高频场景。

这里有个关键点：Codex 读项目上下文靠的是它自己的文件访问能力，不是靠你把代码贴进对话。所以配置里 Base URL、Key、Model ID 三件套必须齐全，缺一个都会在请求阶段报错。下面第三节给可直接复制的配置片段。

3. 可复制的 Codex 配置与上下文清单模板

这一节是全文最该抄走的部分。先给 Codex 的配置文件，再给上下文清单模板。

Codex 的配置一般放在用户目录下的~/.codex/config.toml（Windows 是%USERPROFILE%\.codex\config.toml）。如果你用的是支持auth.json的版本，认证信息会单独放在~/.codex/auth.json。三件套要写全：

# ~/.codex/config.toml model = "你的模型ID" model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY" wire_api = "chat"

对应的auth.json：

{ "TAOTOKEN_API_KEY": "sk-你从控制台复制的Key" }

注意base_url结尾不要多加/v1，TaoToken 的 API 根路径就是https://taotoken.net/api，多写一层会 404。wire_api用chat走 OpenAI 兼容格式，Codex 默认就认这个。

配好之后，把下面这份上下文清单模板存成项目根目录的CODEX_CONTEXT.md，每次让 Codex 干活前先让它读这个文件：

# uni-wx 移动端上下文清单 ## 公共组件（先确认是否存在，缺失要记录，不要自造） - 页面外壳：xt-page、xt-nav - 空状态：xt-noData - 弹窗：xt-dialog、xt-botDialog - 表单：xt-ipt、xt-iptSel、xt-selTime - 图片与行展示：xt-img、xt-rowItem、xt-rowLabel ## 公共方法 - 提示：mess - 加载：loading - 确认弹窗：showModalFn - 跳转：navigateFn ## 生命周期归属 | 行为 | 推荐位置 | 说明 | | --- | --- | --- | | 接收页面参数 | 页面 onLoad | 详情页、编辑页优先在这里拿参数 | | 首次请求 | 页面 onLoad | 不在普通组件里拉整页数据 | | 再次显示刷新 | 页面 onShow | 返回列表后是否刷新要提前定 | | 触底加载 | 页面触底入口或 xt-page 回调 | 和分页状态一起处理 | | 组件内部初始化 | Vue 组件生命周期 | 只处理局部展示和内部状态 | ## 列表状态 - current、size、total、hasNext、requestState 的来源和更新时机 - 刷新、触底、失败、无更多数据分别写清楚处理方式 - 无法确认字段时，先查 useTableMixin 或已有列表页 ## 表单状态 - 校验失败、提交中、提交成功、提交失败四种状态都要说明 - 提示和加载统一走公共封装 ## 样式与文件组织 - 样式用 SCSS，单位用 rpx，颜色字号优先走变量或原子类 - API 方法后缀用 Api，业务逻辑下沉到 service - 页面只保留编排和生命周期入口

这份清单不替 Codex 写代码，它只负责让 Codex 在动手前知道自己不能随便发挥。把它和配置一起用，Codex 生成的页面才会留在项目轨道上。

4. 验证请求与本地跑通 uni-wx 编译

配置写完不算完，得验证两件事：模型请求通不通，项目编译过不过。

先验证模型请求。在终端里直接 curl 一下，确认 Key 和 Base URL 没问题：

curl https://taotoken.net/api/chat/completions \ -H "Authorization: Bearer sk-你的Key" \ -H "Content-Type: application/json" \ -d '{ "model": "你的模型ID", "messages": [{"role": "user", "content": "回复 ok"}] }'

返回里能看到choices数组和content字段，就说明请求链路通了。如果返回 401，是 Key 的问题；如果返回local proxy failed，多半是本地网络或代理配置干扰，检查一下环境变量里有没有残留的HTTP_PROXY。

请求通了之后，让 Codex 按清单生成一个页面，然后本地编译验证。uni-wx 基于 UniApp，编译命令通常是：

# 安装依赖 npm install # 编译到微信小程序 npm run dev:mp-weixin # 或编译到 H5 npm run dev:h5

编译产物在dist/dev/mp-weixin或dist/dev/h5。打开微信开发者工具导入dist/dev/mp-weixin，看页面能不能正常渲染。重点检查三处：空状态是不是xt-noData、列表请求是不是走了项目封装的request、样式单位是不是rpx。

如果编译报reading 'choices'这类错误，说明模型返回结构和你代码里解析的字段对不上，回去检查wire_api和模型 ID。如果编译报 SCSS 变量未定义，说明 Codex 用了项目里不存在的变量，把变量名补进清单模板。

实测下来，把清单模板放进项目、让 Codex 先读再写，返工率能降一大截。关键动作就三个：配置三件套写全、清单模板存进项目、编译后逐项对照检查。

5. 本篇常见报错排查

这一节按真实报错来对。你大概率会碰到下面几种。

401 Unauthorized。Key 没填对，或者auth.json里的字段名和config.toml里的env_key对不上。检查env_key = "TAOTOKEN_API_KEY"和auth.json里的键名是否完全一致，大小写敏感。

local proxy failed。本地有代理环境变量在干扰请求。执行env | grep -i proxy看看有没有HTTP_PROXY、HTTPS_PROXY，有的话临时 unset 掉再试。注意这不是让你去配代理，而是排查残留配置。

reading 'choices' of undefined。模型返回体里没有choices，通常是base_url写错或模型 ID 不存在。确认base_url = "https://taotoken.net/api"没有多余路径，模型 ID 在模型对话页能正常回话。

OAuth 相关报错。如果你用的是 Claude Code 那套 Anthropic 格式，认证方式不一样，别把 OpenAI 的 Key 直接塞进 Anthropic 配置。Claude Code 的接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，按里面的字段填。

编译报组件未注册。Codex 用了xt-noData但你没在页面里 import，或者项目里根本没这个组件。回清单模板确认组件是否存在，缺失项要记录，不要让它自造一个。

样式单位混乱。Codex 写了px，编译不报错但视觉不对。在清单里明确"单位用 rpx"，生成后全局搜一下px排查。

API 方法没走封装。Codex 直接写了uni.request，没走项目的request。检查生成的api文件后缀是不是Api，业务逻辑有没有下沉到service。

排查顺序建议：先看请求层（401、proxy、choices），再看编译层（组件、SCSS），最后看规范层（单位、文件组织）。请求层不通，后面都白搭。

6. 把 Codex 收进项目规则里

清单模板和配置都给了，剩下的是习惯问题。每次让 Codex 动手前，先让它读CODEX_CONTEXT.md，再给具体任务。任务描述里带上"先确认组件是否存在""生命周期按清单归属""样式用 rpx"这几句，比事后返工省事得多。

如果你还在按次调用模型，建议切到 Coding Plan，入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，长期编码和 Agent 任务用这个更顺。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，配置字段有疑问直接查。模型对话页 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 用来验证模型 ID 和返回格式，配之前先在那儿试一句。

下一篇我会进入移动端列表分页，专门拆刷新、触底、加载状态和空状态这几件事。后台列表讲过分页链路，移动端要换一套验收方式。工具本身放在后面，更重要的是把 Codex 的动作收进项目已有规则里。