今天来详细，解读一下微信小程序中的 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);      // 输出: 123
    console.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. 初始化第三方SDK
    this.initThirdPartySDK();
    
    // 4. 验证登录状态
    this.checkLoginStatus();
  },
  
  getUserInfo() {
    // 获取用户信息的逻辑
  },
  
  getSystemInfo() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({ systemInfo: res });
      }
    });
  },
  
  checkLoginStatus() {
    // 检查登录状态逻辑
  }
})

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

六、注意事项

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(',') : []; // 转数组
}

总结

onLoad 方法是微信小程序页面的核心入口点

主要职责：

1. ✅ 接收和处理路由参数
2. ✅ 执行一次性初始化操作
3. ✅ 发起初始数据请求
4. ✅ 准备页面所需的基础数据