小程序:uni学习第四弹之生命周期 | 页面通讯 | 路由
获取对应平台
-
uni.getSystemInfoSync().platform
-
demo
const platform = uni.getSystemInfoSync().platform;
// 区分不同平台
switch(platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
case 'other':
console.log('运行浏览器上')
default:
// platform: devtools
console.log('运行在开发者工具上')
break;
}
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 :窗口动画持续时间,单位 ms
- success | fail | complete
- url
- uni.redirectTo(object):关闭当前页面,跳转到应用内的某个页面
- demo
uni.redirectTo({ url: 'test?id=1' });
-
参数
- url
- 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数 - success | complete | fail
- url
-
注意
- 跳转到 tabBar 页面只能使用 switchTab 跳转
-
uni.reLaunch(object):关闭所有页面,打开到应用内的某个页面
- demo
uni.reLaunch({ url: 'test?id=1' }); onLoad: function (option) { console.log(option.id); }
-
参数
- url:
- 需要跳转的应用内页面路径 , 路径后可以带参数
- *跳转的页面路径是 tabBar 页面则不能带参数
- success | complete | fail
- url:
-
注意
- 调用了 uni.preloadPage(object) 则不会关闭,仅触发生命周期 onHide
-
uni.switchTab(object):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
- demo
uni.switchTab({ url: '/pages/index/index' });
-
参数
- url:需要跳转的 tabBar 页面的路径
- 需在 pages.json 的 tabBar 字段定义的页面
- 路径后不能带参数
- success | complete | fail
- url:需要跳转的 tabBar 页面的路径
-
注意
- 跳转到 tabBar 页面只能使用 switchTab 跳转
- 调用了 uni.preloadPage(object) 则不会关闭,仅触发生命周期 onHide
- uni.navigateBack(object):关闭当前页面,返回上一页面或多级页面
- demo
uni.navigateBack({ delta: 2 })
- 参数
- delta:number | 返回的页面数,如果 delta 大于现有页面数,则返回到首页
- animationType:窗口关闭的动画效果
- animationDuration:窗口关闭动画的持续时间,单位为 ms
- demo
-
uni.preloadPage(object):预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快
- demo
uni.preloadPage({url: "/pages/test/test"});
- 参数
- url
- complete | 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:取消监听小程序切后台事件