当前位置：首页 > news >正文

微信小程序开发：详细解读onLoad生命周期函数

news 2025/11/7 13:45:51

今天来详细，解读一下微信小程序中的 onLoad 方法。

一、onLoad 是什么？

onLoad 是页面生命周期函数，在小程序页面首次加载时自动触发，并且在整个页面生命周期内只执行一次。

类比理解：

网页开发：window.onload
Vue：created + 路由参数获取
React：componentDidMount + 路由参数处理

二、核心特性

1. 执行时机

当小程序页面第一次被创建和渲染时
在 onShow 和 onReady 之前执行
执行顺序：onLoad → onShow → onReady

2. 唯一性

在整个页面生命周期中只执行一次
即使从其他页面返回，也不会再次触发

3. 参数获取

可以接收页面路由参数，这是它最重要的功能之一

三、基本语法 (ES6)

Page({/*** 生命周期函数--监听页面加载* @param {Object} options 路由参数对象*/onLoad(options) {// 在这里编写初始化代码console.log('页面加载完成');// 获取并处理路由参数if (options) {console.log('路由参数:', options);}}
})

四、实际应用场景

场景1：获取路由参数（最常用）

// 页面跳转时传递参数
wx.navigateTo({url: '/pages/detail/detail?id=123&title=商品详情'
})// 在目标页面的 onLoad 中接收
Page({data: {productId: '',pageTitle: ''},onLoad(options) {console.log(options.id);      // 输出: 123console.log(options.title);   // 输出: "商品详情"// 用参数初始化页面数据this.setData({productId: options.id,pageTitle: options.title});// 根据ID请求详情数据this.fetchProductDetail(options.id);},fetchProductDetail(id) {// 调用接口获取商品详情wx.request({url: `https://api.example.com/products/${id}`,success: (res) => {this.setData({ productDetail: res.data });}});}
})

场景2：页面初始化工作

Page({data: {userInfo: {},systemInfo: {}},onLoad(options) {// 1. 获取用户信息this.getUserInfo();// 2. 获取系统信息this.getSystemInfo();// 3. 初始化第三方SDKthis.initThirdPartySDK();// 4. 验证登录状态this.checkLoginStatus();},getUserInfo() {// 获取用户信息的逻辑},getSystemInfo() {wx.getSystemInfo({success: (res) => {this.setData({ systemInfo: res });}});},checkLoginStatus() {// 检查登录状态逻辑}
})

五、与其他生命周期函数的对比

生命周期	触发时机	执行次数	主要用途
onLoad	页面首次加载	1次	初始化数据、接收参数
onShow	页面显示/切入前台	多次	刷新数据、启动监听
onReady	页面初次渲染完成	1次	操作DOM、初始化图表
onHide	页面隐藏/切入后台	多次	停止监听、保存状态
onUnload	页面卸载	1次	清理工作、释放资源

六、注意事项

1. 参数类型转换

onLoad(options) {// 路由参数都是字符串类型，需要时记得转换const id = parseInt(options.id);        // 转数字const isActive = options.active === 'true'; // 转布尔值const count = Number(options.count);    // 转数字const tags = options.tags ? options.tags.split(',') : []; // 转数组
}