script 脚本 - 页面生命周期 - 《快应用框架》

生命周期接口

生命周期接口

页面生命周期

属性	类型	参数	返回值	描述	触发时机
onInit	Function	无	无	监听页面初始化	当页面完成初始化时调用，只触发一次
onReady	Function	无	无	监听页面创建完成	当页面完成创建可以显示时触发，只触发一次
onShow	Function	无	无	监听页面显示	当进入页面时触发
onHide	Function	无	无	监听页面隐藏	当页面跳转离开时触发
onDestroy	Function	无	无	监听页面退出	当页面跳转离开（不进入导航栈）时触发
onBackPress	Function	无	Boolean	监听返回按钮动作	当用户点击返回按钮时触发。返回 true 表示页面自己处理返回逻辑，返回 false 表示使用默认的返回逻辑，不返回值会作为 false 处理
onMenuPress	Function	无	无	监听菜单按钮动作	当用户点击菜单按钮时触发
onRefresh`1050+`	Function	Object	无	监听页面重新打开	1.当页面在manifest中 launchMode`1050+` 标识为'singleTask'时，仅会存在一个目标页面实例，用户多次打开目标页面时触发此函数。2.打开目标页面时在push参数中携带flag 'clearTask'，且页面实例已经存在时触发。该回调中参数为重新打开该页面时携带的参数。详见页面启动模式

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

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

自定义组件的生命周期 1050+

自定义组件，指的是通过语法引入的ViewModel组件

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

应用生命周期

onCreate()

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

参数

无

onDestroy()

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

参数

无

onError(Object) 1030+

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

参数

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

消息通道(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()