华米Zepp小程序开发入门

Zepp

官网
开发文档
应用审核

华米在21年底发布新手表的时候，顺便推出了个人便携设备开发平台，但直到22年7月，这个开发平台才终于支持使用支付宝作为身份凭证，在这之前都只允许使用手持身份证作为个人注册的唯一通道，不知道华米是怎么想的，是我转手把照片一卖就能回本🤣。

开发

一通注册后，进入主页面可以找到需要的开发文档，虽然华米当时发布会上说是为了让前端开发者更快地开发，但实际操作下来我发现事情并不简单

开发环境

先说说开发环境,编译环境可以使用Zepp Studio或者 Zepp CLI, 窗体操作应该不差，但是命令行真香。

cli构建项目只需要在安装npm的情况下运行如下cmd

npm i @zeppos/zeus-cli -g
zeus create hello-world

zeus -version   //用于查看cli版本
1
2
3
4

就可以生成一个hello-world 的demo项目

studio开发方式请参考这里

以app开发为例
项目结构参考官网提供的资料

.
├── app-side // 伴生服务目录
│   └── index.js // 伴生服务逻辑，也是设置应用的入口文件（路径可以在 app.json 中配置）
├── setting // 设置应用目录
│   ├── i18n // 设置应用多语言目录
│   │   └── en-US.po
│   └── index.js // 设置应用逻辑，也是设置应用的入口文件（路径可以在 app.json 中配置）
├── app.js // 小程序逻辑
├── app.json // 小程序配置
├── assets // 不同设备的资源文件存放目录，以 app.json 中 targets 对象的键来命名
│   ├── gtr-3
│   │   ├── icon.png
│   │   └── image
│   │       └── logo.png
│   ├── gtr-3-pro
│   │   ├── icon.png
│   │   └── image
│   │       └── logo.png
│   └── gts-3
│       ├── icon.png
│       └── image
│           └── logo.png
├── page // 设备应用页面
│   ├── home // 设备应用 home 目录（推荐一个页面一个目录）
│   │   ├── index.page.js // 页面逻辑
│   │   └── index.style.js // 页面样式
│   └── i18n // 设备应用多语言目录
│       └── en-US.po
└── utils // 工具函数目录
    ├── constants.js
    ├── fs.js
    └── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

生命流程

大致上是如下结构

多个页面可以相互通信和切换，每次切换都是一个销毁一个page后init另一个page的过程，page通信可以参考Cross-Page Communications。

写完demo,测试可以直接使用cli工具来做，如果是在模拟机上运行，要先安装zepp对应的模拟器,进入页面后记得安装对应应用的布局

CLI工具的可以直接在项目根目录下cmd
zeus dev
有出现如下打印即可

info  connecting to simulator
success  simulator connected
info  rebuilding...
? Which target would you like to preview? gtr3-pro
info  rebuild done
info  refreshing simulator...
1
2
3
4
5
6

表示连接上对应的模拟器，之后直接在模拟器上点击

即可看到模拟环境

虚拟环境主页面切换可以使用fn+左键，相当于代替手表上按键的作用,便于测试包含历史记录的功能

其他的没啥好说的，模拟器需要安装的其他环境在官网上说很详细了，win版本基本安装完虚拟网卡软件后就随便耍了。

参考信息

开发方式

原本我以为会是类似html+js+css的开发模式，毕竟这样才最贴合前端开发者嘛，但实际我看到的是只有js+css配置文件的开发方式。任何dom开发元素都没有，很多接口也都做了客制化。

开发上，基本需要用js完成所有功能，一个类似css的配置文件(实际上会命名为index.style.js)之类的东西。

将就着用把，先测试了一下基本的前端动画需要的几个东西，首先截至2022/9/7，canvas 这个组件还没有，也没有类似立即触发页面刷新的接口(requestAnimationFrame 、setTimeout 和setInterval),目前为止只找到一个定时器可以实现类似功能,把代码写到回调函数里面，定时器支持ms级别的更新，我一般设置30ms刷新一次，相当于30fps

//Create timer, delay 500ms to trigger, then execute every 1000ms.
const timer1 = timer.createTimer(
  500,
  1000,
  function (option) {
    //callback
    console.log('timer callback')
    console.log(option.hour)
  },
  { hour: 0, minute: 15, second: 30 }
)

