微信小程序：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 = 页面视觉准备就绪，可以安全操作页面元素和启动视觉效果的时机