The cause of

Recently, Hongmeng OS is very popular. In line with the mentality of the people who eat melons, I also want to see what hongmeng OS is like, which claims to be able to develop applications directly with JS. I have a little knowledge of Android and Flutter (learn how to write, write a demo level). I hope to learn the difference of js direct development through this study.

The preparatory work

  1. Installing the compiler

Open HUAWEI Hongmeng OS Developer Center – Development, scroll down to see the official HUAWEI DevEco Studio compiler download link:

Click Download Now, then unzip the installation when the download is complete.

The compiler is based on the IntelliJ platform, so the operation is similar to IDEA/AS and has almost no learning cost.

  1. Environment configuration

Needless to say, the basic NodeJS runtime environment needs to be configured. Other configuration information can be found in the Developer center – Documentation – Tools – Configuration Development environment.

Create a project

  1. New Hongmeng OS project

Note that you need to click On New Hongmon OS Project to create a project with a template. Clicking On New Project will create a new, empty project.

  1. Create an empty JS application

In parentheses after the application name, you can specify which language the template is being developed in. Make sure you choose the correct language.

Then fill in the application information and click Finish to create a project.

  1. Understand the role of project template files

The development folder in the template is the contents of the Entry/SRC folder, which is similar to the structure of the Node project. Then go to the JS development directory, which is the main/js directory.

  • Common is a public folder, where you should put public resources
  • I18n is the internationalization folder, which holds the text content of each locale
  • Pages is a page, consisting of HTML, CSS, and JS files
  • App.js is the entry file

When creating a Page, you are advised to right-click and select JS Page. In this way, routes can be automatically added to the config.json file.

Development and application

The overall writing feels similar to mainstream front-end frameworks, with no difficulty to get started, and the IDE tips are comprehensive, which is comfortable.

  1. HTML tags
Component type The major components
Based on the component Text, image, progress, rating, span, marquee, image-animator, Divider, Search, Menu, chart
Container components Div, list, list-item, stack, swiper, tabs, Tab-bar, Tab-content, list-item-group, refresh, dialog
Media components video
The canvas component canvas

2. Bidirectional binding

Bi-directional binding can use double curly braces ({{}}) directly, and some tag content and tag attributes are required to use double curly braces. Use $t to refer directly to the contents of the internationalized object.

  • A list of circulation
<! -- xxx.hml --><div class="array-container">
  <! -- div list rendering -->
  <! $idx = index; $idx = index;
  <div for="{{array}}" tid="id" onclick="changeText">
    <text>{{$idx}}.{{$item.name}}</text>
  </div>
  <! -- custom element variable name -->
  <div for="{{value in array}}" tid="id" onclick="changeText">    
    <text>{{$idx}}.{{value.name}}</text>
  </div>
  <! -- custom element variable, index name -->
  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
    <text>{{index}}.{{value.name}}</text>
  </div>
</div>
Copy the code
  • conditional

One is the ifelse syntax, which does not render when false; The other is show syntax, which renders but does not display when false.

<text if="{{show}}"> Hello-One </text>
<text elif="{{display}}"> Hello-Two </text>
<text else> Hello-World </text>

<text show="{{visible}}" > Hello World </text>
Copy the code
  • The template reference
<! -- template.hml -->
<div class="item"> 
  <text>Name: {{name}}</text>
  <text>Age: {{age}}</text>
</div>

<! -- index.hml -->
<element name='comp' src='.. /.. /common/template.hml'></element>
Copy the code

3. Event binding

Time binding is the same as native JS, with keyword binding methods such as onEvent. The official website gives the following time binding methods:

<! -- xxx.hml -->
<div>
  <! -- Bind events via '@' -->
  <div @click="clickfunc"></div>
  <! -- Bind events via 'on' -->
  <div onclick="clickfunc"></div>
  <! Bind event callbacks using event bubble mode. 5 + - >
  <div on:touchstart.bubble="touchstartfunc"></div>
  <! Bind event callbacks using event capture mode. 5 + - >
  <div on:touchstart.capture="touchstartfunc"></div>
  <! -- on:{event} is equivalent to on:{event}.bubble. 5 + - >
  <div on:touchstart="touchstartfunc"></div>
  <! -- Binds event callbacks, but prevents events from being passed up. 5 + - >
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <! -- Binds event callbacks, but prevents events from being passed down. 5 + - >
  <div grab:touchstart.capture="touchstartfunc"></div>
  <! -- grab:{event} is equivalent to grab:{event}.bubble. 5 + - >
  <div grab:touchstart="touchstartfunc"></div>
