跨页面通信

当小程序有了多个页面后，页面之间该如何进行通信呢？

本文对一些常见的场景给出一些解决思路：

• 页面跳转
• 通过全局 app 对象进行通信

页面跳转

当从 pageA.js 页面跳转到 pageB.js 页面时，使用 hmApp.gotoPage() API，通过 param 参数向 pageB.js 页面传递参数

hmApp.gotoPage({
  url: 'path/to/pageB',
  param: JSON.stringify({
    id: '0',
    type: 'normal'
  })
})

Page({
  onInit(params) {
    const paramsObj = JSON.parse(params)
    const { id, type } = paramsObj
    console.log(id === '0') // true
    console.log(type === 'normal') // true
  }
})

此方案只可用于页面跳转的单向传递，如果在 pageB.js 进行了一些操作，再返回 pageA.js 页面时，调用 hmApp.goBack API，并不支持参数传递，这种情况就需要借助全局的 app 对象来进行通信

通过全局 app 对象进行通信

在 app.js 中的 App 构造函数参数中，传入 globalData 对象

App({
  globalData: {
    type: 'normal'
  }
})

Page({
  build() {
    console.log(getApp()._options.globalData.type)
  }
})

// ...
getApp()._options.globalData.type = 'classic'

hmApp.goBack()

我们的页面跳转还是从 PageA.js 对 PageB.js

在 pageB.js 中修改了挂载在全局 app 对象上的 globalData 对象，当我们调用 hmApp.goBack() 从 pageB.js 页面回到 pageA.js 页面的时候，就可以在 pageA.js 中通过全局 app 对象获取到修改过的 type 值