uni-app传参的方法

1. URL 参数传递
通过 navigateToredirectToreLaunch 等 API,在页面路径中携带参数。
这种方法适合传递简单的字符串或数值参数,不适合传递复杂数据结构。

// A 页面
uni.navigateTo({
  url: '/pages/B/B?param1=value1&param2=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(本地存储)传递
将数据存储到本地缓存中,在目标页面中读取。
使用完后,可以调用 removeStorageSyncclearStorageSync 来清除缓存数据。

// 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.$emituni.$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'
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值