点击登录

问答 需要 Mi Band 7 Applet & WatchFace 开发工具

ArnabXero

Lv.8
社区会员
你好,我是一名来自海外的软件工程师。我已经为其他智能手表和智能手环开发了表盘。现在想给小米手环7开发小程序、游戏和表盘,但是网上找不到开发工具。任何人都可以为我提供任何官方或非官方的工具来开发表盘和小程序吗?



我在这个社区看到了一些很棒的开发人员,他们为这个乐队开发了很棒的游戏和小程序,例如“@GiveMeFive”。



请为我提供小米手环 7 的表盘和小程序开发工具。

..............................

hello, I am a software engineer from Outside china. I have been developed watch faces for other smartwatches and smartbands. Now I want to develop applet, games and watchfaces for mi band 7. But I can't find any development tools online. Can Anyone provide me any official or unofficial tools to develop watchfaces and applets ?

I have seen some amazing developers here in this community who develop amazing games and applets for this band, such as "@GiveMeFive".
 
本教程仅大致讲解了开发一个小米手环7小程序并将其安装到手环上的整体流程,并不涉及到详细的程序开发的内容

有关 Zepp OS
Zepp OS 是华米开发的一个 RTOS,运行在手表、手环等设备上。
最新发布的小米手环7 / 7NFC 搭载的就是由华米研发的 Zepp OS。相比与之前小米手环搭载的 RTOS,Zepp OS 提供了更多的功能,同时支持 安装应用程序

为 Zepp OS 编写应用程序
为小米手环7编写程序,本质上就是为 Zepp OS 编写应用程序。
实际上,华米官方提供了 Zepp OS 应用程序的 开发文档 ,但是因为某些原因,在 搭载Zepp OS设备的列表 中,并没有看见小米手环7的身影,这将为后续的开发带来一些阻碍,但是作者会在下文给出解决办法。

配置开发环境
华米为 Zepp OS 开发的开发工具称为 Zeus ,可以在Zepp OS 的 Zeus CLI 文档 中找到并下载。

按照官方给定的操作下载并配置完成后,在终端输入 zeus 将输出这样的内容:
代码:
$ zeus
Usage: zeus <command> [args?]

Commands:
  main.js init                  Init a new project in current directory.
  main.js create <projectName>  Named the <projectName> project and add to the
                                current directory.
  main.js login                 Login to your account.
  main.js logout                Sign out of your account.
  main.js dev                   Run this project in development mode.
  main.js preview               Preview this project in your device.
  main.js build                 Build this project for production.
  main.js status                View information such as login and emulator
                                connection status.
  main.js bridge                Connect the online App or Simulator for
                                development and debugging.
  main.js config                Operation config value.
                                e.g.
                                set <key>=<value> [<key>=<value> ...]
                                get <key> [<key> ...]
                                delete <key> [<key> ...]
                                list [--json]

Base Options
  -h, --help     Display help information.                             [boolean]
  -v, --version  Display version number.                               [boolean]

For more information, see https://docs.zepp.com/

A command is required. Pass --help to see all available commands and options.
安装 VSCode 插件 (可选)
安装 VS Code 插件的好处在于可以方便地在编辑器内进行调试操作。
VSC

VSC


安装模拟器
想要调试编写的小程序有两种办法,一种是直接安装在手表/手环上运行,另一种是在开发设备上运行 Zepp OS 模拟器进行调试,显然后者是更为方便的选择。
按照 官方文档 安装配置完成 simulator 之后,打开模拟器将出现如下界面:
simulator

第一次安装模拟器需要安装 Zepp OS 映像:
downloads

可以发现并没有找到小米手环7的设备名 Smart Band 7 ,看起来官方并没有打算让用户为小米手环7开发应用程序。这里我们可以选择 GTR 3 Pro v1.0.0 作为临时调试系统使用,等到构建项目的时候再使用小米手环7的构建配置。

编写并调试程序
配置完开发环境和模拟器之后,就可以着手开发程序了。由于篇幅有限,本文就不讲有关小程序设计的内容了,具体的开发文档可以查阅 Zepp OS 官方文档 ,本部分重点聊如何调试程序。

这里只讲作者自己的程序调试方式,还有很多便利的调试方式等大家探索。

进行调试之前,首先将模拟器打开,选择下载好的 Zepp OS 映像,单击 Simulator Zepp OS 仿真程序。
click

emulator


接下来是设置 Zeus 调试器:

Zeus 提供了一个类似 watchdog 的调试机制,当以
代码:
$ zeus dev
的方式运行 zeus 之后,将会进入到 zeus 的侦察调试模式(这名是作者自己取的):
代码:
$ zeus dev

