小程序页面路由传参的方法有三种:
1.URL参数传递:通过在页面跳转的URL中携带参数实现传参。可以使用wx.navigateTo
或wx.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); // 输出:小明 } });
这些方法的作用是可以在不同页面之间传递数据,实现页面间的交互和数据共享。通过传参,可以将数据从一个页面传递到另一个页面,以便于展示和处理相关数据。