HarmonyOS Next开发学习手册——UI开发框架 (JS语法参考)

JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。

语法

支持ES6语法。

• 模块声明

使用import方法引入功能模块：

import router from '@ohos.router';

• 代码引用

使用import方法导入js代码：

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

对象

• 应用对象

属性	类型	描述
$def	Object	使用this.$app.$def获取在app.js中暴露的对象。

说明：
应用对象不支持数据绑定，需主动触发UI更新。

示例代码

// 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;
  }
}

• 页面对象

属性	类型	描述
data	Object/Function	页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。 data与private和public不能重合使用。
$refs	Object	持有注册过ref 属性的DOM元素或子组件实例的对象。示例见 获取DOM元素 。
private	Object	页面的数据模型，private下的数据属性只能由当前页面修改。
public	Object	页面的数据模型，public下的数据属性的行为与data保持一致。
props	Array/Object	props用于组件之间的通信，可以通过方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见 自定义组件 。
computed	Object	用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

方法

• 数据方法

方法	参数	描述
$set	key: string, value: any	添加新的数据属性或者修改已有数据属性。 用法：this.$set(‘key’,value)：添加数据属性。
$delete	key: string