5. 性能与稳定性
针对 PDA 设备性能和弱网环境,选择轻量组件、合理加载数据并保护现场作业结果。
PDA 页面优先保证能快速打开、能顺利操作、数据不丢失。设计时要同时考虑设备性能、页面组件数量、数据量、图片资源和网络情况。
设计原则与最佳实践
- 数据展示使用图文列表。 如果页面需要展示多条订单、物料或任务记录,禁止直接使用活字格表格。使用图文列表按卡片或列表项展示关键信息,避免复杂表格在小屏上产生大量单元格、横向滚动和重复渲染。
- 数据量大时按需加载。 图文列表数据超过
50条时,建议开启【按需加载】;如果页面打开时不需要立即显示列表,选择【初始化页面时不加载绑定数据】,在用户筛选、搜索或进入对应区域后再加载。这两个选项可以同时启用,分别控制分批加载和首次加载时机。 - 页面组件保持简单。 PDA 的处理速度通常低于常规手机,页面应以简洁可用为先。减少单元格命令数量,尤其避免多层嵌套、复杂容器和组件单元格;一个页面只保留完成当前任务所需的内容和操作。
- 优先使用活字格内置命令。 手机页面优先使用活字格内置的输入框、按钮、日期等单元格命令。只有内置能力无法满足需求时再使用 Vant 手机单元格命令,以减少额外资源文件和初始化开销。
- 控制图片和图标资源。 避免在页面大面积、重复展示图片或大图标。列表使用小尺寸缩略图,原图和低频图片按需打开;能用文字或简单图形表达的内容,不必使用图片。
- 采用渐进式加载。 页面加载模式可设置为【渐进式加载】:先显示页面骨架、任务入口和必要信息,再加载列表、详情和低频内容。加载过程中保持明确反馈,不要让用户误以为数据已经完整加载。
- 局部更新并保护结果。 保存或同步后只更新受影响的列表项,避免整页刷新。弱网、超时或 APP 重启时保留当前输入和未确认记录;重复提交应有防重和结果核对机制。
案例:采购入库页面如何减轻设备负担
沿用工厂仓库采购入库场景,页面需要在东集 Seuic 小码哥 CRUISE Ge(Android 9.0、活字格 12.0.3.0、HAC v1.22.0-release)上处理采购订单和物料。
| 场景问题 | 设计做法 | Demo 对应效果 |
|---|---|---|
| 订单数量可能较多 | 用图文列表显示订单,不使用活字格表格;超过 50 条时按需加载或初始化不加载绑定数据 | 订单卡片显示订单号、状态、仓库和日期 |
| 物料明细较多 | 详情页只显示当前作业所需字段,避免复杂嵌套组件 | 物料卡片显示信息、数量和“接收货品” |
| PDA 处理能力有限 | 优先使用内置输入框、按钮和轻量布局,减少 Vant 命令与重复刷新 | 数量面板使用简单的加减和保存 |
| 现场网络不稳定 | 先显示当前页面和模式;离线录入后保留本地结果,恢复在线再同步 | 离线保存 10/100,切回在线后显示同步成功 |
| 页面资源需要控制 | 不在订单列表中铺满大图或复杂动画,低频内容按需加载 | Demo 主要由文字、卡片、按钮和少量图标组成 |
表格只用于说明设计决策,实际 PDA 页面中的订单和物料数据必须使用图文列表呈现。
图文列表加载配置
在活字格设计器中选中订单图文列表,在右侧【单元格设置】中配置加载选项。当前 Demo 的配置如下:
| 配置项 | 当前设置 | 作用 |
|---|---|---|
| 按需加载 | 已勾选 | 按需分批加载列表数据 |
| 加载行数 | 10 | 按需加载时每批加载 10 条,并非列表总条数上限;可根据数据量和设备表现调整 |
| 初始化页面时不加载绑定数据 | 已勾选 | 页面初始化时暂不加载绑定数据,后续通过配置的操作触发加载 |
推荐加载顺序
显示页面框架和任务入口
-> 加载当前用户、网络模式和必要权限
-> 加载订单图文列表或等待用户筛选
-> 进入订单后加载当前物料列表
-> 按需加载图片、历史和低频信息
-> 保存或同步后局部更新对应记录列表加载建议:
- 数据不超过
50条时,可根据页面打开频率决定是否直接加载; - 数据超过
50条时,开启【按需加载】;不需要立即展示列表时,可同时开启【初始化页面时不加载绑定数据】; - 搜索、状态筛选和扫码结果应只请求匹配数据;
- 加载失败时保留筛选条件和已输入内容,提供重试入口;
- 空列表、无匹配和加载中使用不同提示,避免空白页面被误认为没有数据。
