uniapp生命周期
2023-12-26 19:23:47
应用生命周期、页面生命周期走小程序的,组件生命周期走vue的
没写完别看!!!!
1、应用生命周期
onLaunch
:当uni-app初始化完成时触发(全局只触发一次),参数为应用启动参数,同uni.getLaunchOptionsSync
的返回值onShow
当 uni-app 启动,或从后台进入前台显示,参数为应用启动参数,同uni.getLaunchOptionsSync
的返回值onHide
当 uni-app 从前台进入后台onError
当 uni-app 报错时触发onUniNViewMessage
: 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯onUnhandledRejection
对未处理的Promise
拒绝事件监听函数onPageNotFound
页面不存在监听函数onThemeChange
监听系统主题变化onLastPageBackPress
最后一个页面按下Android back键
,常用于自定义退出onExit
监听应用退出
代码
<script>
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function(options) {
console.log('App Launch')
console.log('应用启动路径:', options.path)
},
onShow: function(options) {
console.log('App Show')
console.log('应用启动路径:', options.path)
},
onHide: function() {
console.log('App Hide')
},
onError:function(error){
console.log(error,111);
},
//对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯
onUniNViewMessage: function(e) {
console.log("App.vue收到数据")
console.log(JSON.stringify(e.data))
},
//对未处理的 `Promise` 拒绝事件监听函数
onUnhandledRejection: function(e) {
console.log(e.reason,e.promise);
},
onPageNotFound: function(res) {
console.log(res);
},
onThemeChange: function(e) {
//dark/light
console.log(e);
},
//最后一个页面按下`Android back键`,常用于自定义退出
onLastPageBackPress: function(res) {
console.log(res);
},
// 监听应用退出
onExit: function(res) {
console.log(res);
}
}
</script>
注意
- 应用生命周期仅可在App.vue中监听,在其它页面监听无效。
- 以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
- 应用启动参数,可以在
API uni.getLaunchOptionsSync
获取,详见 onlaunch
里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942- App.vue 不能写模板
onPageNotFound
页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)onUniNViewMessage
这个生命周期是接收nvue的 uni.postMessage(data)
的数据来配合的,但现在uni官方已经将这种方法设为过期了。现在官方推荐的nvue和vue之间传递数据的方法是uni.$on
和uni.$emit
.所以这生命周期基本无用了。
// 接收信息的页面
// $on(eventName, callback)
uni.$on('page-popup', (data) => {
console.log('标题:' + data.title)
console.log('内容:' + data.content)
})
// 发送信息的页面
// $emit(eventName, data)
uni.$emit('page-popup', {
title: '我是title',
content: '我是content'
});
2、页面生命周期
onInit
监听页面初始化,其参数同onLoad
参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoadonLoad
监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例。onShow
监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面onReady
监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发onHide
监听页面隐藏onUnload
监听页面卸载onResize
监听窗口尺寸变化onPullDownRefresh
监听用户下拉动作,一般用于下拉刷新,参考示例onReachBottom
页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项onTabItemTap
点击 tab 时触发,参数为Object,具体见下方注意事项onShareAppMessage
用户点击右上角分享onPageScroll
监听页面滚动,参数为ObjectonNavigationBarButtonTap
监听原生标题栏按钮点击事件,参数为ObjectonBackPress
监听页面返回,返回event = {from:backbutton、 navigateBack}
,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack;详见onNavigationBarSearchInputChanged
监听原生标题栏搜索输入框输入内容变化事件onNavigationBarSearchInputConfirmed
监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。onNavigationBarSearchInputClicked
监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput
配置 disabled 为 true 时才会触发)onShareTimeline
监听用户点击右上角转发到朋友圈onAddToFavorites
监听用户点击右上角收藏
onInit:function(options){
console.log('Page Init',options);
},
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
},
onShow: function(options) {
console.log('Page Show',options.path)
},
onReady:function(){
},
onHide: function() {
console.log('Page Hide')
},
3、组件生命周期
文章来源:https://blog.csdn.net/weixin_45618535/article/details/135224769
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!