Uniapp获取入口页面参数的方法

在Uniapp开发中，获取入口页面参数是一项常见且重要的操作，它能让我们根据不同的参数值来实现多样化的页面展示和功能逻辑。下面就为大家详细介绍几种获取入口页面参数的方法。

在通过小程序方式启动时，可以利用小程序框架提供的参数获取机制。在App.vue的onLaunch生命周期函数中，我们能够获取到全局的启动参数。代码示例如下：

export default {
    onLaunch: function (options) {
        const query = options.query;
        console.log('启动参数:', query);
    }
}

这里的options对象包含了很多有用的信息，其中query属性就是我们传入的参数，它以对象形式呈现，我们可以方便地从中提取所需参数值。

当使用路由跳转进入页面时，获取参数的方式稍有不同。在目标页面的onLoad生命周期函数中获取参数。例如，我们从A页面跳转到B页面，并在跳转时传递参数：

// A页面跳转代码
uni.navigateTo({
    url: '/pages/B/B?param1=value1¶m2=value2'
});

在B页面的onLoad函数中这样获取参数：

export default {
    onLoad: function (options) {
        const param1 = options.param1;
        const param2 = options.param2;
        console.log('获取到的参数param1:', param1);
        console.log('获取到的参数param2:', param2);
    }
}

如果是通过浏览器地址栏传入参数进入应用，我们可以利用URL解析的方式来获取。在页面中可以使用如下代码：

function getUrlParams() {
    const url = decodeURIComponent(window.location.search);
    const params = {};
    url.substr(1).split('&').forEach((item) => {
        const parts = item.split('=');
        params[parts[0]] = parts[1];
    });
    return params;
}
const params = getUrlParams();
console.log('通过浏览器地址栏获取的参数:', params);

掌握这些Uniapp获取入口页面参数的方法，能够极大地提升我们开发的灵活性和实用性，无论是从全局启动参数的处理，还是页面间跳转传递参数的获取，都能更加得心应手，从而打造出功能丰富且用户体验良好的应用程序。