微信小程序（五）页面生命周期详细介绍

微信小程序（五）页面生命周期详细介绍

本文将会非常详细地介绍微信小程序页面的生命周期，包括生命周期函数的执行时机、作用和示例代码。

生命周期函数

微信小程序的页面周期函数主要由生命周期函数、响应事件函数和其他函数等组成。

生命周期函数

生命周期函数是指微信小程序页面在不同状态下执行的函数，它主要由以下五个函数构成：

1. onLoad():页面加载时触发，只会触发一次。

示例代码：

Page({
  onLoad: function () {
    console.log('页面加载');
  }
})

1. onShow():页面显示时触发，对用户可见，可能会被多次调用。

示例代码：

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

1. onReady():页面初次渲染完成时触发，只会触发一次。

示例代码：

Page({
  onReady: function () {
    console.log('页面初次渲染完成');
  }
})

1. onHide():页面隐藏时触发，在当前页面仍存活于小程序后台时也会触发。

示例代码：

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

1. onUnload():页面卸载时触发，只会触发一次。

示例代码：

Page({
  onUnload: function () {
    console.log('页面卸载');
  }
})

响应事件函数

响应事件函数是指对页面内部组件进行事件绑定时执行的函数，它主要有以下函数：

1. onTap():处理tap类型的点击事件。

示例代码：

Page({
  handleTap: function () {
    console.log('点击事件触发');
  }
})

1. onInput():处理input类型的输入事件。

示例代码：

Page({
  handleInput: function (event) {
    console.log('输入事件触发', event.detail.value);
  }
})

1. onScroll():处理scroll类型的滚动事件。

示例代码：

Page({
  handleScroll: function (event) {
    console.log('滚动事件触发', event.detail.scrollTop);
  }
})

其他函数

除了上述生命周期函数和响应事件函数之外，还有一些常用的辅助函数，包括：

1. setData():用于更新数据和视图层。

示例代码：

Page({
  data: {
    message: 'Hello World'
  },
  handleChange: function () {
    this.setData({
      message: '你好，世界'
    });
  }
})

1. wx.request():用于向远程服务器发送请求。

示例代码：

Page({
  handleRequest: function () {
    wx.request({
      url: 'https://example.com',
      success: function (res) {
        console.log(res.data);
      }
    })
  }
})

生命周期顺序

微信小程序页面的生命周期函数按照以下顺序执行：

// 页面被创建
onLoad -> onShow -> onReady

// 页面被隐藏
onHide

// 页面被销毁
onUnload

总结

本文详细介绍了微信小程序页面的生命周期函数，包括生命周期函数的执行时机、作用和示例代码。熟练掌握生命周期函数的使用可以帮助我们更好地开发小程序，提高用户体验。