鸿蒙开发实例｜构建轻量级智能穿戴设备用户界面

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所示。

首先对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中搭建页面的基础布局结构，实现代码如下：
`<!—index.hml–>
<!—关联css文件中的.container样式代码块–>