红米 Watch 6 快应用开发：五大“天坑”复盘与避坑指南
为红米 Watch 6 开发金融速记卡快应用，本以为只是简单的 HTML 标签替换，实则在布局、模拟器及自动化测试三个层面遭遇了严峻挑战。设备屏幕分辨率仅为 432×514 像素，基于 Vela 快应用工具链（@aiot-toolkit）构建的 .rpk 产物在视觉呈现与交互逻辑上均有特殊限制。以下总结开发过程中遇到的五个核心问题及其解决方案。
一、Absolute 定位导致点击失效
现象：使用 position: absolute 将“返回”、“下一页”等按钮固定在屏幕底部时，点击无任何反应，应用看似冻结。
根因：Vela 渲染器对绝对定位的交互元素支持不可靠，点击事件无法正确分发至该区域，并非坐标计算错误。
解法：放弃绝对定位，将所有可点元素回归正常文档流。采用 flex-direction: column 进行垂直堆叠，使用全宽按钮。虽然牺牲了部分纵向空间，但确保了交互的稳定性。
二、Flex 行内并排按钮右侧命中区异常
现象：在 Flex 布局中并排两个按钮（如“上一页 | 下一页”），左侧按钮响应正常，右侧按钮始终无法点击。
根因：Vela 对 Flex 行内并排的可点元素存在渲染裁剪或事件分发边界计算偏差，导致右侧命中区不可靠。
解法：避免使用行内并排按钮。所有操作按钮均采用全宽单按钮形式，上下堆叠排列。这种朴素的 UI 范式在小屏设备上更为稳健。
三、Text 组件必须显式声明高度
现象：习惯使用的 line-height 在 Vela 渲染器中基本无效，文字易出现挤压或被截断情况。
根因：该渲染器忽略 line-height 属性，若未显式声明 height，文本高度由默认规则决定，往往不符合预期。
解法：为每个 text 组件显式设置 height 属性。对于多行文本，需精确计算高度以避免截断或留白过多。规范示例如下：
四、模拟器启动延迟与状态复位陷阱
现象：应用启动约需 9 秒动画时间，期间点击无效；使用 adb shell am force-stop 后重启，应用仍恢复至上次的页面状态（僵尸页面），导致自动化测试误判。
根因：启动动画期间输入事件被吞没；force-stop 并未清除内部状态（如 page / fpage），仅停止进程。
解法：建立严格的验证流程：
五、滑动手势注入失败与截图冻结
现象：自动化测试中无法模拟滑动手势（onSwipe 不触发）；多次交互后，截图接口返回同一帧画面，造成后续步骤全部失败的假象。
根因：Vela 模拟器输入通道仅支持鼠标注入，不支持滑动手势；底层 gRPC 连接中途掉线导致截图管线冻结。
解法：
- 重建连接：每次交互前重新获取 agent 对象并调用
waitForReady()，确保 gRPC 连接正常。 - 替代方案：既然无法自动化模拟左滑返回，可通过点击导航栏的“返回”按钮来验证相同的业务逻辑（二者底层代码一致），真机环境手动验证手势即可。
最终架构与避坑清单
经过上述优化，最终方案采用全宽单按钮堆叠、分页展示（每页 4 条）、固定内容区高度及显式文本高度的策略。在模拟器中完成 26 项断言测试，全部通过。
Vela 快应用开发避坑清单：
- 禁用
absolute定位可点元素，回归文档流。 - 禁用行内并排按钮，采用全宽单按钮垂直堆叠。
- 每个
text组件必须显式声明height，忽略line-height。 - 启动后需等待 9~12 秒，避开启动动画期间的输入屏蔽。
- 测试前务必
uninstall重装，force-stop无法复位状态。 - 自动化测试无法注入滑动手势，改用点击导航按钮验证返回逻辑。
- 截图冻结源于连接掉线，每次交互前重建 gRPC 连接。
小屏快应用的核心在于交互的确定性而非布局的复杂性。遵循上述规范，可显著提升开发效率与应用稳定性。