快捷導(dǎo)航

微信小程序中跨頁(yè)面調(diào)用函數(shù)來(lái)刷新頁(yè)面的方法

更新時(shí)間：2025年06月17日 11:30:18 作者：aiee

在微信小程序中,不同頁(yè)面之間的通信和狀態(tài)管理是常見(jiàn)需求,比如：詳情頁(yè)數(shù)據(jù)更新,要刷新列表頁(yè)數(shù)據(jù),下面介紹幾種在Page中調(diào)用另一個(gè)Page函數(shù)或刷新頁(yè)面的方法,感興趣的朋友一起看看吧

在微信小程序中，不同頁(yè)面之間的通信和狀態(tài)管理是常見(jiàn)需求，比如：詳情頁(yè)數(shù)據(jù)更新，要刷新列表頁(yè)數(shù)據(jù)。下面介紹幾種在 Page 中調(diào)用另一個(gè) Page 函數(shù)或刷新頁(yè)面的方法：

方法一：使用全局變量和 App 實(shí)例

可以通過(guò) App 實(shí)例的 globalData 存儲(chǔ)全局變量，或在 App 實(shí)例上定義方法：

// app.js
App({
  globalData: {
    userInfo: null,
    needRefresh: false
  },
  // 全局方法
  refreshHomePage() {
    this.globalData.needRefresh = true
  }
})

然后在目標(biāo)頁(yè)面檢查這個(gè)標(biāo)志并執(zhí)行刷新：

// pages/home/home.js
Page({
  data: {
    list: []
  },
  onShow() {
    const app = getApp()
    // 檢查是否需要刷新
    if (app.globalData.needRefresh) {
      this.loadData()
      app.globalData.needRefresh = false
    }
  },
  loadData() {
    // 重新加載數(shù)據(jù)
    console.log('刷新頁(yè)面數(shù)據(jù)')
  }
})

在源頁(yè)面觸發(fā)刷新：

// pages/detail/detail.js
Page({
  data: {},
  backAndRefresh() {
    // 調(diào)用App實(shí)例的方法
    const app = getApp()
    app.refreshHomePage()
    // 返回上一頁(yè)
    wx.navigateBack()
  }
})

方法二：使用頁(yè)面棧（Page Stack）

微信小程序提供了getCurrentPages()方法獲取當(dāng)前頁(yè)面棧，可以直接操作棧中的頁(yè)面：

// 刷新上一個(gè)頁(yè)面
refreshPrevPage() {
  // 獲取當(dāng)前頁(yè)面棧
  const pages = getCurrentPages()
  if (pages.length >= 2) {
    // 獲取上一個(gè)頁(yè)面實(shí)例
    const prevPage = pages[pages.length - 2]
    // 直接調(diào)用上一個(gè)頁(yè)面的方法
    if (typeof prevPage.refreshData === 'function') {
      prevPage.refreshData()
    }
  }
  // 返回上一頁(yè)
  wx.navigateBack()
}

方法三：使用事件總線（Event Bus）

創(chuàng)建一個(gè)全局事件總線來(lái)處理跨頁(yè)面通信：

// utils/event-bus.js
class EventBus {
  constructor() {
    this.events = {}
  }
  // 注冊(cè)事件監(jiān)聽(tīng)
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(callback)
  }
  // 觸發(fā)事件
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data))
    }
  }
  // 移除事件監(jiān)聽(tīng)
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback)
    }
  }
}
// 導(dǎo)出單例
export default new EventBus()

在目標(biāo)頁(yè)面監(jiān)聽(tīng)事件：

// pages/home/home.js
import eventBus from '../../utils/event-bus'
Page({
  data: {
    list: []
  },
  onLoad() {
    // 注冊(cè)事件監(jiān)聽(tīng)
    eventBus.on('refresh', this.refreshData)
  },
  onUnload() {
    // 移除事件監(jiān)聽(tīng)，防止內(nèi)存泄漏
    eventBus.off('refresh', this.refreshData)
  },
  refreshData() {
    // 刷新數(shù)據(jù)
    console.log('收到刷新事件')
    this.loadData()
  },
  loadData() {
    // 加載數(shù)據(jù)的邏輯
  }
})

在源頁(yè)面觸發(fā)事件：

// pages/detail/detail.js
import eventBus from '../../utils/event-bus'
Page({
  data: {},
  triggerRefresh() {
    // 觸發(fā)刷新事件
    eventBus.emit('refresh')
    // 返回上一頁(yè)
    wx.navigateBack()
  }
})