屏幕适配

介绍

在 Zepp OS 3.x 版本中，我们推出了全新的屏幕适配解决方案，将屏幕特性进行了抽象，分为方屏、圆屏和手环条状屏幕。

在 app.json 中进行适配屏幕特性配置，并按照规屏幕适配规范中的约定进行编码，组织好布局文件与资源文件，小程序便可运行在对应屏幕形状的设备上，无需针对某款特定设备进行适配。

信息

此屏幕规范仅适用于 小程序配置 app.json V3 及以上版本

UI 设计基准

对于需要进行屏幕适配的小程序，开发者需要依据设计基准进行设计。

目前有如下设计基准：

1. 圆屏设计基准：480 x 480
2. 方屏设计基准：390 x 450
3. 手环条状屏幕设计基准：194 x 368

屏幕适配规范

适配规范包括三个部分

• 小程序配置 app.json 配置
• 布局文件
• 资源文件，主要包括图片资源

小程序配置 app.json

在 V3 版本的小程序配置 app.json 文件中，新增一个单独的构建目标 target

此 target 的 platforms 中包含了屏幕特性配置数组

在这个过程中，我们指定小程序需要支持哪些屏幕类型的设备，屏幕特性配置数组中配置几项，就需要维护几套对应的 js 布局文件

看一个例子：

{
  "platforms": [
    {
      "st": "r"
    },
    {
      "st": "s"
    },
    {
      "st": "b"
    },
    {
      "st": "r",
      "sr": "w466"
    }
  ]
}

st 的全称 Screen Type 代表屏幕类型

st 值	说明
r	圆形屏幕
s	方形屏幕
b	手环条状屏幕

sr 全称 Screen Resolution 代表屏幕分辨率，格式为 w<width>，其中 width 代表屏幕宽度，如 w480

回到案例，该屏幕特性配置数组代表该小程序支持 4 套布局方案，与四个独立的 js 布局文件相对应，接下来我们介绍布局文件

布局文件规范

app.json target 中的每一种屏幕特性配置，需要一个独立的布局文件与其对应，文件命名规则 [name].[config-qualifier].layout.js，文件名后缀约定 layout.js

符号	说明
name	文件名
config-qualifier	配置限定符

信息

配置限定符 config-qualifier 的命名规则:

sr 的值在前，随后是 st 的值，如果 st 和 sr 同时配置，使用 - 进行分隔

还是上文的例子，假定页面的文件名为 index.js

配置	config-qualifier 的值	layout 文件名	说明
{st: "r"}	r	index.r.layout.js	该布局文件对圆形屏幕设备生效
{st: "s"}	s	index.s.layout.js	该布局文件对方形屏幕设备生效
{st: "b"}	b	index.b.layout.js	该布局文件对手环条状屏幕设备生效
{st: "r", sr: "w466"}	w466-r	index.w466-r.layout.js	该布局文件对圆形且屏幕宽度为 466 px 的设备生效

在 index.js 中，约定使用这样的引用语句

// index.js
import { layout } from 'zosLoader:./[name].[pf].layout.js'

此语句在构建过程中会根据机型屏幕特点自动引入对应的 layout 文件。

提示

在编写布局相关代码时，所有与坐标相关的属性，都需要使用 @zos/utils 模块下的 px 函数进行处理

提示

页面文件对应的 layout 文件目录与页面文件存放目录一致

资源文件规范

每一种屏幕特性，对应着一套布局文件，同时也对应这一个独立的资源文件目录

以 index.js 文件为例，这个页面的布局文件需要使用配置限定符 config-qualifier 修饰，同时，资源文件目录也使用 config-qualifier 修饰

直接看一个例子，假设 app.json 中 target 字段的值为 common

• 页面逻辑
  • index.js
• 布局文件
  • index.r.layout.js
    • 对应资源文件目录 assets/common.r
  • index.s.layout.js
    • 对应资源文件目录名称 assets/common.s
  • index.b.layout.js
    • 对应资源文件目录名称 assets/common.b
  • index.w466-r.layout.js
    • 对应资源文件目录名称 assets/common.w466-r

完整示例

完整示例请参考 3.0 预览版小程序 calories 3.0-preview calories