微信小程序页面之间正向传值和逆向传值

正向传值

一 直接使用URL传值

  wx.navigateTo({
      url: `/pages/contacts-edit/contacts-edit?name=zhangsan&idx=1`,
    })

但是如果一个对象结构比较复杂, 数据量比较大, 即使转换成JSON也有可能会被莫名其妙的截取.
所以使用URL传值的时候, 需要先编码
我是这样做的

// A页面触发事件, 跳转到B页面
  _onClickCell: function (e) {
	   let contacts = {
    	name: '张三',
        phone: '13800001111',
        safePhone: '138****1111',
        idCard: '230524202113324455',
        safeIdCard: '230524********4455',
        typeStr: '成人',
        gender: '0',
        genderStr: '保密'
    }
    // 先对数据进行JSON
    let jsonStr = JSON.stringify(contacts)
    // 对数据进行URI编码, 如果不进行这一步操作, 数据有可能会被截断, 少量数据没有问题, 如果是一个大的对象, 就容易被截断获取不到完整的数据
    let data = encodeURIComponent(jsonStr)

    wx.navigateTo({
      url: `/pages/contacts-edit/contacts-edit?contacts=${data}&idx=${idx}`,
    })  
  },
  
  // B页面再onLoad方法中接收参数
onLoad: function (options) {
    let idx = (!!options.idx) ? Number(options.idx) : -1
    let contacts = {}
    if (!!options.contacts) {
      let jsonStr = decodeURIComponent(options.contacts)
      contacts = JSON.parse(jsonStr)
    }
    this.setData({ contacts, idx })
  },

二 使用eventChannel来传递

//A页面准备跳转到B页面
_onClickCell: function (e) {
  let address =  {
    	id: 457,
        name: '小艾-3',
    	countryCode: '86',
    	phone: '13892292222',
    	reginoCode: '871',
    	city: '市辖区',
    	area: '海淀区',
    	street: '东北旺路8号院中关村软件园8号楼华夏科技大厦',
    	address: '中国北京市市辖区海淀区东北旺路8号院中关村软件园8号楼华夏科技大厦'
  },

    wx.navigateTo({
      url: '/pages/address-edit/address-edit',
      success: res => {
        // 这里给要打开的页面传递数据.  第一个参数:方法key, 第二个参数:需要传递的数据
        res.eventChannel.emit('setAddressEditData', address)
      }
    })
  }

//B页面在onLoad方法中接收参数
  onLoad: function (options) {
    // 接收上个页面传递来的数据
    let eventChannel = this.getOpenerEventChannel()
    // setAddressEditData和上个页面设置的相同即可
    eventChannel.on('setAddressEditData', (address) => {
      this.setData({  
      	address: address || {},
      })
    })
  },

---

逆向传值

一 使用全局对象, 获取全部页面来逆向传值

 _onClickComplete: function () {
// 获取当前全部的页面栈
   let arr = getCurrentPages()    
 // 获取到要逆向传值的上一个页面
   let lastPage = (arr.length >= 2) ? arr[arr.length - 2] : undefined
  // 判断拿到的上一个页面是不是我们要的页面 
   if (!!lastPage && lastPage.route == 'pages/contacts-list/contacts-list') {
      /* 
      这里我们就拿到了上一个页面的页面对象, 这里其实我们就可以使用lastPage做很多事情了, 
      例如直接操作lastPage.data, 修改上一个页面的数据  
      或者调用这个页面内的方法,
      我上一个页面预留了一个更新方法, 所以这里就直接用上一个页面调用数据刷新的方法, 我这里给赋值, 就可以携带数据回上一个页面了
      */
      lastPage.updateContactList(this.data.contacts, this.data.idx)
      // 返回上一个页面
      wx.navigateBack()      
    }
  },

二 使用eventChannel来逆向传值 B->A

// B页面
  _onClickComplete: function (e) {
    let eventChannel = this.getOpenerEventChannel()
    // updateAddressListData 这个方法需要上一个页面的支持, 上一个页面在navigateTo方法中的events数据中定义这个方法来接收数据
    eventChannel.emit('updateAddressListData', this.data.address, this.data.idx)
    wx.navigateBack()
  },
  
  // A页面需要的支持
 _onClickCell: function (e) {
    wx.navigateTo({
      url: '/pages/address-edit/address-edit',
      events: {
        // 这里用来接收后面页面传递回来的数据
        updateAddressListData: (address, index) => {
         	// 这里处理数据即可
        }
      } 
    })
  }

---

---

代码片段