上海网站建设费,培训教育网站建设,网站建设费往什么科目,二维码生成在线制作在微信小程序中#xff0c;不同页面之间的通信和状态管理是常见需求#xff0c;比如#xff1a;详情页数据更新#xff0c;要刷新列表页数据。下面介绍几种在 Page 中调用另一个 Page 函数或刷新页面的方法#xff1a; 方法一#xff1a;使用全局变量和 App 实例
可以通…在微信小程序中不同页面之间的通信和状态管理是常见需求比如详情页数据更新要刷新列表页数据。下面介绍几种在 Page 中调用另一个 Page 函数或刷新页面的方法 方法一使用全局变量和 App 实例
可以通过 App 实例的 globalData 存储全局变量或在 App 实例上定义方法
// app.js
App({globalData: {userInfo: null,needRefresh: false},// 全局方法refreshHomePage() {this.globalData.needRefresh true}
})然后在目标页面检查这个标志并执行刷新
// pages/home/home.js
Page({data: {list: []},onShow() {const app getApp()// 检查是否需要刷新if (app.globalData.needRefresh) {this.loadData()app.globalData.needRefresh false}},loadData() {// 重新加载数据console.log(刷新页面数据)}
})在源页面触发刷新
// pages/detail/detail.js
Page({data: {},backAndRefresh() {// 调用App实例的方法const app getApp()app.refreshHomePage()// 返回上一页wx.navigateBack()}
})方法二使用页面栈Page Stack
微信小程序提供了getCurrentPages()方法获取当前页面栈可以直接操作栈中的页面
// 刷新上一个页面
refreshPrevPage() {// 获取当前页面栈const pages getCurrentPages()if (pages.length 2) {// 获取上一个页面实例const prevPage pages[pages.length - 2]// 直接调用上一个页面的方法if (typeof prevPage.refreshData function) {prevPage.refreshData()}}// 返回上一页wx.navigateBack()
} 方法三使用事件总线Event Bus
创建一个全局事件总线来处理跨页面通信
// utils/event-bus.js
class EventBus {constructor() {this.events {}}// 注册事件监听on(event, callback) {if (!this.events[event]) {this.events[event] []}this.events[event].push(callback)}// 触发事件emit(event, data) {if (this.events[event]) {this.events[event].forEach(callback callback(data))}}// 移除事件监听off(event, callback) {if (this.events[event]) {this.events[event] this.events[event].filter(cb cb ! callback)}}
}// 导出单例
export default new EventBus()在目标页面监听事件
// pages/home/home.js
import eventBus from ../../utils/event-busPage({data: {list: []},onLoad() {// 注册事件监听eventBus.on(refresh, this.refreshData)},onUnload() {// 移除事件监听防止内存泄漏eventBus.off(refresh, this.refreshData)},refreshData() {// 刷新数据console.log(收到刷新事件)this.loadData()},loadData() {// 加载数据的逻辑}
})在源页面触发事件
// pages/detail/detail.js
import eventBus from ../../utils/event-busPage({data: {},triggerRefresh() {// 触发刷新事件eventBus.emit(refresh)// 返回上一页wx.navigateBack()}})推荐使用方式
对于简单场景推荐使用方法一全局变量或方法二页面栈实现简单直接。
对于复杂场景特别是多个页面需要通信的情况推荐使用方法三事件总线它提供了更灵活的解耦方式。
无论使用哪种方式都要注意内存管理避免在不需要监听时仍然保留事件监听导致内存泄漏。
