Skip to main content
版本:v3

代码适配更多 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 即可。