开启掘金成长之旅!这是我参与「掘金日新计划 · 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文件
2、 全局globalData
getApp() 函数用于获取当前应用实例,一般用于获取globalData 。
- 不要在定义于
App()内的函数中,或调用App前调用getApp(),可以通过this.$scope获取对应的app实例
3、全局样式
页面调用接口
#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)
触发全局的自定义事件。附加参数都会传给监听器回调。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| OBJECT | Object | 触发事件携带的附加参数 |
代码示例
uni.$emit('update',{msg:'页面更新'})
uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
代码示例
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
代码示例
uni.$once('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$off([eventName, callback])
移除全局自定义事件监听器。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | Array<String> | 事件名 |
| callback | Function | 事件的回调函数 |
Tips
-
如果没有提供参数,则移除所有的事件监听器;
-
如果只提供了事件,则移除该事件所有的监听器;
-
如果同时提供了事件与回调,则只移除这个回调的监听器;
-
提供的回调必须跟
$on的回调为同一个才能移除这个回调的监听器; 注意事项 -
uni.$emit、uni.$on、uni.$once、uni.$off触发的事件都是App全局级别的,跨任意组件,页面,nvue,vue等 -
使用时,注意及时销毁事件监听,比如,页面
onLoad里边uni.$on注册监听,onUnload里边uni.$off移除,或者一次性的事件,直接使用uni.$once监听