script 脚本

用来定义页面数据和实现生命周期接口

语法

仅支持以下 ES6 语法：

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

如需使用 Promise 需要下载第三方库 es6-promise，并在 app.ux 页面全局引入 参见文档

模块声明

可以通过 import 引入功能模块，在代码中调用模块方法

import fetch from '@system.fetch';

代码引用

JS 代码引用推荐使用 import 来导入, 例如：

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

公共方法

属性	类型	描述
$element	Function	获取指定 id 的组件 dom 对象，如果没有指定 id，则返回根组件 dom 对象用法：<template> <div id='xxx'></div> </template> this.$element('xxx') 获取 id 为 xxx 的 div 组件实例对象 this.$element() 获取根组件实例对象

获取 DOM 元素

通过$element 获取 DOM 元素

<template>
	<div class="container">
        <list id="list">
            <list-item for="{{todolist}}">
                <text>{{$item.title}}</text>
                <text>{{$item.date}}</text>
            </list-item>
        </list>
    </div>
</template>
<script>
	export default {
		data: {
            todolist: [{
              title: '上学',
              date: '2020-01-01 10:00:00',
            }, {
              title: '写作业',
              date: '2020-01-02 20:00:00',
            }],
        },
        onReady(){
        	const elem = this.$element('list');
        	// list滑动到指定index的item位置。
        	elem.scrollTo({
        		index: 1
        	});
        }
	}
</script>

全局对象

全局 JS 中存在 global 对象，类似浏览器中的 window 对象。

示例如下：

// app.ux
global.name = '小天才';

// index.ux
console.log(global.name);

应用对象

可通过 $app 访问

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

生命周期接口

生命周期示例代码 (opens new window)

页面生命周期

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

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

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

应用生命周期

属性	类型	参数	返回值	描述	触发时机
onCreate	Function	无	无	应用创建	当应用创建时调用。
onDestroy	Function	无	无	应用退出	当应用退出时触发。