小程序页面onLoad(), onReady() 加载顺序详解

在小程序中，onLoad()和onReady()是两个重要的页面生命周期函数。了解它们的执行顺序对于开发小程序至关重要。本文将详细讲解 onLoad() 和 onReady() 的执行顺序，以及它们的特点和用途。

什么是onLoad(), onReady()函数

在小程序中，所有页面都有自己的生命周期函数。其中， onLoad() 和 onReady() 是两个最重要的生命周期函数。

onLoad() 函数在页面被加载时触发，一般用于页面初始化时需要加载的数据请求和操作。

onReady() 函数在页面渲染完毕时触发，一般用于完成页面的一些渲染后的操作。

onLoad() 和 onReady() 的执行顺序

在小程序中，加载一个新页面的时候，它们的执行顺序是 onLoad() 先于 onReady() 执行。

具体顺序为：

1. onLoad() 函数第一个执行
2. 在 onLoad() 函数中进行数据请求和操作
3. onReady() 函数最后一个执行

在执行 onLoad() 函数时，页面还没有被渲染，因此无法进行 DOM 操作。而在 onReady() 函数执行后，页面已经被渲染出来，可以进行 DOM 操作。

onLoad() 使用示例

以下是一个 onLoad() 使用示例，用于在页面加载时向后台请求数据并渲染到页面上。

Page({
  onLoad: function (options) {
    wx.request({
      url: 'https://www.example.com/api/data',
      success: function(res) {
        // 将数据渲染到页面上
        this.setData({
          data: res.data
        })
      }
    })
  }
})

onReady() 使用示例

以下是一个 onReady() 使用示例，用于在页面渲染完成后，进行一些操作，比如操作 DOM 元素。

Page({
  onReady: function () {
    var context = wx.createCanvasContext('myCanvas')
    context.setFillStyle('#ffffff')
    context.fillRect(0, 0, 200, 200)
    context.setFillStyle('#ff0000')
    context.fillRect(0, 0, 100, 100)
    context.draw()
  }
})

总结

在小程序中，了解 onLoad() 和 onReady() 的执行顺序是非常重要的。onLoad() 用于页面初始化时的数据加载和操作，而 onReady() 则用于页面渲染完成后的 DOM 操作。在实际开发中，我们要根据需要合理使用这两个函数，让页面更加高效、流畅。