背景

随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。

定义及目标

定义 :一套代码工程,一次开发上架,多端按需部署。

目标 :支撑开发者快速高效的开发支持多种终端设备形态的应用,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验。

为了实现“一多”的目标,需要解决两个基础问题:

  • 不同设备间的屏幕尺寸、色彩风格等存在差异,页面如何适配。
  • 不同设备的系统能力有差异,如智能穿戴设备是否具备定位能力、智慧屏是否具备摄像头等,功能如何兼容。

一多下的页面开发适配 

1自适应布局

针对常见的开发场景,方舟开发框架提炼了七种自适应布局能力,这些布局可以独立使用,也可多种布局叠加使用

能力类别

使用场景

实现方式

拉伸能力

容器组件尺寸发生变化时,增加或减小的空间全部分配给容器组件内指定区域

Flex布局的flexGrow和flexShrink属性

均分能力

容器组件尺寸发生变化时,增加或减小的空间均匀分配给容器组件内所有空白区域

Row组件Column组件Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly

占比能力

子组件的宽或高按照预设的比例,随容器组件发生变化

基于通用属性的两种实现方式:
● 将子组件的宽高设置为父组件宽高的百分比
● layoutWeight属性

缩放能力

子组件的宽高按照预设的比例,随容器组件发生变化,且变化过程中子组件的宽高比不变

布局约束的aspectRatio属性

延伸能力

容器组件内的子组件,按照其在列表中的先后顺序,随容器组件尺寸变化显示或隐藏

基于容器组件的两种实现方式:
●通过List组件实现
●通过Scroll组件配合Row组件Column组件实现

隐藏能力

容器组件内的子组件,按照其预设的显示优先级,随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏

布局约束的displayPriority属性

折行能力

容器组件尺寸发生变化时,如果布局方向尺寸不足以显示完整内容,自动换行

Flex组件的wrap属性设置为FlexWrap.Wrap

2响应式布局

自适应布局可以保证窗口在一定范围内变化时,页面显示是正常的,但是如果窗口尺寸变化比较大的时候,仅依赖自适应布局有可能出现图片异常放大或者页面内容稀疏、留白过多等问题,此时就需要结合响应式布局调整页面结构。

响应式布局能力

简介

断点

将窗口宽度划分为不同的范围(即断点),监听窗口尺寸变化,当断点改变时同步调整页面布局。

媒体查询

媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征,当媒体特征发生改变时同步调整页面布局。

栅格布局

栅格组件将其所在的区域划分为有规律的多列,通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等,实现不同的布局效果。

一多下的系统能力适配 

从屏幕尺寸、输入方式及交互距离三个维度考虑,可以将常用类型的设备分为不同泛类:

  • 默认设备、平板
  • 车机、智慧屏
  • 智能穿戴
  • ……

什么是系统能力

系统能力(即SystemCapability,缩写为SysCap)指操作系统中每一个相对独立的特性,如蓝牙,WIFI,NFC,摄像头等,都是系统能力之一。每个系统能力对应多个API,随着目标设备是否支持该系统能力共同存在或消失。

如何适配系统能力

        方法1:使用canIUse接口判断设备是否支持某系统能力

if (canIUse("SystemCapability.Communication.NFC.Core")) {
   console.log("该设备支持SystemCapability.Communication.NFC.Core")
} else {
   console.log("该设备不支持SystemCapability.Communication.NFC.Core")
}

          方法2:通过import动态导入,配合try/catch

import controller from '@ohos.nfc.controller'
try {
    controller.enableNfc()
    console.log("controller enableNfc success")
} catch (busiError) {
    console.log("controller enableNfc busiError: " + busiError)
}

一多下的工程代码结构

一多模式下,官方推荐在开发过程中采用"三层工程架构",其实就是把项目拆分成不同类型的模块,再通过模块之间的引用组合,最终实现应用功能,拆分规范如下:
●common(公共能力层):用于存放公共基础能力合集,比如工具库,公共配置等
●features(基础特性层):用于存放应用中相对独立的各个功能的UI以及业务实现
●product(产品定制层):用于针对不同设备形态进行功能和特性集成,作为应用入口

/application
├── common                  # 可选。公共能力层, 编译为HAR包或HSP包
├── features                # 可选。基础特性层
│   ├── feature1            # 子功能1, 编译为HAR包或HSP包或Feature类型的HAP包
│   ├── feature2            # 子功能2, 编译为HAR包或HSP包或Feature类型的HAP包
│   └── ...
└── products                # 必选。产品定制层
    ├── wearable            # 智能穿戴泛类目录, 编译为Entry类型的HAP包
    ├── default             # 默认设备泛类目录, 编译为Entry类型的HAP包
    └── ...

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