╭──────────────────────────────────────────────────────╮
│                                                      │
│               New version available!                 │
│   Changelog: https://api.huami.com/t/zeus-cli-doc    │
│   Run `npm install @zeppos/zeus-cli -g` to update!   │
│                                                      │
╰──────────────────────────────────────────────────────╯

? simulator host (127.0.0.1): (127.0.0.1)
这里将询问调试的 IP 地址,一般直接选择默认即可(按下回车键即可)。接下来 zeus 将检查项目目录,搜索是否有多个构建目标,若有,则会进行下面的提示,使用方向键选择构建目标,按下回车进行下一步操作,若只有一个构建目标,则不会进行下面的提示。
prompt

当完成选择之后,就可以进行侦察调试了。
debug

所谓侦察调试,就是 zeus 将监视整个开发目录,当项目内的文件发生改动,则会重新构建项目,并刷新仿真器,重新运行程序:
vsc

(在 vscode 中开启侦察调试模式)
btn

(开启/停停止侦察调试模式的按钮)

构建应用
zeus 使用如下命令进行应用程序:
代码:
zeus build
前面提到,zeus 将根据构建配置文件来构建应用程序 (虽然使用如 GTR 3 Pro 的配置文件构建出来的程序可以在小米手环上运行,但是会出现一些兼容性问题) ,而官方并未公布小米手环7相关的构建配置,因此我们需要自己寻找。

小米手环7 应用程序结构
为了铺垫下面的内容,这里简单插入讲一下小米手环7的应用程序结构。
首先,无论是表盘还是应用程序,在 Zepp OS 中都具有相似的结构。当我们拿到一个表盘或应用程序的文件的时候,可以发现其一般以 bin 作为后缀,实际上这是一个压缩文件,可以用类似 winrar, unzip 这样的工具解压。

例如,某个官方的表盘文件解压后得到如下的目录结构:
代码:
.
├── app.bin
├── app.js
├── app.json
├── assets
│   ├── 1.png
│   ├── 10.png
│   ├── 11.png
│   ├── 12.png
│   ├── 13.png
         (...)
│   ├── 88.png
│   ├── 89.png
│   ├── 9.png
│   └── 90.png
└── watchface
    └── smart-band-7
        ├── index.bin
        └── index.js
如下是某个小程序解压之后的目录结构:
代码:
│  app.bin
│  app.json
│
├─assets
│      icon.png
│
└─page
        detail.bin
        index.bin
其中 app.json 内包含了应用程序的配置文件,一般是这样的:
JSON:
{
  "configVersion": "v2",
  "app": {
    "appId": 25394,
    "appName": "课程表",
    "appType": "app",
    "version": {
      "code": 1,
      "name": "1.0.1"
    },
    "icon": "icon.png",
    "vender": "Laomo",
    "description": "schedule for college students"
  },
  "permissions": [],
  "runtime": {
    "apiVersion": {
      "compatible": "1.0.0",
      "target": "1.0.1",
      "minVersion": "1.0.0"
    }
  },
  "targets": {
    "480x480-gtr-3-pro": {
      "module": {
        "page": {
          "pages": [
            "page/index",
          ]
        }
      },
      "platforms": [
        {
          "name": "gtr3-pro",
          "deviceSource": 229
        },
        {
          "name": "gtr3-pro-w",
          "deviceSource": 230
        }
      ],
      "designWidth": 480
    }
  },
  "i18n": {
    "zh_CN": {
      "appName": "课程表"
    }
  },
  "defaultLanguage": "zh_CN"
}

这个文件在执行 zeus create 的时候就被创建出来了,里面的大部分内容如 appName , description 都可以按需更改。而我们所要更改的构建配置文件则在 "targets" 中:
JSON:
  "targets": {
    "480x480-gtr-3-pro": {
      "module": {
        "page": {
          "pages": [
            "page/index",
          ]
        }
      },
      "platforms": [
        {
          "name": "gtr3-pro",
          "deviceSource": 229
        },
        {
          "name": "gtr3-pro-w",
          "deviceSource": 230
        }
      ],
      "designWidth": 480
    }
  },
我们需要在这里填入小米手环7的 target 配置。在对官方表盘的解包中,我们得到了这样的配置:
JSON:
    "platforms": [
        {
            "name": "smart-band-7",
            "deviceSource": 260
        },
        {
            "name": "smart-band-7",
            "deviceSource": 261
        },
        {
            "name": "smart-band-7",
            "deviceSource": 262
        },
        {
            "name": "smart-band-7",
            "deviceSource": 263
        },
        {
            "name": "smart-band-7",
            "deviceSource": 264
        },
        {
            "name": "smart-band-7",
            "deviceSource": 265
        },
        {
            "name": "smart-band-7",
            "deviceSource": 266
        }
    ],
