Lightweight intelligent wearable development: development example

Update description of HarmonyOS application development document: the description of onHide is added in the life cycle to make it easier for developers to understand the life cycle; Take "dynamic style change" as an example to explain drawing styles and interactive events, so as to facilitate developers to understand the basic functions of lightweight development step by step.

catalogue

life cycle

Draw style

Inline style

Selector style

Dynamic binding style

Interactive event

life cycle

There are two main application life cycles: onCreate called when an application is created and onDestroy triggered when an application is destroyed.

There may be multiple pages in an application. A page generally includes onInit, onReady, onShow, onDestroy and other events that will trigger the call when the page is created, displayed and destroyed:

  • onInit: indicates that the data of the page is ready, and the data in the js file can be used.
  • onReady: indicates that the page has been compiled and the interface can be displayed to the user.
  • onShow: JS UI only supports applications running at the same time and displaying a page. When a page is opened, the previous page is destroyed. When a page is displayed, onShow will be called.
  • onHide: called when the page disappears.
  • onDestroy: called when the page is destroyed.

 

 

When the application jumps from page A to page B, first call the onDestroy function of page A. After page A is destroyed, call onInit, onReady and onShow functions of page B to initialize and display page B.

 

Draw style

stay Build layout In, you can already run the application and display the results. The component label is similar to "style="width:454px;height:454px; " The statement of is the style setting statement. Through the style, you can set the display size, background color, alignment and other properties of components. This chapter takes < div > and < text > components as examples to introduce how to set styles. There are three main styles: inline style, selector style and dynamic binding style. The styles set by the three methods have the same effect, but the writing methods are different.

Inline style

In line style is to put the style content directly into the style attribute of the component, and multiple style values are separated by semicolons. In the example, we can see that the div and text components have height and width attributes set through inline styles.

<div style="width: 454px; height: 454px;">
<text style="width: 200px; height: 100px;">

We can set some styles of the component so that the content of the text component is displayed in the middle of the screen.

<!-- set up div The sub components in the are elastic layout and displayed in the middle; ensure text The component is displayed in the middle of the screen.-->
<div style="width: 454px; height: 454px; display: flex; justify-content: center; align-items: center;"> 
<!-- set up text The text in the component is displayed in the center; ensure Hello World Displayed in the middle of the screen.-->
<text style="width: 200px; height: 100px; font-size: 30px; text-align: center;"> 

Selector style

Using inline styles has the following disadvantages:

  • Style each component.
  • If multiple components need to set the same style, each component writes the same style, resulting in code redundancy; Moreover, when modifying the style, you need to modify all the codes, which is a heavy workload.

To solve the above problems, we can use the selector style and write all the style codes to pages / index / index CSS file, and then associated with components through class, id, etc. Take the code in the above section as an example. The modified code is as follows:

/* index.css */
/* Class selector, which will be used by all components with class="container".*/
.container { 
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
/* ID Selector, the style used by the component whose id is title */
#title { 
    font-size: 30px;
    text-align: center;
    width: 400px;
    height: 100px;
    /* Set the text color to red */
    color: #ff0000; 
}
<!-- index.hml -->
<!-- relation index.css Medium.container Style code block -->
<div class="container"> 
    <!-- relation index.css Medium#title style code block -- >
    <text id="title"> 
        Hello World
    </text>
</div>

Dynamic binding style

stay Inline style and Selector style In, the style setting method is static, that is, the style set in code development cannot be changed when the program is running. This method limits the display effect of the program. If you want to change the style dynamically during the running of the program, you need to use the dynamic binding style. The so-called dynamic binding refers to the dynamic association between values and variables, which displays different effects with the change of values. The usage of dynamic binding is {{variable name}}, where the variable name is the attribute value of the data object in the js file. Currently, the dynamic binding style only supports binding inline styles.

In the following code, the font size of text is bound to the fontSize property in data, and the font color is bound to the fontColor property in data:

<!-- index.hml -->
<div class="container">
    <text class="title" style="font-size: {{fontSize}}; color: {{fontColor}};">
        Hello World
    </text>
</div>
// index.js:
export default  {
    data: {
        fontSize: '30px',
        fontColor: '#ff0000',
    },
}

Now that the style binding of font size and color has been completed, the next section of exchange event will introduce how to dynamically change the font style through the click event of the button.

 

Interactive event

Each component has some common events and unique events, in which developers can realize the functions and logic of the application. The format of adding events to the component is as follows:

<element onevent="eventAction">

Common component events are shown in the following table:

event

describe

click

Triggered when the component is clicked. See the following example for the usage method.

longpress

The component is triggered on time, and the use method is the same as click.

swipe

Triggered when the component slides quickly. For the usage method, see Application exit Chapter.

Take the onclick event of < input > component as an example to introduce the usage of the event. First, in index Add a < input > component to the HML file. The code example after adding is as follows:

<!-- index.hml -->
<div class="container">
    <text class="title" style="font-size: {{fontSize}}; color: {{fontColor}};">
        Hello World
    </text>
    <input type="button" value="Change" style="width: 200px; height: 50px;" onclick="clickAction"></input>
</div>

In the above code, a < input > component is added to the page, and the onclick event and its handler are also added to the component. clickAction is a Javascript function, which is implemented in pages / index / index JS file, the code example is as follows:

// index.js:
export default  {
    data: {
        fontSize: '30px',
        fontColor: '#ff0000',
    },
    clickAction() {
        this.fontSize = '38px';
        this.fontColor = '#ffffff';
    }
}

The function of clickAction is to click the button to change the font size and color.

Posted by Ryyo on Tue, 03 May 2022 22:58:28 +0300