上一篇讲了 Web 后台经验不能直接搬到 UniApp。

这篇往前走一步。真的要把 uni-wx 交给 Codex 用,我会先补一份移动端上下文清单。它不长,但能挡住很多低级返工。

Codex 会写 Vue。移动端页面真正麻烦的地方,在于它不知道当前项目把哪些能力封装好了,哪些页面行为必须留在页面文件里,哪些地方不能自己临时造。

先确认公共组件有没有

uni-wx 里列了一批基础组件。最关键的几类,我会要求 Codex 先检查。

类别 优先确认
页面外壳 xt-pagext-nav
空状态 xt-noData
弹窗 xt-dialogxt-botDialog
表单 xt-iptxt-iptSelxt-selTime
图片与行展示 xt-imgxt-rowItemxt-rowLabel

确认方式很简单,先查项目目录,再查已有页面怎么用。目录里有组件,不代表当前页面就该机械套上;已有页面怎么组合,才更接近项目真实写法。

如果组件缺失,Codex 要记录缺失项。它不能因为少一个 xt-noData,就随手写一份新的空状态组件。缺失组件是否同步模板、是否用已有替代项,这个决定要留给人或项目规则。

再确认页面行为放在哪里

移动端上下文里,生命周期必须单独写。

我会让 Codex 先填这张表。

行为 推荐位置 说明
接收页面参数 页面 onLoad 详情页和编辑页优先在这里拿参数
首次请求 页面 onLoad 不在普通组件里拉整页数据
再次显示刷新 页面 onShow 返回列表后是否刷新要提前定
触底加载 页面触底入口或 xt-page 回调 和分页状态一起处理
组件内部初始化 Vue 组件生命周期 只处理局部展示和内部状态

这张表能让 Codex 少犯一个常见错误,把页面级行为塞进组件。组件越会自己干活,页面越难控。移动端页面已经有参数、返回、刷新和触底这些行为,再把它们散到组件里,后续改动会很难验收。

列表任务要补刷新和触底规则

写 Web 后台列表时,我常盯查询、重置、分页和表格列。写 UniApp 列表时,我会换一组问题。

页面首次进入是否请求第一页。下拉刷新时是否清空旧列表。触底时怎样防重复请求。接口失败时 requestState 或同类状态怎么恢复。没有更多数据时 hasNext 怎么更新。空状态显示的是正常空,还是接口失败后的异常空。

这些问题都和 uni-wxxt-pagelistData.pageObjuseTableMixin 有关。

我会让 Codex 先给出列表状态说明,再写页面。

列表需要说明 current、size、total、hasNext、requestState 的来源和更新时机。
刷新、触底、失败、无更多数据分别写清楚处理方式。
无法确认项目字段时,先查 useTableMixin 或已有列表页。

这段话比“做分页加载”更有用。它把移动端真正会乱的地方摊开了。

表单任务要补反馈和校验入口

移动端表单还有几个容易漏的点。

表单输入是否复用 xt-iptxt-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 先确认
公共组件 页面、导航、空状态、弹窗、输入、图片组件是否存在
公共方法 messloadingshowModalFnnavigateFn 怎么用
列表逻辑 刷新、触底、分页状态、失败恢复和空状态
表单逻辑 校验、提交、加载、失败保留和成功后动作
生命周期 onLoadonShow、触底、组件生命周期边界
样式 SCSS、rpx、原子类和变量
文件组织 API、service、页面和局部组件的归属

这份清单不替 Codex 写代码。它只负责让 Codex 在写代码前知道自己不能随便发挥。

下一篇如果继续写 uni-wx,我会进入移动端列表分页,专门拆刷新、触底、加载状态和空状态这几件事。后台列表讲过分页链路,移动端要换一套验收方式。

本系列持续更新。工具本身放在后面,更重要的是把 Codex 的动作收进项目已有规则里。

Logo

葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。

更多推荐