把uni-wx交给Codex之前我会先补齐这份移动端上下文清单
上一篇讲了 Web 后台经验不能直接搬到 UniApp。
这篇往前走一步。真的要把 uni-wx 交给 Codex 用,我会先补一份移动端上下文清单。它不长,但能挡住很多低级返工。
Codex 会写 Vue。移动端页面真正麻烦的地方,在于它不知道当前项目把哪些能力封装好了,哪些页面行为必须留在页面文件里,哪些地方不能自己临时造。
先确认公共组件有没有
uni-wx 里列了一批基础组件。最关键的几类,我会要求 Codex 先检查。
| 类别 | 优先确认 |
|---|---|
| 页面外壳 | xt-page、xt-nav |
| 空状态 | xt-noData |
| 弹窗 | xt-dialog、xt-botDialog |
| 表单 | xt-ipt、xt-iptSel、xt-selTime |
| 图片与行展示 | xt-img、xt-rowItem、xt-rowLabel |
确认方式很简单,先查项目目录,再查已有页面怎么用。目录里有组件,不代表当前页面就该机械套上;已有页面怎么组合,才更接近项目真实写法。
如果组件缺失,Codex 要记录缺失项。它不能因为少一个 xt-noData,就随手写一份新的空状态组件。缺失组件是否同步模板、是否用已有替代项,这个决定要留给人或项目规则。
再确认页面行为放在哪里
移动端上下文里,生命周期必须单独写。
我会让 Codex 先填这张表。
| 行为 | 推荐位置 | 说明 |
|---|---|---|
| 接收页面参数 | 页面 onLoad |
详情页和编辑页优先在这里拿参数 |
| 首次请求 | 页面 onLoad |
不在普通组件里拉整页数据 |
| 再次显示刷新 | 页面 onShow |
返回列表后是否刷新要提前定 |
| 触底加载 | 页面触底入口或 xt-page 回调 |
和分页状态一起处理 |
| 组件内部初始化 | Vue 组件生命周期 | 只处理局部展示和内部状态 |
这张表能让 Codex 少犯一个常见错误,把页面级行为塞进组件。组件越会自己干活,页面越难控。移动端页面已经有参数、返回、刷新和触底这些行为,再把它们散到组件里,后续改动会很难验收。
列表任务要补刷新和触底规则
写 Web 后台列表时,我常盯查询、重置、分页和表格列。写 UniApp 列表时,我会换一组问题。
页面首次进入是否请求第一页。下拉刷新时是否清空旧列表。触底时怎样防重复请求。接口失败时 requestState 或同类状态怎么恢复。没有更多数据时 hasNext 怎么更新。空状态显示的是正常空,还是接口失败后的异常空。
这些问题都和 uni-wx 的 xt-page、listData.pageObj、useTableMixin 有关。
我会让 Codex 先给出列表状态说明,再写页面。
列表需要说明 current、size、total、hasNext、requestState 的来源和更新时机。 刷新、触底、失败、无更多数据分别写清楚处理方式。 无法确认项目字段时,先查 useTableMixin 或已有列表页。
这段话比“做分页加载”更有用。它把移动端真正会乱的地方摊开了。
表单任务要补反馈和校验入口
移动端表单还有几个容易漏的点。
表单输入是否复用 xt-ipt 或 xt-iptSel。校验是否接 exgFun。提交是否走 useFormMixin。提示是否用 mess。加载是否用 loading。确认弹窗是否用 showModalFn 或项目弹窗封装。
这些看起来像细节,实际影响很大。
Codex 如果自己写正则、自己写 Toast、自己写提交状态,这个页面会慢慢偏离项目。更麻烦的是,移动端失败恢复要处理键盘、加载遮罩、按钮连点和表单保留。只写一个提交成功提示,正常路径过了,异常路径很薄。
我会把表单上下文写成两句话。
表单优先复用 useFormMixin、uni-forms、exgFun 和项目输入组件。 提交过程要说明校验失败、提交中、提交成功、提交失败四种状态,提示和加载统一走公共封装。
这样 Codex 写出来的代码,才有被验收的入口。
样式和文件拆分也要提前说
UniApp 页面还有两类规则,容易被当成小事。
第一类是样式。uni-wx 里要求样式使用 SCSS,单位统一用 rpx,颜色和字号优先走变量或原子类。Codex 如果直接写一堆 px、硬编码颜色、临时 class,这个页面会和项目视觉规范脱节。
第二类是文件拆分。API 方法后缀用 Api,业务逻辑下沉到 service,页面不要把所有请求、转换、提交都塞进一个 .vue 文件。这个规则对移动端很有用,因为页面生命周期已经够多了,再把业务逻辑全堆进去,后面很难读。
所以我会在任务里加一段。
样式优先使用项目原子类和 SCSS 变量,单位使用 rpx。 API 放到对应 api 文件,页面业务逻辑放到当前页面 service 文件,页面只保留编排和生命周期入口。
这段约束不会让页面立刻变得惊艳,但能让代码留在项目的轨道上。
最后交给 Codex 的清单
把前面压缩一下,我会给 Codex 这份清单。
| 上下文 | 需要 Codex 先确认 |
|---|---|
| 公共组件 | 页面、导航、空状态、弹窗、输入、图片组件是否存在 |
| 公共方法 | mess、loading、showModalFn、navigateFn 怎么用 |
| 列表逻辑 | 刷新、触底、分页状态、失败恢复和空状态 |
| 表单逻辑 | 校验、提交、加载、失败保留和成功后动作 |
| 生命周期 | onLoad、onShow、触底、组件生命周期边界 |
| 样式 | SCSS、rpx、原子类和变量 |
| 文件组织 | API、service、页面和局部组件的归属 |
这份清单不替 Codex 写代码。它只负责让 Codex 在写代码前知道自己不能随便发挥。
下一篇如果继续写 uni-wx,我会进入移动端列表分页,专门拆刷新、触底、加载状态和空状态这几件事。后台列表讲过分页链路,移动端要换一套验收方式。
本系列持续更新。工具本身放在后面,更重要的是把 Codex 的动作收进项目已有规则里。
葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。
更多推荐


所有评论(0)