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

语法

---

支持 ES6 语法

模块声明

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

import fetch from "@system.fetch"

代码引用

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

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

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

对象

---

页面级组件

属性	类型	描述
data deprecated	Object | Function	页面级组件的数据模型，能够转换为 JSON 对象；属性名不能以$或_开头, 不要使用 for, if, show, tid 等保留字 如果是函数，返回结果必须是对象，在组件初始化时会执行函数获取结果作为 data 的值 使用 data 方式声明的属性会被外部数据覆盖，因此存在一定安全风险，推荐使用下面的 public,protected,private 来声明属性（注意：它们不能与 data 同时声明）
public 1000+	Object	页面级组件的数据模型，影响传入数据的覆盖机制：public 内定义的属性允许被传入的数据覆盖，如果外部传入数据的某个属性未被声明，在 public 中不会新增这个属性
protected 1000+	Object	页面级组件的数据模型，影响传入数据的覆盖机制：protected 内定义的属性，允许被应用内部页面请求传递的数据覆盖，不允许被应用外部请求传递的数据覆盖
private 1000+	Object	页面级组件的数据模型，影响传入数据的覆盖机制：private 内定义的属性不允许被覆盖
computed 1050+	Object	计算属性，属性名不能以$或_开头, 不要使用 for, if, show, tid 等保留字

自定义组件

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

prop 验证

在自定义组件中，可将 props 定义为带验证需求的对象。其中，key 为属性名，value 为属性对应的验证需求。验证失败则输出错误提示日志，增加 prop 验证有利于规范自定义组件的使用

定义：

属性	类型	描述
type 1010+	-	检查属性值的类型。支持单一类型和多种可能类型，可在原生和自定义构造函数中任意选择，单独或组合使用 原生构造函数：String | Number | Boolean | Function | Object | Array | Symbol 自定义构造函数
default 1010+	-	设置属性的默认值
required 1010+	Boolean	设置属性是否必填
validator 1010+	Function	设置自定义验证函数。若函数的返回值为真，则通过验证；否则验证失败

示例：

<script>
  export default {
    props: {
      // 单一类型检查的简写
      propA: Number,
      // 多种可能类型的简写
      propB: [String, Number],
      // 必填的字符串
      propC: {
        type: String,
        required: true
      },
      // 带默认值的数字
      propD: {
        type: Number,
        default: 100
      },
      // 带有默认值的对象
      propE: {
        type: Object,
        default () {
          return { message: 'hello' }
        }
      },
      // 自定义验证函数
      propF: {
        validator (value) {
          return value === 'hello'
        }
      }
    }
  }
</script>

计算属性 1050+

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 详细：计算属性将被混入到 Vm 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vm 实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

示例：

