微信小程序页面传值的方式

pageA => pageB（pageA跳转pageB）

1、数据缓存

在pageA中缓存数据，跳转到pageB后获取缓存数据进行后续逻辑处理。

// pageA.js设置缓存

wx.setStorage({
  key:"key",
  data:"value"
})

// wx.setStorage的同步版本
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

// pageB.js读取缓存

wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})

// wx.getStorage 的同步版本
try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

2、query路由传参

1、使用<navigator>标签实现

<!-- pageA.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

<!-- pageB.wxml -->
<view> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

// pageB.js
Page({
  data: {
    title: ''
  },
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

2、使用路由API实现

// pageA.js

// redirectTo
wx.redirectTo({
  url: 'pageB?title=1'
})

// navigateTo
wx.navigateTo({
  url: 'pageB?title=1'
})

// pageB.js

Page({
  onLoad: function(option){
    console.log(option.query) // { title: 1 }
  }
})

3、app全局变量：globalData

//app.js
App({
  onLaunch: function() {
    // 定义的全局变量,如token,某些状态等,放在globalData下
    this.globalData = {
      title: '',
      hasTitleChange: false
    }
  }
})

// pageA.js

// 设置globalData中的变量
getApp().globalData.title = 1

// pageB.js

// 获取globalData中的变量
console.log(getApp().globalData.title) // 1

4、EventChannel

使用事件通信通道（EventChannel）实现

// pageA.js

wx.navigateTo({
  url: 'pageB',
  success: (res) => {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('dataFromOpenerPageA', { title: 1 })
  }
})

// pageB.js

Page({
  onLoad: function(option){
    const eventChannel = this.getOpenerEventChannel()
    // 监听dataFromOpenerPageA事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('dataFromOpenerPageA', (data) => {
      console.log(data) // { title: 1 }
    })
  }
})

pageB => pageA（pageB返回pageA）

1、数据缓存

2、PageObject的getCurrentPages()

// pageB.js

let pages = getCurrentPages()
// 获取pageObject数组中的pageA
let prevPage = pages[pages.length - 2]
// 设置pageA页面的变量
prevPage.setData({
    hasChangeTitle: true
})
// 返回到pageA
wx.navigateBack({
    delta: 1
})

3、app全局变量：globalData

4、EventChannel

// pageA.js

wx.navigateTo({
  url: 'pageB',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPageB: (data) => {
      console.log(data) // { hasChangeTitle: true }
      // 获取到pageB中传过来的数据并且赋值
      this.setData(data)
    },
    someEvent: (data) => {
      console.log(data) // { data: 'test }
    }
    ...
  }
})

// pageB.js

Page({
  onLoad: function(option){
    const eventChannel = this.getOpenerEventChannel()
    // 将数据传送到pageA中
    eventChannel.emit('acceptDataFromOpenedPage', { hasChangeTitle: true });
    eventChannel.emit('someEvent', { data: 'test' });
  }
})

结语：

个人在开发小程序时用到的，做一下整理，可能不全面，还希望大家能留言指正，感谢。