Taro EventChannel 使用总结

当我们开发的过程中会用到 Taro 的页面跳转功能，例如下面的代码：

/* A 界面 */
Taro.navigateTo({
  url: '...',
  success: (callback) => {},
  event: { /* 存放自定义 event 事件 */
    getList: (resp) => {
      console.log('.... resp', resp, resp?.list)
    }
  }
})

/* B 界面 */
const onBtnClick = () => {
  const page = Taro.getCurrentPages()
  const current = pages[pages.length - 1] /* 从堆栈中获取当前界面的属性 */
  const eventChannel = current.getOpenerEventChannel()
  eventChannel.emit('getList', {
    list: { ... }
  })
    
  Taro.navigateBack({ delta: 1 })
}

这个时候 B -> A 界面能够正常讲 getList 事件返回给上一个界面，但是这个写法在小程序（微信和支付宝），但是在 H5 就回出现 script error 错误，所以这个写法并不适用于 H5 端。要兼容处理的话现阶段采用一下写法（不一定最优）

/* A 界面 */
useDidShow(() => {
  if (isAlipay() || isWeapp()) {
    const pages = Taro.getCurrentPages()
    let currentPage = pages[pages.length - 1] /* 指向当前界面 */
    console.log('---- getList', currentPage, currentPage.data)
  } else {
    /* 从 storage 中获取数据 */
    Taro.getStorageSync('getList')
  }
})

useHidShow(() => {
  /* 清除无用内存 */
  Taro.removeStorageSync('getList')
})

/* B 界面 */
const list = []

if (isAlipay() || isWeapp()) {
  const pages = Taro.getCurrentPages()
  const current = pages[pages.length - 2] /* 指向 A 界面 */
  current.setData(list)
} else {
  Taro.setStorage({
    key: 'getList',
    data: list
  })
}

这个写法能够将数据成功的从 B 界面带入到 A 界面

为什么使用这个方式：

1. store 现在太过臃肿，混乱，不宜再堆叠数据，防止不宜维护
2. url 路由跳转，原理是 get 请求，有长度限制，并且 Taro.navigateBack 不支持数据传递
3. 说为什么之前不使用 navigateTo（或者其他的） 而使用 navigateBack， 这是因为 navigateTo 还有其他的跳转方式 相当于 history 的 pushState 会留下痕迹，返回的时候页面就不对了（也算是 Taro API 不全面的问题）