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 ES6 syntax is supported.
- Module declaration
Import functionality modules.
import router from '@ohos.router';
- Code reference
Import JavaScript code.
import utils from '../../common/utils.js';
Objects
- Application objects
|Name|Type|Description|
|——–|——–|——–|
|$def|Object|Object that is exposed in the app.js file and obtained by
this.$app.$def
.
> NOTE
> Application objects do not support data binding. Data update should be triggered on the UI.|
Example
// app.js
export default {
onCreate() {
console.info('Application onCreate');
},
onDestroy() {
console.info('Application onDestroy');
},
globalData: {
appData: 'appData',
appVersion: '2.0',
},
globalMethod() {
console.info('This is a global method!');
this.globalData.appVersion = '3.0';
}
};
// index.js
export default {
data: {
appData: 'localData',
appVersion:'1.0',
},
onInit() {
this.appData = this.$app.$def.globalData.appData;
this.appVersion = this.$app.$def.globalData.appVersion;
},
invokeGlobalMethod() {
this.$app.$def.globalMethod();
},
getAppVersion() {
this.appVersion = this.$app.$def.globalData.appVersion;
}
}
- Page objects
|Name|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 attribute name cannot start with a dollar sign ($) or underscore (). Do not use reserved words (for, if, show, and tid).
Do not use this attribute and private or public at the same time.| |$refs|Object|DOM elements or child component instances that have registered the ref attribute. For example code, see Obtaining a DOM element.| |private|Object|Data model of the page. Private data attribute can be modified only on the current page.| |public|Object|Data model of the page. Behaviors of public data attributes are the same as those of the data attribute.| |props|Array/Object|Used for communication between components. This attribute can be transferred to components via <tag xxxx=‘value’>. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see props.| |computed|Object|Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see props.|
Methods
- Data methods
|Name|Parameter|Description|
|——–|——–|——–|
|$set|key: string, value: any|Adds an attribute or modifies an existing attribute.
Usage:
this.$set(’key’,value): Add an attribute.| |$delete|key: string|Deletes an attribute.
Usage:
this.$delete(‘key’): Delete an attribute.|
Example
// index.js
export default {
data: {
keyMap: {
OS: 'OpenHarmony',
Version: '2.0',
},
},
getAppVersion() {
this.$set('keyMap.Version', '3.0');
console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0
this.$delete('keyMap');
console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
}
}
Public methods |Name|Parameter|Description| |——–|——–|——–| |$element|id: string|Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see Obtaining a DOM element.
Usage:<div id='_xxx_'></div>
- this.$element(’xxx’): Obtain the component whose ID is xxx.
- this.$element(): Obtain the root component.| |$rootElement|None|Obtains the root element.
Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms.| |$root|N/A|Obtains the root ViewModel instance. For example code, see Obtaining the ViewModel.| |$parent|N/A|Obtains the parent ViewModel instance. For example code, see Obtaining the ViewModel.| |$child|id: string|Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see Obtaining the ViewModel.
Usage:
this.$child(‘xxx’): Obtain the ViewModel instance of a custom child component whose ID is xxx.|Event methods |Name|Parameter|Description| |——–|——–|——–| |$watch|data: string, callback: string |Function|Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see props
Usage:
this.$watch(‘key’, callback)|Page methods |Name|Parameter|Description| |——–|——–|——–| |scrollTo6+|scrollPageParam: ScrollPageParam|Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance.|
Table 1 ScrollPageParam6+
Name | Type | Default Value | Description |
---|---|---|---|
position | number | - | Position to scroll to. |
id | string | - | ID of the element to be scrolled to. |
duration | number | 300 | Scrolling duration, in milliseconds. |
timingFunction | string | ease | Animation curve for scrolling. Available options: Animation Styles |
complete | () => void | - | Callback to be invoked when the scrolling is complete. |
Example
this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
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();
}
},
};
- Call
$element
to obtain a DOM element.
<!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="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.$element('animator'); // Obtain the DOM element whose ID is animator.
const state = animator.getState();
if (state === 'paused') {
animator.resume();
} else if (state === 'stopped') {
animator.start();
} else {
animator.pause();
}
},
};
Obtaining the ViewModel
The following shows files of the root page:
<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
<div class="container">
<text>{{text}}</text>
<parentComp></parentComp>
</div>
</div>
// root.js
export default {
data: {
text: 'I am a root!',
},
}
Customize the parent component.
<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
<text class="text-style" onclick="parentClicked">parent component click</text>
<text class="text-style" if="{{showValue}}">hello parent component!</text>
<childComp id = "selfDefineChild"></childComp>
</div>
// parent.js
export default {
data: {
showValue: false,
text: 'I am parent component!',
},
parentClicked () {
this.showValue = !this.showValue;
console.info('parent component get parent text');
console.info(`${this.$parent().text}`);
console.info("The parent component gets the child function.");
console.info(`${this.$child('selfDefineChild').childClicked()}`);
},
}
Customize the child component.
<!-- child.hml -->
<div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">Child component clicked</text>
<text class="text-style" if="{{isShow}}">Hello child component</text>
</div>
// child.js
export default {
data: {
isShow: false,
text: 'I am the child component!',
},
childClicked () {
this.isShow = !this.isShow;
console.info('child component get parent text');
console.info('${this.$parent().text}');
console.info('child component get root text');
console.info('${this.$root().text}');
},
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙Property Animation APIs
harmony 鸿蒙Property Animation Overview
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