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 '@system.router';
```
1
代码引用使用import方法导入js代码：
```
import utils from '../../common/utils.js';
```
1

对象

页面对象

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

1
2
3
4

// 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();
    }
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

生命周期接口

页面生命周期

属性	类型	参数	返回值	描述	触发时机
onInit	Function	无	无	页面初始化	页面数据初始化完成时触发，只触发一次。
onReady	Function	无	无	页面创建完成	页面创建完成时触发，只触发一次。
onShow	Function	无	无	页面显示	页面显示时触发。
onHide	Function	无	无	页面消失	页面消失时触发。
onDestroy	Function	无	无	页面销毁	页面销毁时触发。

页面A的生命周期接口的调用顺序：

打开页面A：onInit() -> onReady() -> onShow()
在页面A打开页面B：onHide() -> onDestroy()
从页面B返回页面A：onInit() -> onReady() -> onShow()
退出页面A：onHide() -> onDestroy()
页面隐藏到后台运行：onHide()
页面从后台运行恢复到前台：onShow()

应用生命周期

属性类型参数返回值描述触发时机

onCreate Function 无无应用创建当应用创建时调用。

onDestroy Function 无无应用退出当应用退出时触发。

JS语法参考

JS语法参考

语法

对象

获取DOM元素

生命周期接口

Description