//Stop timer1
timer.stopTimer(timer1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

测试了一下，能够基本实现需要的渲染效果，在不是非常复杂的场景下，帧率还是比较可观，至少不会是肉眼可见的那种卡顿,不过还是发现一些问题点

1. 交互会影响渲染
2. 全局组件(Toast)会影响渲染效果，取决于这个全局组件在画面上出现了多久。Toast在淡入和淡出都会导致比较严重的卡顿感。

上面提到的是类似页面自动渲染的动画效果，一般可以用在移动常用组件(buttom,text,image…)实现物体移动的效果。
但是如果需要操作的物体跟着用户的输入一起移动，目前可以通过对组件挂靠事件和监听用户输入(一般是click down,move,click up…)来实现，这点倒是比较类似前端的逻辑。
widget.addEventListener(eventId, callback)

const strokeRect = hmUI.createWidget(hmUI.widget.STROKE_RECT, { ...My_stroke_rect })

strokeRect.addEventListener(hmUI.event.MOVE, (e) => {
    logger.debug("the move orbit x:"+e.x+",y:"+e.y)
    strokeRect.setProperty(hmUI.prop.X,e.x-110)
    strokeRect.setProperty(hmUI.prop.Y,e.y-75)
})
1
2
3
4
5
6
7

测试效果还行，算比较跟手，可以实现飞船射击之类的游戏。

不过我在测试动态增删组件的时候，发现删除组件的接口貌似没有效果hmUI.deleteWidget(widget),所以在设计第一个游戏的时候，到这里就格外费心思，在js里面，只需要把不用的组件设null或者干脆删除dom即可，但这里不行，zepp一些开发都需要依靠提供的接口，很大程度上最后能够呈现的效果和接口的可用性有关。

最后基于以上，3天抽空写了一个比较简单的应用，类似于Flappy Brid的玩法。效果如下

关于硬件

zepp在文档中专门列出了可以获取到的设备硬件相关的接口
设备传感器信息
里面提供了绝大部分可以使用的硬件，主要是涉及到健康信息的，这对于开发个人健康软件有一定帮助，在提供的接口列表里面，我没有找到我期待的一个传感器信息(陀螺仪),希望后期能够开放出来

蓝牙部分，我还没有细细研究，但就目前已经上架的应用，应该是能够实现手表直接操作第三方设备的效果，想想用手表直接操作无人机是什么画面🤣

其他接口

应该是为了便于开发者开发，zepp还是做了一些工作，比如经常用到一个手势识别功能目前可以直接调用到。

hmApp.registerGestureEvent(callback),关于手势识别，这里插一句，挂载的callback函数有一个返回值，当为false的时候会在手势操作结束后调用goback(),如果为true，则什么都不做。

If callback returns false, then hmApp.goBack() will be executed after the callback function finishes executing. If callback returns true, execution of hmApp.goBack() will be skipped

可以理解是为了避免在第一页面时，右划手势退出应用没有效果而设计的，但实际上我推荐把这里设置为true或者设计为干脆不需要返回，所有默认手势触发的结果都由开发者实现，这样更合理，也避免不必要的开发难度。


一个建议，zepp目前没有做键盘输入功能，手上刚好有gtr3pro，个人感觉是有足够的面积实现键盘功能的，但是官方没有提供，直接放弃了input的可能性。

demo

官方提供了几个demo
虽然都是静态应用，但很大程度上提供了一些实用的设计方式。

Calories->提供了如何将数据保存到设备上实现历史记录功能

ToDoList->提供了如何实现手机和手表设备间通讯

应用审核

我写完应用很快就提交了，截至投稿时还在走第二次审批的流程。
我不太理解为什么华米要在审核上做得如此简陋，审批结果是以一个图片加文字简述的反馈，告知开发者出了什么问题，除此之外就没有了，开发者无法知晓具体复现手法，复现概率，也无法直接和测试人员询问相关配置，debug全靠猜测，运气不好可能就直接卡死在最后一关。anyway,官方可能也需要时间去搭建吧，也能够理解。

总结

以上是华米zepp 小程序开发的一个简单的记录，代码只贴了很少一部分，对于想入门的同仁相当于提一个醒，后期我还会开发几款app，但目前看，这个平台其实是更适合开发静态应用，一些小的工具会比较合适。

写在最后，一个建议，canvas这样的组件一定要提供出来，不然动态渲染效果就到这了，关于接口可用性的问题，后面小修小补应该能提升不少，平台可以再做好一点，沟通渠道太少，我其实还是比较期待这个平台能够走远一点，毕竟放眼全球，这么做的华米是第一个，问题可以慢慢改，后期也还有很大的空间可以优化。