export default {
  data: {
    firstName: 'Quick',
    lastName: 'App'
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(value) {
        const names = value.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  },
  onReady() {
    console.log(this.fullName) // Quick App
    this.fullName = 'John Doe'
    console.log(this.firstName) // John
    console.log(this.lastName) // Doe
  }
}

公共对象

属性	类型	描述
$app	Object	应用对象
$page	Object	页面对象
$valid	Boolean	页面对象是否有效
$visible	Boolean	页面是否处于用户可见状态

应用对象

可通过$app访问

属性	类型	描述
$def	Object	使用this.$app.$def获取在app.ux中暴露的对象
$data	Object	使用this.$app.$data获取在manifest.json的config.data中声明的全局数据

页面对象

可通过$page访问

属性	类型	描述
action	String	获取打开当前页面的action。仅在当前页面是通过filter匹配的方式打开时有效，否则为undefined。参见manifest文件
uri	String	获取打开当前页面的uri。仅在当前页面是通过filter匹配的方式打开时有效，否则为undefined。参见manifest文件

方法

---

数据方法

属性	类型	参数	描述
$set	Function	key: String value: Any	添加数据属性，必须在onInit函数中使用，否则<template>中数据绑定无法生效用法：this.$set('key',value) this.$vm('id').$set('key',value)
$delete	Function	key: String	删除数据属性，如果在onInit函数中使用，会导致<template>中相应的数据绑定无法生效用法：this.$delete('key') this.$vm('id').$delete('key')

公共方法

属性	类型	参数	描述
$element	Function	id: String 组件id	获取指定id的组件dom对象，如果没有指定id，则返回根组件dom对象用法：<template> <div id='xxx'></div> </template> this.$element('xxx') 获取id为xxx的div组件实例对象 this.$element() 获取根组件实例对象
$root	Function	无	获取顶层ViewModel
$parent	Function	无	获取父亲ViewModel
$child	Function	id: String 组件id	获取指定id的自定义组件的ViewModel用法：this.$child('xxx') 获取id为xxx的div组件ViewModel
$vm deprecated	Function	id: String 组件id	请使用上面this.$child('xxx')替代
$rootElement deprecated	Function	无	请使用上面this.$element()替代
$forceUpdate	Function	无	强制页面刷新

事件方法

属性	类型	参数	描述
$on	Function	type: String 事件名 handler: Function 事件句柄函数	添加事件处理句柄用法：this.$on('xxxx', this.fn) fn是在<script>中定义的函数
$off	Function	type: String 事件名 handler: Function 事件句柄函数	删除事件处理句柄用法：this.$off('xxxx', this.fn) this.$off('xxx') 删除指定事件的所有处理句柄
$dispatch	Function	type: String 事件名	向上层组件发送事件通知用法：this.$dispatch('xxx')正常情况下，会一直向上传递事件（冒泡）如果要停止冒泡，在事件句柄函数中调用evt.stop()即可
$broadcast	Function	type: String 事件名	向子组件发送事件通知用法：this.$broadcast('xxx')正常情况下，会一直向下传递事件如果要停止传递，在事件句柄函数中调用evt.stop()即可
$emit	Function	type: String 事件名 data: Object 事件参数	触发事件，对应的句柄函数被调用用法：this.$emit('xxx') this.$emit('xxx', {a:1})传递的事件参数可在事件回调函数中，通过evt.detail来访问，例如evt.detail.a
$emitElement	Function	type: String 事件名 data: Object 事件参数 id: String 组件id (默认为-1 代表根元素)	触发组件事件, 对应的句柄函数被调用用法：this.$emitElement('xxx', null, 'id') this.$emitElement('xxx', {a:1})传递的事件参数可在事件回调函数中，通过evt.detail来访问，例如evt.detail.a
$watch	Function	data: String 属性名, 支持'a.b.c'格式，不支持数组索引 handler: String 事件句柄函数名, 函数的第一个参数为新的属性值，第二个参数为旧的属性值	动态添加属性/事件绑定，属性必须在data中定义，handler函数必须在<script>定义；当属性值发生变化时事件才被触发用法：this.$watch('a','handler')

页面方法

可通过$page访问

属性	类型	参数	描述
setTitleBar	Function	text: String 标题栏文字 textColor: String 文字颜色 backgroundColor: String 背景颜色 backgroundOpacity 正式版本可用: Number 背景透明度 menu 正式版本可用: Boolean 是否在标题栏右上角显示菜单按钮	设置当前页面的标题栏用法：this.$page.setTitleBar({text:'Hello', textColor:'#FF0000', backgroundColor:'#FFFFFF', backgroundOpacity:0.5, menu: true})

生命周期接口

---

页面生命周期

属性	类型	参数	返回值	描述	触发时机
onInit	Function	无	无	监听页面初始化	当页面完成初始化时调用，只触发一次
onReady	Function	无	无	监听页面创建完成	当页面完成创建可以显示时触发，只触发一次
onShow	Function	无	无	监听页面显示	当进入页面时触发
onHide	Function	无	无	监听页面隐藏	当页面跳转离开时触发
onDestroy	Function	无	无	监听页面退出	当页面跳转离开（不进入导航栈）时触发
onBackPress	Function	无	Boolean	监听返回按钮动作	当用户点击返回按钮时触发。返回true表示页面自己处理返回逻辑，返回false表示使用默认的返回逻辑，不返回值会作为false处理
onMenuPress	Function	无	无	监听菜单按钮动作	当用户点击菜单按钮时触发

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

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

应用生命周期

属性	类型	参数	返回值	描述	触发时机
onCreate	Function	无	无	监听应用创建	当应用创建时调用
onDestroy	Function	无	无	监听应用销毁	当应用销毁时触发

消息通道(BroadcastChannel) 正式版本可用

用来实现不同页面之间的相互通信。

接口说明

在BroadcastChannel的构造函数中,只支持接受一个参数,就是"频道名称"(channel name)

比如：

const test = new BroadcastChannel('channel')

BroadcastChannel 定义的接口如下：

declare interface BroadcastChannel = {
  name: string,
  postMessage: (message: any) => void;
  onmessage: (event: MessageEvent) => void;
  close: () => void;
}

消息对象（MessageEvent）的类型定义如下：

declare interface MessageEvent = {
  type: string, // "message"
  data: any
}

对参数的说明：

名称	类型	参数	描述
name	String	String:频道名称	频道名称,区分不同的消息频道(注意：不同频道之间不可通信)。
postMessage	Function	Object: 消息内容	用于在当前频道中广播消息。
onmessage	Function	Event:消息对象	订阅消息。在频道中接收到广播消息之后，会给所有订阅者派发消息事件。
close	Function	无	关闭当前的频道。

用法

假设在我们的应用中，有A、B、C三个页面

在页面 A 中：

const pageA = new BroadcastChannel('channel1')
pageA.postMessage('haha!')

在页面 B 中：

const pageB = new BroadcastChannel('channel1')

在页面 C 中：

const pageC = new BroadcastChannel('channel1')
pageC.onmessage = function (event) {
  console.log(event.data)
  pageC.postMessage('hello, i am here!')
}

这样,页面 A 、B 、C 都创建一个监听了 'channel1' 频道的 BroadcastChannel 对象，它们之间可以通过这个对象实现互相通信。

当 pageA 发布了 'haha!' 消息时，pageC 将收到一个消息事件，其 data 字段等于 'haha!'，然后也向频道中回复一条消息。注意：自己不会收到自己发的消息。

但是 pageB 并不会收到这些消息，因为他没有实现onmessage 方法，相当于没有接收频道中的消息，所以他实际上不是一个订阅者。

注意:在pageA销毁channel当前不与页面context进行上下文绑定，需要主动关闭消息通道，如下所示:

const pageA = new BroadcastChannel('tom')
pageA.close();