鸿蒙开发实例｜构建轻量级智能穿戴设备用户界面
HarmonyOS 提供了轻量级智能穿戴应用开发，开发者可以在运动手表上开发跨设备协同工作的应用，如从与之匹配的智能手机、平板等各类设备上获取信息，便捷地显示在运动手表上，或通过对运动手表的操作来控制其他设备上的操作任务，为消费者带来更加灵活、智慧的分布式交互体验。
轻量级智能穿戴统一使用 JS 语言进行开发，这里带领大家体验一番。
01、布局整体说明
用户界面的构建主要以组件为基础，每个组件通过对数据和方法的简单封装，实现独立的可视化、可交互功能单元。在轻量级智能穿戴设备的开发中，个别较为复杂的组件是不支持的。大部分组件支持通用属性和通用样式，不同组件还支持其私有的属性和样式。根据组件的功能，将组件主要分为以下三大类：
基础组件： text、image、progress、marquee、chart 等。
容器组件： div、list、list-item、stack、swiper 等。
表单组件： input、slider、switch、picker-view 等。
目前，轻量级智能穿戴设备 Lite Wearable 开发均采用 JS 语言，支持 Empty FeatureAbility 和 List Feature Ability 两种开发模板。开发框架以 454px(这里，px 是逻辑像素，非物理像素)为基准宽度。
首先新创建一个轻量级智能穿戴设备的工程，选择 Lite Wearable 设备下的 EmptyFeature Ability 模板，如图 1 所示。
■ 图 1 新建 Lite Wearable 设备工程
创建完成后，会生成一个 Hello World 的工程，这里可以通过模拟器运行测试。单击右上角的运行按钮，在弹窗下方的 Available Huawei Lite Devices 中，选择华为轻量级穿戴设备 Huawei Lite Wearable Simulator，如图 2 所示，单击 OK 按钮即可启动模拟器。
■ 图 2 选择 Lite Wearable 模拟器并运行
运行模拟器后效果如图 3 所示，表盘中显示了 Hello World 字样。表盘可以完全模拟应用在手表上的运行效果，同时也支持使用鼠标单击或滑动等相应操作。
■ 图 3 Lite Wearable 模拟器运行 Hello World
表盘下方显示了轻量级鸿蒙应用运行所占的 JS 内存，可以看到，轻量级智能手表的最大运行内存为 49144B(48KB)，因此模拟器的最大内存限制为 48KB。
(注意，在 Debug 模式下，调试引擎会占用一定内存，因此只会显示当前所占用的内存，不会对内存大小进行限制。在非 Debug 模式下，会显示当前所占用的内存和最大内存限制 48KB，应用程序占用的内存不能大于 48KB。否则，在模拟器上不能正常运行。)
模拟器同时支持通过 GUI 界面注入场景化数据，单击设置可以进行相关配置，如“点亮/关闭屏幕”“亮度调节模式”“屏幕亮度”“气压”“心率”“步数”“经纬度”等数据，可以更加真实地模拟手表上应用运行的环境和效果。
02、用户界面实现
构建一个出行服务打车应用。可在轻量级智能穿戴设备上左右滑动，显示“司机信息”“位置信息”和“车辆信息”。实现该打车应用 Demo，需要完成如下三步：
(1) 实现轻量级智能穿戴设备上显示内容的布局设计。
(2) 实现表盘上各个容器的样式定义。
(3) 实现 Demo 应用的交互逻辑设计。
实现后的效果图如图 4 所示。
■ 图 4 Lite Wearable 打车软件 Demo 效果图
首先对 Demo 的基础布局进行解析：
(1) 需要实现“司机信息”“位置信息”和“车辆信息”的三屏左右滑动，需要使用 swiper 容器组件来控制。swiper 提供了切换子组件显示的能力。
(2) 在每一屏内(如司机信息)，需要展示 4 行信息，这 4 行信息需要定义 4 个容器进行存储。其中第一行包含 image 和 text 两个组件。
(3) 每条信息，需要从手机端动态地读取信息，所以需要设置对应的变量。
在之前新建 Hello World 工程上进行打车应用 Demo 实现。首先选择 entry→src→main→js→default，新建 common 文件夹，用于存储 image 图片资源，然后选择 entry→src→main→js→default→pages→index，在 index.hml 中搭建页面的基础布局结构，实现代码如下：
上述 hml 文件实现了页面的基础布局，其中通过 swiper 组件控制手表多屏之间的滑动，每个屏通过 div 容器进行存储，其中包括最上方标题的 div 容器和下方的 3 行 text 组件，所显示的数据均采用{{content}}的数据绑定形式。
每个布局中都必不可少样式的绘制，这里采用选择器样式的方式，即将所有的样式代码写到 css 文件中，然后通过 class、id 等方式和组件关联起来。
在上述 hml 布局文件中，每个容器都定义了一个如 div class="contain -er" /div 的 class 样式，该 class 用于定义每个容器内存放的内容的位置、元素的大小、字体、颜色、背景色等信息，因此，需要为 index.hml 中每个 class 定义具体的样式，打车应用 Demo 应用的样式文件 index.css 代码如下：
其中，最外层的 container 的宽和高均设置为 454px，在轻鸿蒙设备端，以 454px 为基准宽度。接下来进行 Demo 中应用逻辑交互的实现。在 JS 文件中，需要实现打车 Demo 应用的“司机信息”“位置信息”和“车辆信息”的读取。index.js 中的具体代码如下：
其中，本 Demo 获取的打车数据采用了静态数据。在实际应用开发中，手表应从手机端获取数据，需要调用如下示例代码中的 FeatureAbility.subscribeMsg 接口，同时，手机端需要实现打车信息的推送功能。在 index.js 中，新增代码如下：
运行上述代码后，页面可左右滑动并可查看相应数据，效果如图 5 和图 6 所示。
■ 图 5 打车 Demo 运行效果图一
■ 图 6 打车 Demo 运行效果图二
版权声明: 本文为 InfoQ 作者【TiAmo】的原创文章。
原文链接:【http://xie.infoq.cn/article/7a9d9a52ec2801c0a4ed3ff80】。文章转载请联系作者。
有能力爱自己，有余力爱别人！ 2022-06-16 加入
还未添加个人简介
评论