推荐|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. $a pp .$ 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	删除数据属性。用法： this.$delete(‘key’)：删除数据属性。

示例代码

// index.js
export default {
  data: {
    keyMap: {
      OS: 'OS',
      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
  }
}

公共方法

方法	参数	描述
$element	id: string	获得指定id的组件对象，如果无指定id，则返回根组件对象。用法： - this. $e l e m e n t (^{'} xx x^{'}) ：获得 i d 为 xxx 的组件对象。 < b r / > - t hi s .$ element()：获得根组件对象。
$rootElement	无	获取根组件对象。用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。
$root	无	获得顶级ViewModel实例。获取ViewModel 示例。
$parent	无	获得父级ViewModel实例。获取ViewModel 示例。
$child	id: string	获得指定id的子级自定义组件的ViewModel实例。用法： his.$child(‘xxx’) ：获取id为xxx的子级自定义组件的ViewModel实例。

事件方法

方法	参数	描述
$watch	data: string, callback: string	Function

观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。
用法：
this.$watch(‘key’, callback)|

页面方法

方法	参数	描述
scrollTo⁶⁺	scrollPageParam: ScrollPageParam	将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。

表1 ScrollPageParam⁶⁺

名称	类型	默认值	描述
position	number	-	指定滚动位置。
id	string	-	指定需要滚动到的元素id。
duration	number	300	指定滚动时长，单位为毫秒。
timingFunction	string	ease	指定滚动动画曲线，可选值参考：动画样式animation-timing-function 。
complete	() => void	-	指定滚动完成后需要执行的回调函数。

示例：

this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})

获取DOM元素

通过$refs获取DOM元素

// index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' }
    ]
  },
  handleClick() {
    const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
    const state = animator.getState();
    if (state === 'paused') {
      animator.resume();
    } else if (state === 'stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

通过$element获取DOM元素

// index.js
export default {
  data: {
    images: [
      { src: '/common/frame1.png' },
      { src: '/common/frame2.png' },
      { src: '/common/frame3.png' }
    ]
  },
  handleClick() {
    const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
    const state = animator.getState();
    if (state === 'paused') {
      animator.resume();
    } else if (state === 'stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};

获取ViewModel

根节点所在页面：




  
    {{text}}

// root.js
export default {
  data: {
    text: 'I am root!',
  },
}

自定义parent组件：




  parent component click
  hello parent component!

// 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("parent component get child function");
    console.info(`${this.$child('selfDefineChild').childClicked()}`);
  },
}

自定义child组件：



  child component clicked
  hello child component

// child.js
export default {
  data: {
    isShow: false,
    text: 'I am 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}');
  },
}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。