软件创新实验室：微信小程序开发——生命周期与调试步骤

声明

1）该文章部分内容整理自网上的资料，如不小心侵犯了大家的权益，还望海涵，并联系博主删除。

2）博主是萌新上路，文中如有不当之处，请各位大佬指出，共同进步，谢谢。
 

生命周期

生命周期就是指一个对象的生老病死，

微信小程序每个页面存在生命周期，

主要的生命周期函数有以下几个，

onLoad → 生命周期函数 - 监听页面加载
onShow → 生命周期函数 - 监听页面显示
onReady → 生命周期函数 - 监听页面初次渲染
onHide → 生命周期函数 - 监听页面隐藏
onUnload → 生命周期函数 - 监听页面卸载
onPullDownRefresh → 页面监听相关处理函数 - 监听用户下拉动作
onReachBottom → 页面上拉触底事件的处理函数
onShareAppMessage → 用户点击右上角分享

 onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },

 

调试步骤

控制台显示

通过使用console.log()或者console.info()函数使得反馈在控制台中显示，

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

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

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

 
运行结果：

 

弹窗显示

通过使用wx.showModal()函数使得反馈在弹窗中显示，

例如，

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.showModal({
      title:'Test',
      content:'onShow'
    })
  },

运行结果：