郑州市做网站的公司,wordpress社区聊天室,手机网站关键词seo,软件开发详细设计文档1.通过 URL 传参
在页面跳转时#xff0c;可以在 URL 中携带参数进行传递#xff0c;然后在目标页面的 onLoad 生命周期中获取参数。
// 在页面 A 中跳转到页面 B 并传递参数
wx.navigateTo({url: /pages/detail/index?id123
});// 在页面 B 的 onLoad 生命周期中获取参数…1.通过 URL 传参
在页面跳转时可以在 URL 中携带参数进行传递然后在目标页面的 onLoad 生命周期中获取参数。
// 在页面 A 中跳转到页面 B 并传递参数
wx.navigateTo({url: /pages/detail/index?id123
});// 在页面 B 的 onLoad 生命周期中获取参数
onLoad: function (options) {console.log(options.id); // 输出 123
}
2.通过 navigateTo 方法传递数据:
通过 navigateTo 方法传递数据的方式比较常见可以通过 wx.setStorageSync 方法在当前页面设置数据然后在目标页面的 onLoad 生命周期中使用 wx.getStorageSync 方法获取数据。以下是一个示例代码来演示这种传递数据的方式
在页面 A 中设置数据并跳转到页面 B
// 在页面 A 中设置数据
wx.setStorageSync(key, value);// 使用 navigateTo 方法跳转到页面 B
wx.navigateTo({url: /pages/pageB/pageB
});
在页面 B 的 onLoad 生命周期中获取数据
Page({onLoad: function(options) {// 在页面 B 的 onLoad 生命周期中获取数据var data wx.getStorageSync(key);console.log(data); // 输出 value}
});
3.通过全局变量传值
可以在 app.js 文件中定义全局变量然后在任何页面中都可以访问和修改这些全局变量。
在 app.js 文件中定义全局变量
// app.js
App({globalData: {userInfo: null}
});
在任意页面中访问和修改全局变量
// 在任意页面中访问和修改全局变量
// 设置全局变量
getApp().globalData.userInfo { name: Alice, age: 30 };
// 获取全局变量
console.log(getApp().globalData.userInfo); // 输出 { name: Alice, age: 30 }
4.通过事件总线传值
可以使用事件总线进行页面间通信创建一个事件总线实例然后在需要传递数据的页面发送事件在需要接收数据的页面监听事件。
1.创建一个事件总线实例
// eventBus.js
const EventBus {events: {},on: function(event, callback) {if (!this.events[event]) {this.events[event] [];}this.events[event].push(callback);},emit: function(event, data) {if (this.events[event]) {this.events[event].forEach(callback {callback(data);});}}
};module.exports EventBus;
2.在发送数据的页面发送事件
// pageA.js
const eventBus require(../../utils/eventBus);// 发送事件
eventBus.emit(dataUpdated, { name: Bob, age: 25 });
3.在接收数据的页面监听事件
// pageB.js
const eventBus require(../../utils/eventBus);Page({onLoad: function() {// 监听事件eventBus.on(dataUpdated, (data) {console.log(data); // 输出 { name: Bob, age: 25 }});}
});
这些都是微信小程序中常用的页面间传值方式
