微信小程序：重写 onLoad 函数，统一执行代码，兼容常见的小程序（百度、头条、支付宝）

2024-03-11 17:52:35

微信小程序重写onLoad函数：统一执行代码

引言

微信小程序的onLoad函数是一个重要的生命周期函数，它会在页面加载时被调用。开发者通常利用该函数来初始化页面数据和绑定事件。然而，在某些情况下，我们需要在每个页面运行特定的代码，这可能会很麻烦。重写onLoad函数可以优雅地解决这个问题，让我们在每个页面加载时都能执行特定的代码。

重写onLoad函数

重写onLoad函数需要用到微信提供的Page函数。Page函数是用于创建小程序页面的入口点。我们可以通过修改Page函数来重写onLoad函数。

const originPage = Page

// 对微信原来的 Page 函数进行扩展  
Page = function (config = {}) {
    // 重写 Page 的 onLoad 函数, 还原上个页面传进来的参数  
    let { onLoad } = config
    config.onLoad = function (options = {}) {

        // 在这里写统一的拦截命令
        // 例如添加一些赋值或者执行一个方法

        onLoad && onLoad.call(this, extractParams(options))
    }
    return originPage(config)
}

在上面的代码中，我们重写了Page函数的onLoad方法。新的onLoad方法首先执行一个自定义的函数extractParams，该函数负责解析上一个页面传进来的参数。然后，它调用原始的onLoad方法，并传入解析后的参数。

自定义函数extractParams

extractParams函数负责解析上一个页面传进来的参数。它将params字段从查询字符串中提取出来，并将其解码为JSON对象。然后，它将解码后的对象与查询字符串中的其他参数合并，并删除params字段。

const extractParams = function (query = {}) {
    const { params } = query
    let options = { ...query }
    if (params !== undefined) {
        options = {
            ...options,
            ...JSON.parse(decodeURIComponent(params)),
        }
        delete options.params
    }
    return options
}