# script 脚本

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

# 语法

支持 ES6 语法

# 模块声明

可以通过 import 引入功能模块，在代码中调用模块方法（具体参看接口部分文档说明）

import fetch from '@system.fetch'
1

# 代码引用

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

import utils from '../Common/utils.js'
1

注意： 快应用环境不是 node 环境，不要引用 node 原生模块，如 import fs from 'fs'

# 对象

# 页面级组件

属性 类型 描述
data Object | Function 页面级组件的数据模型，能够转换为 JSON 对象；属性名不能以$或_开头, 不要使用 for, if, show, tid 等保留字
如果是函数，返回结果必须是对象，在组件初始化时会执行函数获取结果作为 data 的值
使用 data 方式声明的属性会被外部数据覆盖，因此存在一定安全风险。

# 自定义组件

属性 类型 描述
data Object | Function 自定义组件的数据模型，能够转换为 JSON 对象；属性名不能以$或_开头, 不要使用 for, if, show, tid 等保留字
如果是函数，返回结果必须是对象，在组件初始化时会执行函数获取结果作为 data 的值
props Array | Object 定义组件外部可传入的所有属性；属性名不能以$或_开头, 不要使用 for, if, show, tid 等保留字
在模板代码中，请使用短横线分隔命名代替驼峰命名。如，属性定义 props: ['propA']，可通过<tag prop-a='xx'>方式传递到组件内部
支持 prop 验证

# 公共对象

属性 类型 描述
$app Object 应用对象
$page Object 页面对象
$valid Boolean 页面对象是否有效
$canIUse Boolean 查看接口、组件是否支持

# 应用对象

可通过$app访问

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

# 能力查询 3+

在页面中可通过this.$canIUse访问

# 参数:

类型 描述
String 要查询的能力，格式见下方

# 返回值：

类型 描述
Boolean 查询的能力是否支持

# 入参格式

# 查询接口

// 查询feature下的方法是否支持
`@${featureName}.${method}`
// 查询某个feature是否支持
`@${featureName}`
1
2
3
4

示例

if (this.$canIUse('@system.router.push')) {
  // 可以使用方法@system.router.push
}
if (this.$canIUse('@system.router')) {
  // 可以使用@system.router接口
}
1
2
3
4
5
6

# 查询组件

type取值可以是'attr'、'style'、'method'，分别对应组件的属性、样式、方法。

// 查询组件下的属性、样式、方法是否支持
`${componentName}.${type}.${name}`
// 查询组件是否支持
`${componentName}`
1
2
3
4

示例

if (this.$canIUse('scroll')) {
  // 可以使用scroll组件
}
if (this.$canIUse('scroll.attr.scroll-x')) {
  // 可以使用scroll组件的scroll-x属性
}
1
2
3
4
5
6

# 方法

# 公共方法

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

# 事件方法

属性 类型 参数 描述
$watch Function data: String 属性名, 支持'a.b.c'格式，不支持数组索引
handler: String 事件句柄函数名, 函数的第一个参数为新的属性值，第二个参数为旧的属性值		 动态添加属性/事件绑定，属性必须在 data 中定义，handler 函数必须在<script>定义；当属性值发生变化时事件才被触发用法：this.$watch('a','handler')

# 应用方法

可通过$app访问

属性 类型 参数 描述
exit Function 无 退出快应用，结束应用生命周期。
调用方法：this.$app.exit()

# 页面方法

可通过$page访问，暂无

# 生命周期

# 页面生命周期

# onInit

监听页面初始化。当页面完成初始化时调用，只触发一次

# onReady

监听页面创建完成。当页面完成创建可以显示时触发，只触发一次

# 参数

无

# onShow

监听页面显示。当进入页面时触发

# 参数

无

# onHide

监听页面隐藏。当页面跳转离开时触发

# 参数

无

# onDestroy

监听页面退出。当页面跳转离开（不进入导航栈）时触发

# 参数

无

# onBackPress

监听返回按钮动作。当用户点击返回按钮时触发

# 参数

无

# 返回值
类型 描述
Boolean 返回 true 表示页面自己处理返回逻辑，返回 false 表示使用默认的返回逻辑，不返回值会作为 false 处理；
注意：该函数不支持声明为异步函数（即：使用async标识），因为返回值代表界面要立即响应用户操作；

# onRefresh

监听页面重新打开。

1.当页面在 manifest 中 launchMode 标识为'singleTask'时，仅会存在一个目标页面实例，用户多次打开目标页面时触发此函数。
2.打开目标页面时在 push 参数中携带 flag 'clearTask'，且页面实例已经存在时触发。
该回调中参数为重新打开该页面时携带的参数。
详见页面启动模式

# 参数
参数名 类型 描述
query Object 通过 deeplink、router.push 等接口传入的 uri 中 query 解析成的对象，或者 router.push 等接口传入的 params 对象

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

  • 打开页面 A：onInit() -> onReady() -> onShow()
  • 在页面 A 打开页面 B：onHide()
  • 从页面 B 返回页面 A：onShow()
  • A 页面返回：onBackPress() -> onHide() -> onDestroy()

# 自定义组件的生命周期

自定义组件，指的是通过 import 标签引入的 ViewModel 组件

属性 类型 参数 返回值 描述 触发时机
onInit Function 无 无 监听初始化 当数据驱动化完成时触发
onReady Function 无 无 监听模板创建完成 当模板创建完成时触发
onDestroy Function 无 无 监听组件销毁 当销毁时触发

# 应用生命周期

# onCreate()

监听应用创建,应用创建时调用

# 参数

无

# onShow()

监听应用返回前台,应用返回前台时调用

# 参数

无

# onHide()

监听应用退到后台,应用退到后台时调用

# 参数

无

# onDestroy()

监听应用销毁,应用销毁时调用

# 参数

无

# onError(Object)

监听应用报错,应用捕获异常时调用

# 参数
参数名 类型 描述
message String 错误描述
stack String 调用栈

# app.ux 对象的属性

app.ux 对象指的是：开发者在app.ux中<script>节点内要导出的对象