目录

1.  小程序生命周期介绍

2.  应用生命周期

3.  页面生命周期

---

1.  小程序生命周期介绍

        一个小程序完整的生命周期由 应用生命周期、页面生命周期 和 组件生命周期 三部分来组成。

应用生命周期：是指应用程序进程从创建到消亡的整个过程。

小程序的生命：周期指的是小程序从启动到销毁的整个过程。

        小程序生命周期伴随着一些函数，这些函数由小程序框架本身提供，被称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑。

2.  应用生命周期

        应用生命周期通常是指一个小程序从启动→运行→销毁的整个过程。

        应用生命周期伴随着一些函数，我们称为应用生命周期函数，应用生命周期函数需要在app.js 文件的App()方法中进行定义，App() 方法必须在 app.js 中进行调用，主要用来注册小程序。

        应用生命周期函数由onLaunch、onShow、onHide三个函数组成。

        找到app.js文件，将之前app.js文件代码注释掉或者删掉，输入app，选择带有方框的APP：

        这样能快速填充我们所要需要编写的内容：

        编写代码：

// 将之前app.js文件代码注释掉或者删掉
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('onLaunch 小程序初始化完成时')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('onShow 小程序启动，或从后台进入前台显示')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('onHide 当小程序从前台进入后台')
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

        点击编译，首先我们会发现，数据打印出来了，但是内容还有系统本身打印的内容，我们可以进行如下操作：

        这样可以屏蔽到系统打印的内容，若想返回可以点击叉号，进行将系统打印显示出来：

        可以看到此时，只触发了“onLaunch”和“onShow”，那是因为“onHide”是当小程序从前台进入后台触发的，所以我们可以点击：

        会发现此时触发了“onHide”：

        可以任意点击黄色框选部分，返回之前页面：

会发现：

当进行冷启动时，才会触发 onLaunch 钩子函数

如果是热启动，不会触发 onLaunch 钩子函数，会触发 onShow 钩子函数

因此 onLaunch 全局只触发一次

3.  页面生命周期

        页面生命周期就是指小程序页面从 加载 → 运行 → 销毁的整个过程。

        页面生命周期函数需要在 Page() 方法进行定义。

小程序中的页面生命周期包括以下几个主要阶段：

①  onLoad：页面加载时触发，一般在这个阶段可以进行页面初始化操作，如数据加载、初始化变量等。

②  onShow：页面显示时触发，每次打开页面都会触发。在这个阶段可以进行页面数据的刷新操作，如从后台切换回前台时需要更新数据。

③  onReady：页面初次渲染完成时触发，表示页面已经准备好，可以和视图层进行交互。一般在这个阶段可以进行页面渲染完毕后的操作。

④  onHide：页面隐藏时触发，当navigateTo或底部tab切换时会触发。可以在这个阶段进行一些页面隐藏时需要执行的操作，如清除定时器、暂停音视频播放等。

⑤  onUnload：页面卸载时触发，当redirectTo或navigateBack时会触发。在这个阶段可以进行页面卸载前的清理工作，如清除定时器、释放资源等。

⑥  onPullDownRefresh：用户下拉页面时触发，在这个阶段可以进行下拉刷新操作，一般用于实现页面的下拉刷新功能。

⑦  onReachBottom：页面上拉触底时触发，一般用于实现页面的上拉加载更多功能。

⑧  onShareAppMessage：用户点击分享按钮或右上角菜单分享时触发，可以自定义分享内容和链接。

⑨  onPageScroll：页面滚动时触发，可以获取页面滚动的位置信息，实现一些滚动相关的效果。

⑩  onResize：页面尺寸变化时触发，一般用于监听页面尺寸的变化，如横竖屏切换时触发。

主要触发流程：

        找到首页，找到“index.js”文件，将page文件内容删除：

        输入page，找到带有方框的page：

        其会帮我们自动填充代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

        将app.js的文件注释掉或者删除，在index.js文件中编写代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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 页面卸载的时候执行')    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

        此时代码运行结果：

        使用<navigator> 组件，用于实现页面跳转到列表页面并且采用重定向（redirect）方式跳转。

 redirect：销毁当前页面，跳转到下一个页面。

<navigator url="/pages/list/list" open-type="redirect">跳转到列表页面</navigator>

        点击“跳转到列表页面”：

        使用<navigator> 组件，用于实现页面跳转到列表页面并且采用navigate方式跳转。

navigate：保留当前页面，跳转到下一个页面

        编写代码：

<navigator url="/pages/list/list" open-type="navigate">navigate 跳转到列表页面</navigator>

        点击“navigate 跳转到列表页面”：

        点击：

         出现：

参考：微信小程序开发系列（十一）·小程序页面的跳转设置以及参数传递-CSDN博客

微信小程序开发_时光の尘的博客-CSDN博客