onShow和onHide钩子的对比和执行顺序

于 2024-09-05 17:13:20 发布
阅读量415 收藏 3
点赞数 7
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ou050719/article/details/141933993
版权

执行顺序

先执行onLoad函数在在onShow最后才是onReady

不含组件页面

onLoad>onShow>onReady

含组件的页面

onLoad>onShow>onBeforeMount>onReady>onMounted

onShow

onShow是一进去就就会触发,如下

https://i-blog.csdnimg.cn/direct/6a14338f8ea547b2b544e801ada14ebc.png

从demo5跳转到demo6就会触发onShow

但是,要是点箭头返回的话其他三个函数不会触发,只会触发onShow,切换页面之后也会触发onShow,别的却不会,也就是说,只要是进入demo6页面就会触发onShow,不管是怎么进入的

可以用在比如

一个视频,你暂停之后去了其他页面,然后你回来的时候可以自动播放,还有就是游戏,退出去就自动暂停,再次进来就自动解除

onHide

onHide跟onShow正好相反,它是一出去就会触发,那么这样的话我们可以做一个计数器来看一下

''

定义了一个setInterval方法,没多少毫秒count就++一次,onShow是每次进来就会开启这个方法,onHide是每次离开就会停止这个方法

暮夜明
关注
uni-app页面生命周期（微信小程序）与vue生命周期的执行顺序
id_lutra的博客
10-22 2466
最近接受一个新项目用的uni-app写小程序，自己翻了很多文档，总结一下： uni-app的页面生命周期函数（微信小程序）： onInit 监听页面初始化，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad onLaunch:function(){//当uni-app初始化完成时触发（全局只触发一次） console.log('App onLaunch') } onLoad 监听页面加载，其参数为上个...
微信小程序页面执行栈和生命周期函数的关系
weixin_44486632的博客
05-27 228
看了很多的博客，谈轮到小程序的生命周期的，大多都和官网上的内容大同小异，说实话，并没有从中得到太多的启示。有幸得到同事的点拨，得以知晓生命周期在整个小程序中页面生成，跳转，销毁中的执行情况。本人文笔出操，也就仅仅作为自己的笔记记录。如朋友你能看到并从中也得到一些启发，那将为这笔记增添了一些意义 什么是微信小程序的页面执行栈。 举个栗子，我们的小程序当前所在页面是home，其中有一个入口进入菜单列表，我姑且叫 a，菜单列表中的每一个菜又可以点击查看详细到b。这几个动作你都一次执行，那结果将是 home 跳转到
小程序生命周期(onLaunch、onShow、onHide、onReady、onLoad、onUnloa)
叶落无痕的博客
01-08 2456
（4）onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。（1）onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）；
页面生命周期onLoad,onReady,onShow和onHide,onUnload和onPageScroll在vue3中组合应用
p23gjj的博客
09-04 872
生命周期onLoad函数作用可以进行传参。
小程序页面的生命周期（onload，onshow，onready，onhide，onunload）
qq_43076663的博客
07-17 2956
1.onload 页面加载时触发（相当于页面初始化入口，跟onunload对应，只出现一次） 2.onshow 页面显示时触发（页面被调用时） 3.onready 页面渲染完成时触发（页面加载渲染完成，与onload对应，只出现一次） 4.onhide 页面隐藏时触发（页面在堆栈中，不显示时） 5.onunload 页面卸载时触发（页面从堆栈释放，与onload对应，只出现一次） 以下...
uni-app页面生命周执行期顺序
qq_39534956的博客
05-21 369
如果页面的组件还包含了其他的组件,参考Vue组件的生命周期顺序即可。从执行的顺序可以看出页面生命周期onReady总是最后一个执行。这里只考虑了navigateTo()与redirectTo()使用navigateTo()使用redirectTo()
微信小程序生命周期
LIONKINGGO的博客
11-30 1817
微信小程序生命周期
uniapp生命周期执行顺序
07-28
uniapp的生命周期执行顺序如下： 1. beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。 2. created：在实例创建完成后被调用，此时实例已经完成了数据观测和事件配置。 3. beforeMount：在挂载开始...
vue2 以及小程序面试题文档，帮助你快速了解，vue2框架以及小程序的核心
03-15
5. 小程序生命周期函数：onLoad、onShow、onHide、onUnload等，用于处理页面加载、显示、隐藏等。 6. 下拉刷新：onPullDownRefresh，实现下拉时更新页面内容。 7. 数据传递方法：如props、事件、全局变量等。 8. wx....
小程序生命周期钩子函数&vue生命周期04
奖励你一朵小红花❀的博客
12-27 589
生命周期： 生命周期是指一个小程序从创建到销毁的一系列过程。 小程序的两种生命周期 在小程序中 ，通过App（）来注册一个小程序 ，通过Page()来注册一个页面。 #1. 小程序应用的生命周期 App()函数用来注册一个小程序。接受一个 Object参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。 App({ onLaunch: function(options) { // 监听小程序初始化。小程序初始化完成时（全局只触发一次）
uniapp 常用生命周期以及执行顺序
Hiroshi's
02-28 1万+
uniapp 生命周期分为应用生命周期，页面生命周期，还有组件生命周期 我们先看一个例子： 这是项目结构，里面的App.vue是我们的App页面，应用的生命周期有onLaunch,onShow和onHide等： // App.vue <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Sh
微信小程序生命周期（onLoad，onHide，onShow，onReady，onUnload）
newsxy的专栏
08-25 9715
2、A页面navigateTo B页面：A执行onHide()，B执行onLoad()–>onShow()–>onReady()；3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。2、小程序初始化完成后，触发onShow方法，监听小程序显示。
小程序生命周期(onLaunch、onShow、onHide、onReady、onLoad、onUnload)
热门推荐
qq_37291064的博客
02-25 4万+
onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）； onLoad: 页面加载 小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。 onShow: 页面显示 页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到...
onShow执行顺序以及和onHide的对比
最新发布
m0_65941214的博客
09-04 887
onShow执行顺序以及和onHide的对比
onLoad 与 onShow 方法哪个先执行
weixin_42594143的博客
03-02 7265
onLoad先执行,onShow后执行,先监听加载然后监听显示。
微信小程序 onload 和 onReady 谁先加载，和原生js的刚好相反
态度决定一切
06-01 3万+
1.小程序： onload 先， 然后到 onshow， 最后 onready ，   2.可以说，和原生js的 document.ready 和 window.onload 刚好相反。（这里的 document.ready 是jq定义的方法）     document.ready ：表示文档结构加载完成（不包含图片等非文字媒体文件）；ready如果定义多个，都会按渲染顺序执行。  ...
小程序页面onload()，onready()加载顺序
qq_35872379的博客
02-26 3万+
小程序 onLoad(Object query) 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 onShow() 页面显示/切入前台时触发。 onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 所以加载顺序是先加载onLoad，再是onShow，最后onReady 原生JS do...
onshow和onload执行顺序
05-23
在HTML页面中，onload事件是在整个页面和所有资源（如图片和CSS文件）加载完成后触发的，而onshow事件则是在页面每次显示时触发的。...因此，它们的执行顺序是不同的。一般来说，onload事件先于onshow事件执行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值