uni-app全局文件App.vue、应用生命周期、组件生命周期、页面通讯

186 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第34天,点击查看活动详情

  • 如果uni-app运行在web平台的话,那么是单进程单线程的,都运行在统一的webview里。
  • 但在小程序或者app中运行的话,uni-app逻辑层和渲染层是分离的。

全局文件App.vue

  • App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素,也就是没有<template>
  • 这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
  • 应用生命周期仅可在App.vue中监听,在页面监听无效。

1、 应用生命周期(这里的生命周期写在App.vue)相当于小程序的app.js文件

1.png

2、 全局globalData

getApp() 函数用于获取当前应用实例,一般用于获取globalData 。

  • 不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,可以通过 this.$scope 获取对应的app实例

3、全局样式

2.png

页面调用接口

#getApp()

getApp() 函数用于获取当前应用实例,一般用于获取globalData 。

实例

const app = getApp()
console.log(app.globalData)

注意:

  • 不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,可以通过 this.$scope 获取对应的app实例
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数。
  • 当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此提供了const app = getApp({allowDefault: true})用来获取原始的App对象,可以用来在首页对globalData等初始化

页面通讯

#uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

属性类型描述
eventNameString事件名
OBJECTObject触发事件携带的附加参数

代码示例

	uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

属性类型描述
eventNameString事件名
callbackFunction事件的回调函数

代码示例

	uni.$on('update',function(data){
		console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
	})

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。

属性类型描述
eventNameString事件名
callbackFunction事件的回调函数

代码示例

	uni.$once('update',function(data){
		console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
	})

uni.$off([eventName, callback])

移除全局自定义事件监听器。

属性类型描述
eventNameArray<String>事件名
callbackFunction事件的回调函数

Tips

  • 如果没有提供参数,则移除所有的事件监听器;

  • 如果只提供了事件,则移除该事件所有的监听器;

  • 如果同时提供了事件与回调,则只移除这个回调的监听器;

  • 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器; 注意事项

  • uni.$emituni.$onuni.$onceuni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvuevue

  • 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听

3.png