代码适配更多 Zepp OS 设备

开发者已经以一款设备为基准完成了小程序的开发，如何让其运行在更多已发布的 Zepp OS 设备上？

本文帮助开发者快速地将现有小程序代码适配到更多搭载 Zepp OS 的设备上。

Zepp OS 小程序在设计之初就考虑到了兼容性，无需开发者调整过多代码，对各个设备之间的差异部分进行适当处理即可，主要差异有：

• app.json 配置
• 屏幕差异
• 实体按键、表冠差异

app.json 配置

通过 app.json 小程序配置 中的 targets 字段，就可以对不同设备传入不同构建配置。

每一个 target 的键名可以随意命名，建议使用设备名来做命名，这个名称对应着小程序资源文件 /assets 目录下的子目录，可以参考 目录结构。

完整看一个例子，列举了 app.json 中的部分配置。

app.json

{
  // ...
  "targets": {
    "gtr-3-pro": {
      "module": {
        // ···
      },
      "platforms": [
        {
          "name": "gtr-3-pro",
          "deviceSource": 229
        },
        {
          "name": "gtr-3-prow",
          "deviceSource": 230
        }
      ],
      "designWidth": 480
    }
  }
}

这个小程序的部分目录结构

.
├── app.js
├── app.json
├── assets
│   ├── gtr-3-pro
│   │   ├── icon.png
│   │   └── image
│   │       └── logo.png
...

在这一份 targets 配置中，使用 gtr-3-pro 作为一个构建配置的键名，键名以设备名来命名，对应到 /assets 资源目录，与此设备相关的资源文件都放置在 /gtr-3-pro 子目录下。

比如 IMG 控件的参数中 src: 'image/logo.png' 在此 target 配置下对应的图片路径就是 /assets/gtr-3-pro/image/logo.png。

为什么同一款 GTR 3 PRO 设备的 deviceSource 会有多个，此问题可以不用关心，参考 设备基本信息 中的 deviceSource 填入即可。

下面进行一个实战，让此仅支持 GTR3 PRO 的小程序适配 GTR3 机型。

1.首先添加针对 GTR3 的 target 配置

app.json

{
  // ...
  "targets": {
    "gtr-3-pro": {
      "module": {
        // ···
      },
      "platforms": [
        {
          "name": "gtr-3-pro",
          "deviceSource": 229
        },
        {
          "name": "gtr-3-prow",
          "deviceSource": 230
        }
      ],
      "designWidth": 480
    },
    "gtr-3": {
      "module": {
        // ···
      },
      "platforms": [
        {
          "name": "gtr-3",
          "deviceSource": 226
        },
        {
          "name": "gtr-3w",
          "deviceSource": 227
        }
      ],
      "designWidth": 480
    }
  }
}

2.在 /assets 目录下建立以 target 键名为名称的文件夹，将资源文件放在其中

警告

建议：图片资源文件需要根据屏幕比例进行一个等比例缩放，才会有更好的显示效果

.
├── app.js
├── app.json
├── assets
│   ├── gtr-3
│   │   ├── icon.png
│   │   └── image
│   │       └── logo.png
│   └── gtr-3-pro
│       ├── icon.png
│       └── image
│           └── logo.png
...

不同屏幕适配

关于小程序适配不同屏幕，可以参考 屏幕适配。

实体按键，表冠逻辑适配

搭载 Zepp OS 的产品根据场景需要，会有不一样的实体按键数量，并且部分机型会配备数字表冠。关于按键的排布和命名可以参考 实体按键。

对于实体按键和表冠逻辑的适配，需要进行对应代码逻辑的调整，参考对应的按键事件和表冠事件 API 即可。