这段配置文件是来自构建后的bin文件的,构建过程中,zeus 对 app.json 文件进行了修改,因此若需要将这段配置应用到我们的 app.json ,需要进行更改,更改后得到下面的内容:
JSON:
    "smart-band-7": {
      "module": {
        "page": {
          "pages": [
            "page/index",
          ]
        }
      },
      "platforms": [
        {
            "name": "smart-band-7",
            "deviceSource": 260
        },
        {
            "name": "smart-band-7",
            "deviceSource": 261
        },
        {
            "name": "smart-band-7",
            "deviceSource": 262
        },
        {
            "name": "smart-band-7",
            "deviceSource": 263
        },
        {
            "name": "smart-band-7",
            "deviceSource": 264
        },
        {
            "name": "smart-band-7",
            "deviceSource": 265
        },
        {
            "name": "smart-band-7",
            "deviceSource": 266
        }
      ],
      "designWidth": 192
    }

将这段配置文件加入到 app.json 中,得到下面的文件:
JSON:
{
  "configVersion": "v2",
  "app": {
    "appId": 25394,
    "appName": "课程表",
    "appType": "app",
    "version": {
      "code": 1,
      "name": "1.0.1"
    },
    "icon": "icon.png",
    "vender": "Laomo",
    "description": "schedule for college students"
  },
  "permissions": [],
  "runtime": {
    "apiVersion": {
      "compatible": "1.0.0",
      "target": "1.0.1",
      "minVersion": "1.0.0"
    }
  },
  "targets": {
    "480x480-gtr-3-pro": {
      "module": {
        "page": {
          "pages": [
            "page/index",
          ]
        }
      },
      "platforms": [
        {
          "name": "gtr3-pro",
          "deviceSource": 229
        },
        {
          "name": "gtr3-pro-w",
          "deviceSource": 230
        }
      ],
      "designWidth": 480
    },
    "smart-band-7": {
      "module": {
        "page": {
          "pages": [
            "page/index",
          ]
        }
      },
      "platforms": [
        {
            "name": "smart-band-7",
            "deviceSource": 260
        },
        {
            "name": "smart-band-7",
            "deviceSource": 261
        },
        {
            "name": "smart-band-7",
            "deviceSource": 262
        },
        {
            "name": "smart-band-7",
            "deviceSource": 263
        },
        {
            "name": "smart-band-7",
            "deviceSource": 264
        },
        {
            "name": "smart-band-7",
            "deviceSource": 265
        },
        {
            "name": "smart-band-7",
            "deviceSource": 266
        }
      ],
      "designWidth": 192
    }
  },
  "i18n": {
    "zh_CN": {
      "appName": "课程表"
    }
  },
  "defaultLanguage": "zh_CN"
}
至此,我们在进行 zeus build 的时候,选择 smart-band-7 就可以构建了。

但是! 这样构建会出现图标丢失的问题,原因在于我们选择了smart-band-7 这个 target,而我们的 assets/ 文件夹中并不存在属于 smart-band-7 的文件夹,只需要在 assets 文件夹中添加 smart-band-7 文件夹,并将制作好的 icon.png 放入此文件夹中即可。

安装小程序

得到小程序文件

经过 zeus build 构建出来的文件存放在 dist/ 文件夹中,其中的 .zab 文件是 Zepp OS 应用程序的发布包,这个包包含了除主程序之外的其他内容,如小米手环7不支持的伴生服务。为了得到我们需要的应用程序文件,我们需要对此 .zab 进行解压,可以发现有 manifest.json 文件和一个 zpk 后缀的文件:
unzip

进一步解压 zpk 文件,得到下面两个文件:
unzip2

其中的 device.zip 就是我们需要的文件了。我们可以将其后缀改成 bin ,也可以不改(改的话可能更有逼格点吧)。

安装小程序
在得到我们的 device.zip 之后,就可以进行安装了。我们使用来自 米坛社区表盘自定义工具 进行应用程序安装。
wftool

请添加图片描述

可以通过蓝牙安装和替换表盘安装,以上两种安装方式在应用内部已经写清楚,这里就不多阐述了,

总结
以上就是小米手环7应用程序开发和安装的过程了。相信在小米手环使用了 Zepp OS 之后,会有越来越多有趣的应用程序出现,让小米手环的功能愈发强大。
 
手机可以使用MT管理器,电脑用vscode
 
hmm to develop apps and games or watchfaces there is not specific software. To become a developer of mi band 7 you have to know JavaScript and sometimes JSON. Vs code is also good for quiet good for making games and watchfaces. Check out zepp os docs to get a full flashed documentation.

thanks for joining mi tan community ☺️
 

*这是一则由 Google AdSense 自动推荐的广告,与本站无关,不对其真实性与可靠性负责

相似主题

米环7小程序
7K
37

Home 首页
Home 资源
News 发现
Account 我的
顶部