12-09 03:19 阅读 1316

uniapp中页面跳转的几种方式及生命周期(uniapp点击事件跳转页面)

页面跳转的方式

navigate

uni.navigateTo（{
    url:"test?id=1&name=uniapp"
}）复制代码

保留当前页面，跳转到应用内的某个页面

redirect

uni.redirectTo（{
    url:"test?id=1&name=uniapp"
}）复制代码

关闭当前页面，跳转到应用内的某个页面

switchTab

uni.switchTab（{
    url:"test?id=1&name=uniapp"
}）复制代码

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

reLaunch

uni.reLaunch（{
    url:"test?id=1&name=uniapp"
}）复制代码

关闭所有页面，打开到应用内的某个页面字节跳动小程序不支持

navigateBack

uni.navigateBack（{
    url:"test?id=1&name=uniapp"
}）复制代码

关闭当前页面，返回上一页面或多级页面

生命周期

    onLoad() {
     console.log('页面加载')
    },
    onShow() {
        console.log('页面显示')
    },
    onReady(){
         console.log('页面初次显示')
     },
     onHide() {
         console.log('页面隐藏')
     },
     onUnload() {
         console.log('页面卸载')
     },
     onBackPress(){
        console.log('页面返回...')
     },
    onShareAppMessage() {
         console.log('分享')
     },
     onReachBottom() {
         console.log('下拉加载...')
     },
     onPageScroll(){
         console.log('页面滚动...')
     },
    onPullDownRefresh() {
         console.log('上拉刷新...')
        uni.stopPullDownRefresh();
    },复制代码

1、页面的加载过程是：加载-显示-加载完成-页面隐藏-页面卸载

2、页面生命周期的出发过程： onLoad:监听页面加载 --> onShow:监听页面显示 --> onReady:监听页面初次渲染完成 --> onHide:监听页面隐藏 --> onUnload:监听页面卸载

3、onLoad跟onLoadonShow的区别

(1)onShow: 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

例如：页面b:通过缓存跳转到页面a

页面B:缓存一个变量newMember uni.setStorageSync('newMember', this.newMember)

页面A可以接受这个参数变量:onShow() { let str = uni.getStorageSync('newMember') },

(2) onLoad:只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）

只加载一次所以如果b页面不断的修改数据再通过 onLoad(){ uni.navigateBack({delta: 1,}) 回到A页面 a页面的数据不会随之改变

总结：A页面跳转到B页面后，从二级页面B返回该页面A时，onLoad不会再次加载，而onshow会重新加载。

4、如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： onLoad(options){ console.log(options.xxx) },这些参数都挂在在options.

5、在一些数据变化较少的时候我们用onload

onLoad先于onShow执行
onLoad页面的整个生命周期里，只执行一次
onShow页面的整个生命周期里，可执行多次，即每次显示都会执行
获取参数并且只请求一次的事件放在 onLoad 里。
当前页面需要时时刷数据的请求多次的事件放在 onShow 里。

作者：为了认识你
链接：https://juejin.cn/post/7039330263423254565