Zepp
华米在21年底发布新手表的时候,顺便推出了个人便携设备开发平台,但直到22年7月,这个开发平台才终于支持使用支付宝作为身份凭证,在这之前都只允许使用手持身份证作为个人注册的唯一通道,不知道华米是怎么想的,是我转手把照片一卖就能回本🤣。
开发
一通注册后,进入主页面可以找到需要的开发文档,虽然华米当时发布会上说是为了让前端开发者更快地开发,但实际操作下来我发现事情并不简单
开发环境
先说说开发环境,编译环境可以使用Zepp Studio或者 Zepp CLI, 窗体操作应该不差,但是命令行真香。
cli构建项目只需要在安装npm的情况下运行如下cmd
npm i @zeppos/zeus-cli -g
zeus create hello-world
zeus -version //用于查看cli版本
就可以生成一个hello-world 的demo项目
以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
生命流程
大致上是如下结构
多个页面可以相互通信和切换,每次切换都是一个销毁一个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...
表示连接上对应的模拟器,之后直接在模拟器上点击
即可看到模拟环境
虚拟环境主页面切换可以使用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)
测试了一下,能够基本实现需要的渲染效果,在不是非常复杂的场景下,帧率还是比较可观,至少不会是肉眼可见的那种卡顿,不过还是发现一些问题点
- 交互会影响渲染
- 全局组件(Toast)会影响渲染效果,取决于这个全局组件在画面上出现了多久。Toast在淡入和淡出都会导致比较严重的卡顿感。
上面提到的是类似页面自动渲染的动画效果,一般可以用在移动常用组件(buttom,text,image…)实现物体移动的效果。
但是如果需要操作的物体跟着用户的输入一起移动,目前可以通过对组件挂靠事件和监听用户输入(一般是click down,move,click up…)来实现,这点倒是比较类似前端的逻辑。
widget.addEventListener(eventId, callback)
Value | Description |
---|---|
hmUI.event.MOVE | Slide |
hmUI.event.CLICK_DOWN | Press |
hmUI.event.CLICK_UP | Lift up |
hmUI.event.MOVE_IN | Move in |
hmUI.event.MOVE_OUT | Move out |
一段让组件跟随手指移动而移动的代码如下 |
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)
})
测试效果还行,算比较跟手,可以实现飞船射击之类的游戏。
不过我在测试动态增删组件的时候,发现删除组件的接口貌似没有效果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这样的组件一定要提供出来,不然动态渲染效果就到这了,关于接口可用性的问题,后面小修小补应该能提升不少,平台可以再做好一点,沟通渠道太少,我其实还是比较期待这个平台能够走远一点,毕竟放眼全球,这么做的华米是第一个,问题可以慢慢改,后期也还有很大的空间可以优化。