华米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版本

就可以生成一个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

生命流程

请添加图片描述

大致上是如下结构

user
app.js
page_1.js
page_2.js
page_3.js
page_4.js
page_xxx.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)

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

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

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

ValueDescription
hmUI.event.MOVESlide
hmUI.event.CLICK_DOWNPress
hmUI.event.CLICK_UPLift up
hmUI.event.MOVE_INMove in
hmUI.event.MOVE_OUTMove 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这样的组件一定要提供出来,不然动态渲染效果就到这了,关于接口可用性的问题,后面小修小补应该能提升不少,平台可以再做好一点,沟通渠道太少,我其实还是比较期待这个平台能够走远一点,毕竟放眼全球,这么做的华米是第一个,问题可以慢慢改,后期也还有很大的空间可以优化。

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值