HarmonyOS Next UI Framework: JavaScript Syntax Reference

JavaScript Syntax

JavaScript (JS) files are used to define the business logic for HML pages, supporting the ECMA JavaScript language standard. Leveraging JavaScript's dynamic capabilities allows applications to be more expressive and flexible in design. This section details the supported compilation and runtime features for JS files.

Supported Syntax

ES6 syntax is fully supported.

Module Declaration

Use the import statement to include functional modules:

import router from '@ohos.router';

Code Reference

Use the import statement to import other JS files:

import utils from '../common/utils.js';

Application Object

The application object provides access to data and methods defined in the global app.js file. It is accessed via this.$app.$def.

Property	Type	Description
`$def`	Object	An object exported from `app.js`, accessible via `this.$app.$def`.

Note: The application object does not support automatic data binding; UI updates must be manually triggered.

Example

app.js

export default {
  onCreate() {
    console.info('Application is starting');
  },
  onDestroy() {
    console.info('Application is closing');
  },
  config: {
    appTitle: 'MyApp',
    version: '1.0',
  },
  updateVersion() {
    console.info('Updating application version');
    this.config.version = '2.0';
  }
};

index.js (Page Logic)

export default {
  data: {
    localTitle: 'Local Page',
    localVersion: '1.5',
  },
  onPageLoad() {
    this.localTitle = this.$app.$def.config.appTitle;
    this.localVersion = this.$app.$def.config.version;
  },
  triggerGlobalUpdate() {
    this.$app.$def.updateVersion();
  },
  refreshVersion() {
    this.localVersion = this.$app.$def.config.version;
  }
};

Page Object

The page object represents the current page's context and contains various properties for managing its state and behavior.

Property	Type	Description
`data`	Object/Functon	The page's data model. Can be an object or a function that returns an object. Property names cannot start with `$` or `_`, and reserved words like `for`, `if`, `show`, `tid` are prohibited. Cannot be used with `private` or `public`.
`$refs`	Object	Holds DOM elements or child component instances that have registered a `ref` attribute.
`private`	Object	A data model for the page where properties can only be modified by the current page.
`public`	Object	A data model for the page whose behavior is consistent with `data`.
`props`	Array/Object	Used for communication between components. Property names must be lowercase and cannot start with `$` or `_`, or use reserved words. Current, the `Function` type is not supported.
`computed`	Object	Properties that are processed before being read or set. The results of computed properties are cached. Property names cannot start with `$` or `_`, and reserved words are prohibited.

Data Manipulation Methods

The following methods are available for managing data properties on the page object.

Method	Parameters	Description
`$set`	key: string, value: any	Adds a new data property or updates an existing one. Usage: `this.$set('key', value)`.
`$delete`	key: string	Deletes a data property.

Tags: HarmonyOS ArkUI javascript ApplicationObject PageObject

Posted on Tue, 15 Sep 2026 16:30:15 +0000 by vitorjamil

Freaks City