小程序页面路由传参的方法?

小程序页面路由传参的方法有三种:

        1.URL参数传递:通过在页面跳转的URL中携带参数实现传参。可以使用wx.navigateTowx.redirectTo等跳转方法,并在URL中添加参数。

示例:

// PageA.wxml
<button bindtap="navigateToPageB">跳转到PageB</button>

// PageA.js
Page({
  navigateToPageB() {
    wx.navigateTo({
      url: '/pages/pageB/pageB?id=123&name=小明'
    });
  }
});

// PageB.js
Page({
  onLoad(options) {
    console.log(options.id); // 输出:123
    console.log(options.name); // 输出:小明
  }
});

        2.打开新页面时传递参数:在打开新页面的时候,可以通过options参数将数据传递给新页面。

示例:

// PageA.wxml
<button bindtap="navigateToPageB">跳转到PageB</button>

// PageA.js
Page({
  navigateToPageB() {
    wx.navigateTo({
      url: '/pages/pageB/pageB'
    });
  }
});

// PageB.js
Page({
  onLoad(options) {
    console.log(options.id); // 输出:123
    console.log(options.name); // 输出:小明
  }
});

// 在调用 `navigateTo` 时传递参数
wx.navigateTo({
  url: '/pages/pageB/pageB?id=123&name=小明'
});

        3.全局变量传递:可以在app.js全局定义一个变量,在不同页面之间共享数据。

示例:

// app.js
App({
  globalData: {
    id: 123,
    name: '小明'
  }
});

// PageA.js
Page({
  navigateToPageB() {
    wx.navigateTo({
      url: '/pages/pageB/pageB'
    });
  }
});

// PageB.js
const app = getApp();

Page({
  onLoad() {
    console.log(app.globalData.id); // 输出:123
    console.log(app.globalData.name); // 输出:小明
  }
});

这些方法的作用是可以在不同页面之间传递数据,实现页面间的交互和数据共享。通过传参,可以将数据从一个页面传递到另一个页面,以便于展示和处理相关数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值