背景描述

在原生微信小程序开发过程中，开发者会遇到需要从a页面跳转至b页面，页面b完成操作后回到a页面并触发a页面方法的场景，此时，开发者可能会采用在wx.navigateBack()的success回调函数中使用getCurrentPages()方法获取到小程序页面栈并调用目标页面的方法。具体代码如下。

跨页面通信的方法有很多比如 globalData、storage等，这里仅针对getCurrentPages()

wx.navigateBack({
   success: () => {
     // 获取页面栈
     const pages = getCurrentPages();
     // 获取到前一个页面
     const currentPage = pages[pages.length - 1];
     // 调用方法 传递数据
     currentPage.jobSelectDone(filterSelectedArr);
   },
});

这种页面间通信方式在ios环境下测试一切正常，但是在安卓或者是鸿蒙环境下，就可能会出现找不到方法的报错 xxx is not a function

解决方法

为了解决上述问题，我采用了原生微信的EventChannel页面间事件通信通道。该方法从基础库2.7.3开始支持，兼容性良好。 EventChannel文档地址 具体代码示例如下

// a页面跳转至b页面 传入 events对象，并注册一个名为 jobSelectDone 的自定义事件
goJobSelect() {
    wx.navigateTo({
      url: "b页面路径",
      events:{
        jobSelectDone:(result = [])=>{
          this.jobSelectDone(result)
        }
      },
    });
 }
 
// b页面
// b页面完成逻辑后 使用 this.getOpenerEventChannel().emit(）,触发a页面注册的自定义事件，并传递数据
this.getOpenerEventChannel().emit('jobSelectDone', [])
wx.navigateBack()

更多场景

1. A页面为订单页面，B页面为填写发票信息页面，
2. A页面跳转B页面携带开票金额（amount），
3. A页面如果已填写，再次跳转B页面，需要携带发票信息（invoice），方便直接编辑
4. B页面填写后返回更新A页面的发票信息（invoice）

//A页面跳转填写发票表单信息
  toFillOutInvoiceInfo() {
    wx.navigateTo({
      url: `/pages/invoice/invoice-info-form/invoice-info-form`,
      events:{
        // 注册事件 B页面完成时出发
        updateInvoice:(result)=>{
          this.setData({invoice:result})
        }
      },
      success:(res)=>{
        const params = {
          amount: this.data.amount,
          invoice:this.data.invoice.invoice_title ? JSON.stringify(this.data.invoice) : ""
        }
        res.eventChannel.emit('sendQueryParams',params)
      }
    });
  },
    
  //B页面
  onLoad(){
    // B页面加载时 触发事件接收A页面传递过来的数据
    this.getOpenerEventChannel().once('sendQueryParams',(params)=>{
      const {amount,invoice} = parmas;
      this.setData({amount,invoice})
    })
  }
  // B页面操作完成，触发事件把数据传递给A页面
  submit(){
    this.getOpenerEventChannel().emit('updateInvoice',this.data.invoice);
    wx.navigateBack();
  }

参考资料

# 小程序EventChannel的一些理解和使用实践

# 微信小程序EventChannel文档