微信小程序开发宝典：1微信小程序生命周期

微信小程序开发宝典：1微信小程序生命周期

参考文档:微信开放文档

一、App下的生命周期:

1、onLaunch：初始化完成时触发，只触发一次

例子:

onLaunch: function () {
    console.log('初始化完成-只触发一次');
  }

编译结果：

2、onShow / onHide：从后台进入前台触发/从前台进入后台时触发

例子:

onShow: function (options) {
    console.log('从后台进入前台触发');
  },

  onHide: function () {
    console.log('从前台进入后台触发');
  },

（在前台前台进入后后台时可以利用微信开发者工具中的模拟器上方有一个圆圈，点击即可从前台进入后台的测试）

二、page下的生命周期

1、onLoad：页面加载时触发

例子：

  onLoad: function (options) {
    console.log("加载中...");
  },

2、onReady：初次渲染完成时触发

例子:

  onReady: function () {
    console.log('初次渲染');
  },

3、onShow: 页面显示时触发

例子:

  onShow: function () {
    console.log('页面显示');
  },

4、onHide：页面隐藏时触发

例子：

  onHide: function () {
    console.log('页面隐藏');
  },

（在测试页面隐藏时我们需要点击模拟器上的圆圈这样可以隐藏页面）

5、onShareAppMessage：用户分享时触发

例子：

  onShareAppMessage: function () {
    console.log('分享+1');
  }

（需要点击微信小程序上的三个小点的标志并点击分享给好友触发，值得注意的是他在点击玩分享给好友就触发了，并没有实际分享出去的话也一样触发）

如上图所示，在为发送出去时已经触发，用户一样可以点取消进行不分享，但却触发分享功能

三、全局方法的调用

1、在App中调用：在App中定义一个全局方法object，直接使用this调用即可

测试：

App({

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

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

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

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

  },
  /** 
   * 自定义全局方法
   */
  object: {
    info: '全局方法'
  }
})

2、在Page（页面）中调用，则需要使用getApp()来获取App中的函数。

例子：

// 获取app实例
const appInst = getApp();
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("加载中..." + appInst.object.info);
  },

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

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

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

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

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

  },

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

  },

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

结果：

感谢大家看到这里，如果觉得我写得好的话麻烦大家给我一个👍，谢谢大家拉~(^ _ ^)∠※