harmony 鸿蒙JavaScript
JavaScript
You can use a .js file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running.
Syntax
The ECMAScript 6.0 syntax is supported. Lite wearables only support the following ECMAScript 6.0 syntax:
let/const
arrow functions
class
default value
destructuring assignment
destructuring binding pattern
enhanced object initializer
for-of
rest parameter
template strings
Module declaration Import functionality modules.
import router from '@ohos.router';
- Code reference Import JavaScript code.
import utils from '../../common/utils.js';
Objects
- Page objects
|Attribute |Type |Description |
|—–|—————|—————————————-|
|data|Object/Function|Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).
| |$refs|Object |DOM elements or child component instances that have registered the ref attribute. For an example, see Obtaining a DOM Element.|
Obtaining a DOM Element
Use $refs to obtain a DOM element.
<!-- index.hml -->
<div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div>
// index.js
export default {
data: {
images: [
{ src: '/common/frame1.png' },
{ src: '/common/frame2.png' },
{ src: '/common/frame3.png' },
],
},
handleClick() {
const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
const state = animator.getState();
if (state === 'paused') {
animator.resume();
} else if (state === 'stopped') {
animator.start();
} else {
animator.pause();
}
},
};
Lifecycle APIs
Page lifecycle APIs |Name |Type |Parameter|Return Value|Description |Triggered When | |———|——–|—-|—-|——|——————-| |onInit |Function|N/A |N/A |Listens for page initialization.|Page initialization is complete. This API is called only once in the page lifecycle.| |onReady |Function|N/A |N/A |Listens for page creation.|A page is created. This API is called only once in the page lifecycle. | |onShow |Function|N/A |N/A |Listens for page display.|The page is displayed. | |onHide |Function|N/A |N/A |Listens for page disappearance.|The page disappears. | |onDestroy|Function|N/A |N/A |Listens for page destruction.|The page is destroyed. |
The lifecycle APIs of page A are called in the following sequence:
Open page A: onInit() -> onReady() -> onShow()
Open page B on page A: onHide() -> onDestroy()
Go back to page A from page B: onInit() -> onReady() -> onShow()
Exit page A: onHide() -> onDestroy()
Hide page A: onHide()
Show background page A on the foreground: onShow()
Application lifecycle APIs |Name |Type |Parameter|Return Value|Description|Triggered When | |———|——–|—-|—-|—-|———| |onCreate|Function|N/A |N/A |Listens for application creation.|The application is created.| |onDestroy|Function|N/A |N/A |Listens for application exit.|The application exits.|
你可能感兴趣的鸿蒙文章
harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