应用生命周期
仅可在App.vue中监听,在其它页面监听无效onlaunch里进行页面跳转,如遇白屏报错,参考 - onLaunch 当uni-app 初始化完成时触发(全局只触发一次) - onShow 当 uni-app 启动,或从后台进入前台显示 - onHide 当 uni-app 从前台进入后台 - onUniNViewMessage 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯页面生命周期
- onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参) - onShow: - 监听页面显示 - 触发包含:页面每次出现在屏幕上 和 从下级页面点返回露出当前页面 - onReady:监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 - onHide:监听页面隐藏 - onUnload:监听页面卸载 - onResize:监听窗口尺寸变化 - onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新 - onReachBottom: - 页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据 - 使用scroll-view导致页面级没有滚动,则触底事件不会被触发 - onPageScroll:object | 监听页面滚动触发全局的自定事件::uni.$emit(eventName,object)
demo: uni.$emit(‘add’, { val: 5 })参数: eventName:事件名 | object:触发事件携带的附加参数监听全局的自定义事件:uni.$on(eventName,callback)
demo : uni.$on('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); }) OR uni.$on('add', this.add); add(newVal) { this.val += newVal } 参数:eventName:事件名 | callback:事件的回调函数监听全局的自定义事件:uni.$once(eventName,callback)
demo :uni.$once(‘add’,this.add)参数: eventName:事件名 | callback:事件的回调函数只触发一次,在第一次触发之后移除监听器移除全局自定义事件监听器:uni.$off([eventName, callback])
demo : uni. o f f ( ′ u p d a t e ′ , t h i s . u p d a t e ) ∣ ∣ u n i . off('update', this.update) || uni. off(′update′,this.update)∣∣uni.off()参数: eventName:Array<String> 事件名 | object:触发事件携带的附加参数Tips - 如果没有提供参数,则移除所有的事件监听器; - 如果只提供了事件,则移除该事件所有的监听器; - 如果同时提供了事件与回调,则只移除这个回调的监听器; - 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;uni.navigateTo(object): 保留当前页面,跳转到应用内的某个页面
demo // 跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1&name=uniapp' }); - url有长度限制,太长的字符串会传递失败, - 解决:使用窗体通信 | 全局变量 | encodeURIComponent等 - demo:encodeURIComponent <navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator> // 在test.vue页面接受参数 onLoad: function (option) { console.log(option.id + '-' + option.name); // 使用 encodeURIComponent const item = JSON.parse(decodeURIComponent(option.item)); } 参数 url 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 animationType:窗口显示的动画效果animationDuration :窗口动画持续时间,单位 mssuccess | fail | complete参数
url - 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数success | complete | fail注意
跳转到 tabBar 页面只能使用 switchTab 跳转uni.reLaunch(object):关闭所有页面,打开到应用内的某个页面
demo uni.reLaunch({ url: 'test?id=1' }); onLoad: function (option) { console.log(option.id); }参数
url: 需要跳转的应用内页面路径 , 路径后可以带参数*跳转的页面路径是 tabBar 页面则不能带参数 success | complete | fail注意
调用了 uni.preloadPage(object) 则不会关闭,仅触发生命周期 onHideuni.switchTab(object):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
demo uni.switchTab({ url: '/pages/index/index' });参数
url:需要跳转的 tabBar 页面的路径 需在 pages.json 的 tabBar 字段定义的页面路径后不能带参数 success | complete | fail注意
跳转到 tabBar 页面只能使用 switchTab 跳转调用了 uni.preloadPage(object) 则不会关闭,仅触发生命周期 onHideuni.preloadPage(object):预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快
demo uni.preloadPage({url: "/pages/test/test"}); 参数 urlcomplete | fail