Xiaomi Mi Band 7 Independent Mini Program Development Tutorial

 These days, the Xiaomi bracelet is very popular. Thanks to the small program upload tool, I can toss this device. After finding the relevant development tutorials and resources on the ZeppOS official website, I reversed the firmware of the bracelet by the way and found that it has a The set is a relatively complete QuickJS environment (the picture below is the js module loaded when the system is initialized in the firmware).

Because the development is relatively simple, the development environment can be found on its official website, so here is an introduction to how to develop.
First, attach the relevant link
ZeppOS API development documents.
To do the simulation development of the bracelet, you first need to install the simulator ( download address ), the simulator is based on queue Realization (in the process of tossing, and found that there seems to be a letter Shell, but I failed to interact successfully) detailed installation steps refer t: official website installation tutorial after the installation is complete, the running effect is as follows (remember to run as an administrator) in the entire development environment During the construction, the emulator must be installed. The later simulation will be operated by accessing the 127.0.0.1:7650 port of the machine because it is a necessary emulation environment, and then the programming environment can be configured. The official provides two One is the online Studio (actually the browser version of Visual Studio) ( online Studio tutorial ), and the other is the local compilation environment Zeus ( Zeus installation tutorial ), the detailed installation process can be configured according to the official website. Online Studio is very easy to use. Open the Studio URL and select Create Project, fill in the project name, select the Hello World example, click Create and you will see the directory structure as shown in the figure after the creation is complete.

Among them, the pages directory is the code of each page of the APP. The settings and app-side Xiaomi Mi Band 7 cannot be used, so just don’t worry about it (Zepp’s official development allows some codes to run on the phone, that is, settings and app-side, It is used as a bridge between the bracelet and the outside world, anyway, I understand it this way, but to use this, you need the developer mode of the Zepp app. The Zepp Life used by Xiaomi Mi Band 7 is a castrated version, which does not have this function) At this point we
try to Simulate the code, first start the simulator (simulator) and click the Simulator , and the following page will appear at this time Return to the online Studio, click the red circle to turn green to prove that you have connected to the simulator (Chrome is recommended here, sometimes Firefox’s CORS strategy It will affect the connection) Click the green triangle at this time, a prompt will appear in the lower right corner of the window and it will appear in the app of the emulator. At this time, return to the queue, click the screen with the mouse (the focus moves to qemu), and press the HOME key (here I have been stuck for nearly a day, and I have been stuck for a long time. I don’t know that the HOME button brings up the menu. I always thought there was something wrong with my environment. Now you can see our APP. Click on the APP, and you can see the content in the log window. Don’t ask me why the window is not displayed (black screen ), the question is to look at the source code, this example does not render the control at all, let's manually change the code and add a few lines.

JavaScript:

const text = hmUI.createWidget(hmUI.widget.TEXT, {
      x: 96,
      y: 120,
      w: 288,
      h: 46,
      color: 0xffffff,
      text_siz: 36,
      align_h: hmUI.align.CENTER_H,
      align_v: hmUI.align.CENTER_V,
      text_style: hmUI.text_style.NONE,
      text: 'HELLO NEKOKAMI'
    })

Changed to this, how to export the written code project after running once and successfully rendering the display? (Look at the picture, understand~?) After downloading, rename it to zip, decompress it and then decompress it. This device.zip is the package we want, and it can be run by directly uploading it to the bracelet with the app of the big guys.

---

It’s all here, so I don’t need to talk about it, geeks, let’s start working

, just pay attention, because the official simulation does not support Mi Band 7, so when designing controls, remember to limit the width. High ps: I chose the local ZEUS installation environment (sometimes there are bugs in the online environment, which cause compilation failures, but the online studio provides a code repository that can be saved online), and also supports vscode plug-ins. The detailed configuration process follows the official website tutorial. But, I won’t repeat it here