微信小程序生命周期(onLoad,onHide,onShow,onReady,onUnload)

周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信小程序的生命周期:

应用生命周期
页面生命周期
应用生命周期影响页面生命周期

应用生命周期

image 

1、用户首次打开小程序,触发 onLaunch(全局只触发一次)。

2、小程序初始化完成后,触发onShow方法,监听小程序显示。

3、小程序从前台进入后台,触发 onHide方法。

4、小程序从后台进入前台显示,触发 onShow方法。

5、小程序后台运行一定时间,或系统资源占用过高,会被销毁。

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

页面生命周期

image 

1、小程序注册完成后,加载页面,触发onLoad方法,一个页面只会调用一次。

2、页面载入后触发onShow方法,显示页面,每次打开页面都会调用一次。

3、首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。

4、当小程序后台运行或跳转到其他页面时,触发onHide方法。

5、当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。

6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

wx.navigateTo跳转状态下,页面A和页面B的生命周期逻辑

1、进入A页面:A执行onLoad()–>onShow()–>onReady();

2、A页面navigateTo B页面:A执行onHide(),B执行onLoad()–>onShow()–>onReady();

3、B页面返回A页面:B执行onUnload(),A执行onShow();

4、退出A页面:A执行onUnload()。

应用生命周期影响页面生命周期

image

1、小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。
2、当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。
3、当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法。
————————————————
版权声明:本文为CSDN博主「檀小泡泡」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42371145/article/details/112364612

  • 5
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序中,页面可以使用函数来实现各种功能和交互。以下是一些常见的函数用法: 1. 页面生命周期函数:在页面的不同阶段触发,常见的有 `onLoad`、`onShow`、`onHide`、`onUnload` 等。可以在这些函数中编写相应的逻辑来处理页面的初始化、数据加载、状态更新等操作。 2. 事件处理函数:当用户触发某个事件时(如点击按钮、滑动屏幕等),可以通过编写事件处理函数来响应用户操作。常见的事件处理函数有 `bindtap`、`bindinput`、`bindscroll` 等,可以在页面的 WXML 文件中通过绑定属性来指定相应的事件处理函数。 3. 自定义函数:除了生命周期函数和事件处理函数,您还可以在页面中定义自己的函数,用于封装一些具体的功能逻辑。这些函数可以在页面的其他地方被调用,实现代码的复用和模块化。 下面是一个简单的示例,展示了一个微信小程序页面中使用函数的基本用法: ```javascript // 页面逻辑 Page({ data: { message: 'Hello, World!', }, onLoad: function() { console.log('页面加载完成'); }, handleClick: function() { console.log('按钮点击事件触发'); this.setData({ message: 'Button Clicked!', }); }, customFunction: function() { console.log('自定义函数被调用'); } }); ``` ```html <!-- 页面视图 --> <view> <text>{{message}}</text> <button bindtap="handleClick">点击按钮</button> </view> ``` 在上面的示例中,我们定义了一个页面对象,其中包含了 `onLoad`、`handleClick` 和 `customFunction` 等函数。`onLoad` 函数在页面加载完成时被触发,`handleClick` 函数在按钮点击事件发生时被触发,`customFunction` 是一个自定义函数,可以在其他地方被调用。通过 `this.setData()` 方法可以更新页面的数据,从而实现页面的动态更新。 当用户打开这个页面时,`onLoad` 函数会被调用,控制台会输出相应的日志。当用户点击按钮时,`handleClick` 函数会被调用,控制台会输出相应的日志,并将页面数据的 `message` 字段更新为 'Button Clicked!'。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值