微信小程序-页面路由及页面生命周期
Posted 追到梦的魔术师
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序-页面路由及页面生命周期相关的知识,希望对你有一定的参考价值。
一、路由
路由常用跳转方式有三种:
1、wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
页面跳转之后,会有一个返回按钮,新页面覆盖在当前页面
2、wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
页面跳转之后,会有一个home按钮,之前路由列表里面的所有页面都被销毁
3、wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
页面跳转之后,会有一个home按钮,跳转的其实页面会被新页面替换掉
二、页面生命周期
官网链接:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
由于可以看到,微信小程序页面启动时,会开启两个线程:View Thread 和 AppService Thread
View Thread 初始化中向 AppService Thread 发通知,而AppService Thread执行完 onLoad 和 onShow后便等待通知的到来,收到通知后,数据发送给View Thread ,然后执行onReady。
在页面的生命周期函数中,打印log:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options)
console.log('onLoad 生命周期函数--监听页面加载')
,
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function ()
console.log('onReady 生命周期函数--监听页面初次渲染完成')
,
/**
* 生命周期函数--监听页面显示
*/
onShow: function ()
console.log('onShow 生命周期函数--监听页面显示')
,
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function ()
console.log('onHide 生命周期函数--监听页面隐藏')
,
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function ()
console.log('onUnload 生命周期函数--监听页面卸载')
,
运行小程序,控制台输出如下:
由此可见,页面周期的生命周期函数执行顺序:
onLoad --> onShow --> onReady
实验:路由跳转
新建两个页面,分别是page2、page3
实验一
当动第一个页面navigateTo到page2时,查看控制台
触发可onHide方法;此时返回到首页:
会发现onShow又重新被触发
实验二
更改跳转方式:
当动第一个页面reLaunch到page2时,查看控制台
会发现首页已经被销毁了
此时点击由上面的按钮,退到首页,控制太打印如下:
会发现,page2销毁,首页又被创建出来了
重新跑一遍程序:执行 首页reLaunch-> page2 reLaunch->page3,查看控制太如下:
会发现 page2到page3的时候,page2也同样被释放了
重新跑一遍程序:执行 首页 navigateTo-> page2 reLaunch->page3,查看控制太如下:
可以看到 page2 -> page3时,首页和page2都被释放了,由此可以证实官方描述:关闭所有页面,打开到应用内的某个页面。
实验三
更改跳转方式:
执行 首页navigateTo-> page2 ->page3,查看控制太如下:
可以看到 page2 -> page3时,只有page2被释放了,首页并没有释放,由此可以证实官方描述:关闭当前页面,跳转到应用内的某个页面。
以上是关于微信小程序-页面路由及页面生命周期的主要内容,如果未能解决你的问题,请参考以下文章