1. URL 参数传递
通过页面跳转时在 URL 中附加参数,目标页面通过 `onLoad` 方法获取。
// 页面跳转并传递参数
wx.navigateTo({
url: '/pages/targetPage/targetPage?param1=value1¶m2=value2'
});
// 目标页面获取参数
Page({
onLoad: function(options) {
console.log(options.param1); // 输出: value1
console.log(options.param2); // 输出: value2
}
});
2. 全局变量
使用 `getApp()` 获取全局对象,存储和访问数据。
// app.js 中定义全局变量
App({
globalData: {
userInfo: null
}
});
// 页面中设置全局变量
const app = getApp();
app.globalData.userInfo = { name: 'John' };
// 其他页面获取全局变量
const app = getApp();
console.log(app.globalData.userInfo); // 输出: { name: 'John' }
3. 本地存储
使用 `wx.setStorageSync` 和 `wx.getStorageSync` 进行数据存储和读取。
// 存储数据
wx.setStorageSync('key', 'value');
// 获取数据
const value = wx.getStorageSync('key');
console.log(value); // 输出: value
4. 事件传递
通过 `triggerEvent` 在组件间传递数据。
// 子组件触发事件并传递数据
this.triggerEvent('myevent', { data: 'some data' });
// 父组件监听事件
<my-component bindmyevent="onMyEvent"></my-component>
Page({
onMyEvent: function(e) {
console.log(e.detail.data); // 输出: some data
}
});
5. 页面栈传递
通过 `getCurrentPages` 获取页面栈,直接访问或修改页面数据。
// 获取页面栈
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
// 修改前一页数据
prevPage.setData({
someData: 'new value'
});
总结
URL 参数传递:适合简单数据,页面跳转时使用。
全局变量:适合跨页面共享数据。
本地存储:适合持久化数据。
事件传递:适合组件间通信。
页面栈传递:适合页面间直接数据交互。