The birth of Hongmeng

HarmonyOS is a new distributed operating system for the Internet of Everything; It implements a very lightweight MVVM pattern. A responsive system is implemented using a similar attribute hijacking technique to VUe2. The HONGmeng JS framework supports ECMAScript 5.1; The JS Runtime does not use V8, nor does it use jScore. Instead, I chose JerryScript. JerryScript is an ultra-lightweight JavaScript engine for the Internet of Things. Jerryscript is a JavaScript engine developed by Samsung to enable JavaScript developers to build iot applications. Iot devices have serious constraints on CPU performance and memory space. Therefore, Samsung designed the JerryScript engine, which can run on less than 64KB of memory, and all the code can be stored on less than 200KB of read-only storage (ROM). Speaking of which, I think as a front end, we should do something, such as write an APP on our Huawei watch, let him regularly ask you to apply facial mask; Or write a news APP, like Toutiao, where data can be faked;

Write a HarmonyOS

The first step

First of all go to the website to download DevEco Studio development tools, download address: developer.harmonyos.com/cn/develop/…

The second step

HarmonyOS provides two UI development frameworks for Feature Ability (FA) : the Java UI framework and the JS UI framework. We use the JS UI framework; After the selection, enter the code.

Create a new project selection template. There are many templates available, so let’s choose a simple JS template

The third step

Start coding, directory structure as shown below, we just need to create a new folder, and then create the page

When creating a page, the corresponding config.json configuration file is automatically updated without manual addition

"js": [
  {
    "pages": [
      "pages/index/index",
      "pages/index/details/details"
    ],
    "name": "default",
    "window": {
      "designWidth": 720,
      "autoDesignWidth": true
    }
  }
]
Copy the code

Take a look at the HTML code for our index page

<div class="container">
    <text class="text">
       Hello Word
    </text>
    <button class="button" type="capsule" value="Next" on:click="launch"></button>
</div>
Copy the code

Js code

import router from '@system.router'; export default { data: { title: "" }, onInit() { this.title = this.$t('strings.world'); {}, launch () router. Push ({uri: 'pages/index/details/details', / / specified must jump page params: {title: Here' 'Hi,}})}}Copy the code

CSS code

.container { flex-direction: column; justify-content: center; align-items: center; } .text{ font-size: 42px; } .button { width: 300px; height: 60px; background-color: #007dff; font-size: 40px; text-color: white; } @media screen and (device-type: tablet) and (orientation: landscape) { .title { font-size: 100px; } } @media screen and (device-type: wearable) { .title { font-size: 28px; color: #FFFFFF; } } @media screen and (device-type: tv) { .container { background-image: url(".. /.. /common/images/Wallpaper.png"); background-size: cover; background-repeat: no-repeat; background-position: center; } .title { font-size: 100px; color: #FFFFFF; } } @media screen and (device-type: phone) and (orientation: landscape) { .title { font-size: 60px; }}Copy the code

Is the familiar taste, hey hey! So far, we’ve done a simple application, and look at the results!

On the right is the real-time display effect of the development tool, careful friends should find that we wrote a set of code to adapt to the multi-terminal, to see the display effect on the watch

This effect is achieved because we configured it in the config.json configuration file

"deviceType": [
  "phone",
  "tv",
  "wearable",
  "tablet"
],
Copy the code

If you don’t have Huawei equipment, don’t be afraid, we have a real simulator, follow the following operations, you can see the real effect;

The fourth step

The code is done. Now it’s time to pack up and go online

It is more troublesome to release the application. Because of my simple example, I am sure that it will not be reviewed, so I am not going further.Developer.harmonyos.com/cn/docs/doc…

It’s all over now!