Detailed interpretation of page life cycle in WeChat mini program (detailed tutorial)

This article mainly introduces the relevant information of the WeChat Mini Program page life cycle in detail, which has certain reference value. Interested friends can refer to

WeChat Mini Program Page Life Cycle Introduction , the details are as follows

Page life cycle function

onLoad——-Monitoring page loading
onReady——-Monitoring page initial rendering completion
onShow——-Monitoring page Display
onHide——-Listen for page hiding
onUnload——-Listen for page unloading

Page({

 /**
  * 页面的初始数据
  */
 data: {
  banner_url:data.bannerList(),
  open:false
 },

 /**
  * 生命周期函数--监听页面加载
  */
 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==");
 }
})

Function triggered when entering the homepage

Enter and leave the blog The trigger function of the page

Summary:

1. When leaving the homepage and entering the details page, the onHide function is used - it just hides the page. When we return to the home page, just use onShow to display it;
2. When leaving the details page, we use the onUnload function—here is to unload the page, so the next time we enter the details page, we need to Page again (load--display--render)
3. The above situation is when open-type is not set. If open-type="redirect", then onUnload will be triggered when leaving the homepage, so it cannot Then return to the home page.

Reference for details: Navigator of WeChat applet component

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed answers to JS operation clipboard

How to use the Lodash method in Angular?

vue-router project practice (detailed tutorial)

The above is the detailed content of Detailed interpretation of page life cycle in WeChat mini program (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!