微信小程序：onReady详解

onReady 全面梳理

今天我们来讲一下微信小程序里面的onReady函数

一、是什么？

页面首次渲染完成的回调函数

• 小程序页面的生命周期函数
• 表示页面视图层布局完成
• 一个页面只会调用一次

二、特点

• ✅ 在 onLoad 之后执行
• ✅ 页面已渲染完成，DOM 可操作
• ✅ 只会执行一次（除非页面被销毁重创建）

三、使用场景

1. 布局相关操作

onReady() {
  // 获取元素尺寸
  this.calculateHeaderHeight();
  
  // 设置滚动位置
  wx.pageScrollTo({
    scrollTop: 0
  });
}

2. 动画初始化

onReady() {
  // 启动入场动画
  this.animation = wx.createAnimation();
  this.startEntranceAnimation();
}

3. 图表/地图初始化

onReady() {
  // 初始化图表（需要容器已渲染）
  this.initChart();
  
  // 创建地图组件
  this.mapCtx = wx.createMapContext('myMap');
}

4. 第三方库初始化

onReady() {
  // 需要DOM的库在此初始化
  this.initRichText();
  this.initVideoPlayer();
}

四、与其他生命周期对比

生命周期	时机	主要用途
onLoad	页面加载时	接收参数、初始化数据
onReady	页面渲染完成	操作DOM、初始化视图
onShow	页面显示时	更新数据、恢复状态

总结

onReady = 页面视觉准备就绪，可以安全操作页面元素和启动视觉效果的时机