鸿蒙5.0开发进阶：JS组件-JS语法

最新推荐文章于 2025-09-01 14:40:56 发布

原创最新推荐文章于 2025-09-01 14:40:56 发布 · 953 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #android #鸿蒙系统 #ArkUI #javascript #ArkTS

鸿蒙开发同时被 3 个专栏收录

1065 篇文章

订阅专栏

ArkUI

762 篇文章

订阅专栏

ArkTS

556 篇文章

订阅专栏

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

JS语法

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

语法

支持ES6语法。轻量级智能穿戴支持的ES6语法有限，仅支持以下ES6 语法：

let/const
arrow functions
class
default value
destructuring assignment
destructuring binding pattern
enhanced object initializer
for-of
rest parameter
template strings

模块声明

使用import方法引入功能模块：
```
import router from '@ohos.router';
```
代码引用

使用import方法导入js代码：
```
import utils from '../../common/utils.js';
```

对象

页面对象

属性	类型	描述
data	Object/Function	页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
$refs	Object	持有注册过ref 属性的DOM元素或子组件实例的对象。

获取DOM元素

通过$refs获取DOM元素

<!-- 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; // 获取ref属性为animator的DOM元素
    const state = animator.getState();
    if (state === 'paused') {
      animator.resume();
    } else if (state === 'stopped') {
      animator.start();
    } else {
      animator.pause();
    }
  },
};