</div>
Copy the code

The on: Event and onEvent scripts in the IDE hint show no difference in actual use.

4. Route forwarding

Routing is done using the @system.router method:

  • The other page is displayed
// index.js
import router from '@system.router';

// Go to the Detail page
jumpToDetail(){
    router.push({
        uri:'pages/detail/detail'    // The route is in the config.json file})}Copy the code
  • Return to previous page
// detail.js
import router from '@system.router';

backToIndex(){
    router.back()
}
Copy the code
  1. Dom manipulation
  • Gets a DOM node

Bind to the label via ref, and then use $refs in JS to get the DOM

<! -- index.hml -->
<div class="container">
   <text ref="hello">hello</text>
</div>
Copy the code
const helloElement = this.$refs.hello; // Get the DOM element whose ref attribute is animator
Copy the code
  • Getting the parent component
const parent = this.$parent();
Copy the code
  • Getting a child component
<div class="container">
   <childComponent id = "childComponent"></childComponent>
</div>
Copy the code
const childComponent = this.$child('childComponent');
Copy the code
  1. The life cycle

The app.js file mentioned earlier has two special lifecycles that represent the creation and destruction of an application:

export default {
    onCreate() {
        console.info('AceApplication onCreate');
    },
    onDestroy() {
        console.info('AceApplication onDestroy'); }};Copy the code

In addition to these two, each page also has a lifecycle, and the website describes each lifecycle as follows:

attribute parameter The return value describe trigger
onInit There is no There is no Page initialization Triggered only once when page data initialization is complete.
onReady There is no There is no Page creation complete When the page is created, it fires only once.
onShow There is no There is no Page shows Triggered when the page is displayed.
onHide There is no There is no Page disappear Triggered when the page disappears.
onDestroy There is no There is no Page to destroy Triggered when the page is destroyed.
onBackPress There is no Boolean Return button action Triggered when the user clicks the back button. Returning true means that the page handles the return logic itself. Returning false means that the default return logic is used. Non-return values are treated as false.
onActive()5+ There is no There is no Page activation Triggered when the page is activated.
onInactive()5+ There is no There is no Page to suspend Triggered when the page is paused.
onNewRequest()5+ There is no There is no FA rerequest This callback is triggered when a new request is received while the FA is already started.
onStartContinuation()5+ There is no There is no See the link for details Distributed capability interface. See Distributed Migration for details.
onSaveData(OBJECT)5+ OBJECT There is no See the link for details Distributed capability interface. See Distributed Migration for details.
onRestoreData(OBJECT)5+ OBJECT There is no See the link for details Distributed capability interface. See Distributed Migration for details.
onCompleteContinuation(code)5+ code There is no See the link for details Distributed capability interface. See Distributed Migration for details.

The order in which the lifecycle interface of page A is called:

  • A: onInit() -> onReady() -> onShow() -> onActive()
  • B: onInactive() -> onHide()
  • A: onShow() -> onActive()
  • A: onBackPress() -> onInactive() -> onHide() -> onDestroy()
  • Hide the page to run in the background: onInactive() -> onHide()
  • Restore the page from running in background to foreground: onShow()

HarmonyOS SDK 2.1.1.21 refers to VERSION 5 of the API or above.

To debug the application

Debugging is divided into real machine and virtual machine, because I do not have hongmeng system mobile phone, so here only describes the virtual machine debugging method.

1. Obtain the VM

Click tools – Device Management in the top menu bar, and a preset VIRTUAL machine popover will pop up, as shown in the picture below:

When this window is opened for the first time, developers without login and real-name authentication cannot see the device list on the right. Therefore, you need to register a Huawei developer account and then perform real-name authentication. After the authentication is complete, go back to the IDE to exit and log in again (the authorization page that pops up here also needs to log in again) before the device list is displayed.

Select the device you want to run, click the run button on the right, and then run the project to see the virtual machine demo.

Note:

  1. There were no hot updates during development and you need to rerunning to see the effects of the changes.
  2. The virtual machine is a cloud phone, so there will be operation delays, blurred pictures and other problems.
  3. There is a limit on the use time of the cloud phone, and there is one hour countdown on the upper side.

conclusion

This document is recorded here, after further development will continue to update ~ welcome to pay attention to collection ~

Personal blog: encaik.gitee.io/