微信小程序生命周期函数_微信小程序生命周期函数有哪些

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

因为公司即将要开启小程序项目，所以想准备提前准备一下小程序的知识。

一、微信小程序的生命周期介绍

在微信小程序中生命周期分为两大部分，一部分是整个小程序其中之前运行的程序，一部分是每个页面的生命周期。

二、微信小程序

1.全局生命周期

代码如下（示例）：

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      });
    }

    this.globalData = {};
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在小程序项目中的app.js中的onLaunch函数是小程序所有界面运行之前要运行的函数。

2.页面的生命周期

2.1 onLoad函数

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // innerAudioContext.console.log(this.data)
  },
1
2
3
4
5
6

该函数在初次加载页面之前调用，当进入页面时，首先调用onLoad函数

2.2 onReady函数

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('onReady');
  },
1
2
3
4
5
6

该函数在调用onLoad函数之后调用，是进入页面时第二个调用的生命周期函数函数

2.3 onShow函数

   /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onShow');
  },
1
2
3
4
5
6

该函数在调用onReady函数之后调用

可能还有小伙伴对上面这三个函数调用的时机可能有些懵，小杜就在这里举个例子来加强一下大家对这三个生命周期函数的理解，例如有个马戏团要来幼儿园表演，马戏团要表演就需要搭建自己的场地，而搭建自己场地这段时间就是onLoad函数加载的过程，当马戏团在搭建完场地之后，需要把小朋友迎进去，在搭建完场地之后小朋友进入场地之前这段时间就是onReady函数加载的过程，在小朋友进入场地过程中就是onShow函数调用过程。

2.4 onHide函数

   
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onHide');
  }
1
2
3
4
5
6
7

这个函数很简单，就是在离开页面之后要调用的函数。

2.5 onUnload函数

   /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('onUnload');
  },
1
2
3
4
5
6

onUnload函数中可以存储一些页面卸载时，但是还需要的数据。

---

2.6 onPullDownRefresh函数

    /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('onPullDownRefresh');
  },
1
2
3
4
5
6

onPullDownRefresh函数就是在微信小程序下拉时触发的函数，但是需要在app.json中的window属性中配置enablePullDownRefresh，才可以进行下拉操作。

---

2.7 onReachBottom函数

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('onReachBottom');
  },
1
2
3
4
5
6

onReachBottom函数就是下拉时触碰到小函数底部触发的函数

---

2.8 onShareAppMessage函数

 /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage');
  }
1
2
3
4
5
6

onShareAppMessage函数在微信小程序分享时要出发的，但是当微信小程序触发onShareAppMessageh时同时会触发hide函数。

总结

以上就是微信小程序生命周期函数的大概内容，若有错误与指正请在下方留言，一定虚心请教。愿大家在小程序的路上可以越走越远。