script脚本

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

语法

支持ES6语法

模块声明

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

import fetch from "@system.fetch"

也可以一次引入所有的模块,例如

import system from "@system"

在代码中使用system.network来调用接口方法

代码引用

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

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

对象

页面级组件

属性 类型 描述
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内定义的属性不允许被覆盖

自定义组件

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

prop验证 1010+

在自定义组件中,可将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>

公共对象

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

应用对象

可通过$app访问

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

页面对象

可通过$page访问

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

方法

数据方法

属性 类型 参数 描述
$set Function key: String
value: Any
添加数据属性,用法:this.$set('key',value) this.$vm('id').$set('key',value)
$delete Function key: String 删除数据属性,用法: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 更新ViewModel数据,可能会触发DOM操作,如:创建节点、更新节点、删除节点等;这些DOM操作不一定在数据更新时立即执行,而是在开发者的业务代码执行后触发;
若开发者期望数据更新时立即执行相应的DOM操作,可使用:this.$forceUpdate();一般不推荐使用

事件方法

属性 类型 参数 描述
$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')

应用方法 1010+

可通过$app访问

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

页面方法

可通过$page访问

属性 类型 参数 描述
setTitleBar Function text: String 标题栏文字
textColor: String 文字颜色
backgroundColor: String 背景颜色
backgroundOpacity 1000+: Number 背景透明度
menu 1000+: Boolean 是否在标题栏右上角显示菜单按钮
设置当前页面的标题栏用法:this.$page.setTitleBar({text:'Hello', textColor:'#FF0000', backgroundColor:'#FFFFFF', backgroundOpacity:0.5, menu: true})
finish 1010+ Function 从本页面退出,结束页面生命周期。
调用方法:this.$page.finish()

生命周期接口

页面生命周期

属性 类型 参数 返回值 描述 触发时机
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) 1000+

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

接口说明

在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();

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容