小程序:uni学习第四弹

    技术2025-09-15  132

    小程序:uni学习第四弹之生命周期 | 页面通讯 | 路由

    1. 生命周期

    应用生命周期

    仅可在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 | 监听页面滚动

    2. 页面通讯

    触发全局的自定事件::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的回调为同一个才能移除这个回调的监听器;

    3. 路由

    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
    uni.redirectTo(object):关闭当前页面,跳转到应用内的某个页面 demo uni.redirectTo({ url: 'test?id=1' });

    参数

    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) 则不会关闭,仅触发生命周期 onHide

    uni.switchTab(object):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    demo uni.switchTab({ url: '/pages/index/index' });

    参数

    url:需要跳转的 tabBar 页面的路径 需在 pages.json 的 tabBar 字段定义的页面路径后不能带参数 success | complete | fail

    注意

    跳转到 tabBar 页面只能使用 switchTab 跳转调用了 uni.preloadPage(object) 则不会关闭,仅触发生命周期 onHide
    uni.navigateBack(object):关闭当前页面,返回上一页面或多级页面 demo uni.navigateBack({ delta: 2 }) 参数 delta:number | 返回的页面数,如果 delta 大于现有页面数,则返回到首页animationType:窗口关闭的动画效果animationDuration:窗口关闭动画的持续时间,单位为 ms

    uni.preloadPage(object):预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快

    demo uni.preloadPage({url: "/pages/test/test"}); 参数 urlcomplete | fail

    4. 窗口动画

    有效的路由 API: navigateTo | navigateBack uni.navigateTo({ url: '../test/test', animationType: 'pop-in', animationDuration: 200 }); uni.navigateBack({ delta: 1, animationType: 'pop-out', animationDuration: 200 }); open-type 有效值 <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator> <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator> pages.json 中配置的是窗口显示的动画 "style": { "app-plus": { "animationType": "fade-in", "animationDuration": 300 } } 显示 | 关闭动画规则 slide-in-right slide-out-right 新窗体从右侧进入slide-in-left slide-out-left 新窗体从左侧进入slide-in-top slide-out-top 新窗体从顶部进入slide-in-bottom slide-out-bottom 新窗体从底部进入pop-in pop-out 新窗体从左侧进入,且老窗体被挤压而出fade-in fade-out 新窗体从透明到不透明逐渐显示zoom-out zoom-in 新窗体从小到大缩放显示zoom-fade-out zoom-fade-in 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示

    5. 应用级事件

    - uni.onPageNotFound:监听应用要打开的页面不存在事件 - uni.onError:监听小程序错误事件 - uni.onAppShow:监听应用切前台事件 - uni.onAppHide:监听应用切后台事件 - uni.offPageNotFound:取消监听应用要打开的页面不存在事件 - uni.offError:取消监听应用错误事件 - uni.offAppShow:取消监听小程序切前台事件 - uni.offAppHide:取消监听小程序切后台事件
    Processed: 0.025, SQL: 10