1. URL 参数传递
通过 navigateTo
、redirectTo
、reLaunch
等 API,在页面路径中携带参数。
这种方法适合传递简单的字符串或数值参数,不适合传递复杂数据结构。
// A 页面
uni.navigateTo({
url: '/pages/B/B?param1=value1¶m2=value2'
})
// B 页面
onLoad: function(options) {
console.log(options.param1) // 输出 'value1'
console.log(options.param2) // 输出 'value2'
}
2. 全局变量传递
将参数存储在全局变量中,在目标页面进行读取。
要注意全局变量的生命周期管理,防止数据覆盖或丢失。
// A 页面
getApp().globalData.param1 = 'value1';
uni.navigateTo({
url: '/pages/B/B'
})
// B 页面
onLoad: function() {
const app = getApp();
console.log(app.globalData.param1) // 输出 'value1'
}
3. 使用 storage(本地存储)传递
将数据存储到本地缓存中,在目标页面中读取。
使用完后,可以调用 removeStorageSync
或 clearStorageSync
来清除缓存数据。
// A 页面
uni.setStorageSync('param1', 'value1');
uni.navigateTo({
url: '/pages/B/B'
})
// B 页面
onLoad: function() {
const param1 = uni.getStorageSync('param1');
console.log(param1) // 输出 'value1'
}
4. 使用事件机制传递
借助 uni.$emit
和 uni.$on
实现页面间的数据传递。
这种方式适合监听数据的变化或需要在页面跳转完成后再传递参数的场景
// A 页面
uni.$emit('eventToB', { param1: 'value1' });
uni.navigateTo({
url: '/pages/B/B'
})
// B 页面
onLoad: function() {
const that = this;
uni.$on('eventToB', function(data) {
console.log(data.param1) // 输出 'value1'
});
}
5. 使用 getCurrentPages()
传递
通过获取页面栈,直接访问前一个页面的数据。
这种方式适合在返回上一个页面时传递数据
// A 页面
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; // 获取上一个页面
prevPage.setData({
param1: 'value1'
});
uni.navigateBack();
// B 页面
onShow: function() {
const param1 = this.data.param1;
console.log(param1) // 输出 'value1'
}