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

声明

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'
    })
  },

运行结果:

弹窗

猜你喜欢

转载自blog.csdn.net/weixin_46263782/article/details/110676927