微信小程序中跨页面调用函数来刷新页面

在微信小程序中，不同页面之间的通信和状态管理是常见需求，比如：详情页数据更新，要刷新列表页数据。下面介绍几种在 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-bus'

Page({
  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-bus'

Page({
  data: {},

  triggerRefresh() {
    // 触发刷新事件
    eventBus.emit('refresh')
      
    // 返回上一页
    wx.navigateBack()
  }
  
})

推荐使用方式

对于简单场景，推荐使用方法一（全局变量）或方法二（页面栈），实现简单直接。

对于复杂场景，特别是多个页面需要通信的情况，推荐使用方法三（事件总线），它提供了更灵活的解耦方式。

无论使用哪种方式，都要注意内存管理，避免在不需要监听时仍然保留事件监听，导致内存泄漏。