微信小程序onLoad函数（options参数和onShow()区别）

一、onLoad()和onShow()的区别

        onLoad 和 onShow 是在 Vue.js 或小程序（如微信小程序）生命周期中的两个钩子函数，它们在不同的时间点被调用，并具有不同的用途。

onLoad

  onLoad 是页面或组件加载时的生命周期钩子。它在页面或组件被初始化时调用，并且只调用一次。通常用于获取初始化数据、设置页面状态等操作。

场景：

• 页面或组件首次加载时执行的操作。
• 获取传递给页面或组件的参数。
• 初始化数据。

示例：

onLoad(options) {
    console.log('页面或组件加载');
    this.getData(options.id);
}

onShow

  onShow 是页面或组件显示时的生命周期钩子。它在页面或组件每次显示时调用，不论是首次加载还是从后台切换到前台。通常用于刷新页面数据或状态。

场景：

• 每次页面或组件显示时需要执行的操作。
• 切换到当前页面时，刷新页面内容或状态。
• 需要频繁更新的数据或状态。

示例：

onShow() {
    console.log('页面或组件显示');
    this.refreshData();
}

区别总结

• 调用时机：onLoad 仅在页面或组件初始化时调用一次；onShow 每次页面或组件显示时调用。
• 用途：onLoad 用于初始化数据和状态；onShow 用于刷新或更新页面数据和状态。 

应用示例

        下面的示例代码展示了 onLoad 和 onShow 的区别及其各自的用途：

export default {
    data() {
        return {
            data: null,
            refreshCount: 0
        };
    },
    onLoad(options) {
        console.log('页面加载');
        // 初始化数据
        this.data = this.fetchData(options.id);
    },
    onShow() {
        console.log('页面显示');
        // 每次页面显示时刷新数据
        this.refreshCount++;
        this.refreshData();
    },
    methods: {
        fetchData(id) {
            // 获取数据
            return { id: id, content: '初始数据' };
        },
        refreshData() {
            // 刷新数据
            console.log('刷新数据，第' + this.refreshCount + '次');
        }
    }
};

 二、onLoad()的options参数

  options 参数包含了打开当前页面的路径中的参数。换句话说，options 包含了通过 URL 传递给该页面的所有参数。

        例如，如果你通过以下 URL 打开页面

/pages/example/example?orderId=123&userName=JohnDoe&productId=456

        那么 options 对象将包含以下内容：

{
    orderId: "123",
    userName: "JohnDoe",
    productId: "456"
}

示例代码

假设有一个 detail 页面，在这个页面的 onLoad 方法中，你可以像这样访问这些参数：

Page({
    data: {
        orderId: '',
        userName: '',
        productId: ''
    },
    
    onLoad(options) {
        // 通过 URL 传递的参数将包含在 options 对象中
        console.log('页面加载时接收到的参数:', options);

        // 将 URL 参数保存到 data 中
        this.setData({
            orderId: options.orderId || '',
            userName: options.userName || '',
            productId: options.productId || ''
        });

        // 根据传递的参数执行相应的操作
        if (this.data.orderId) {
            this.fetchOrderDetails(this.data.orderId);
        }

        if (this.data.userName) {
            this.greetUser(this.data.userName);
        }

        if (this.data.productId) {
            this.fetchProductInfo(this.data.productId);
        }
    },

    fetchOrderDetails(orderId) {
        console.log('Fetching details for order:', orderId);
        
    },

    greetUser(userName) {
        console.log('Greeting user:', userName);
        
    },

    fetchProductInfo(productId) {
        console.log('Fetching info for product:', productId);
        
    }
});