微信小程序页面间正向与逆向传值的方法及注意事项

2025年06月22日阅读 2

摘要：【正向传值方式】1.URL传值微信小程序中，URL传值是最基本的正向数据传递手段。它通过在页面跳转的路径之后附加参数来完成数据传递，比如："pages/detail/detail?id=123&name=test"。这种传值方法适用于传输简单的字符串或数...

【正向传值方式】

1. URL传值

微信小程序中，URL传值是最基本的正向数据传递手段。它通过在页面跳转的路径之后附加参数来完成数据传递，比如："pages/detail/detail?id=123&name=test"。这种传值方法适用于传输简单的字符串或数字等数据类型。

2. URL传值的局限性

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

在数据结构复杂或数据量庞大的情况下，直接通过URL传递值可能会遭遇难题。即便将对象转换成JSON格式的字符串，仍有可能遭遇截断的风险。鉴于此，建议对即将传递的数据进行编码处理，以确保数据能够完整无误地传输。


params = JSON对象序列化后的字符串通过encodeURIComponent函数进行编码处理。
wx.navigateTo({
URL地址为：/pages/detail/detail，其中参数部分通过params=${params}进行传递。
})

接收页面解码：


onLoad(options) {
data等于JSON对象，该对象是通过解析已解码的URL参数字符串得到的。
}
【其他正向传值方式】
1. 全局变量传值
在app.js文件中，我们可以定义全局变量，并在页面切换之前对其赋值，随后在目标页面中提取该变量值。
2. 缓存传值
通过wx.setStorageSync进行数据保存，在目标页面中，可通过wx.getStorageSync方法来提取这些数据。
【逆向传值方式】
1. 全局对象传值
通过获取页面栈实现逆向传值：

javascript

// B页面传值给A页面

let pages = getCurrentPages()

prevPage.setData({

backData: {...}

})

wx.navigateBack()


2. 事件传值
通过事件监听机制实现逆向传值：

javascript

// 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 })
  },

// A页面

Page({

onLoad() {

此事件通道由我通过获取打开者的事件通道方式设定。

此事件通道监听'backEvent'事件，当触发时，执行以下操作：{

// 处理返回数据

})

}

//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 || {},
      })
    })
  },

})

// B页面

Page({

onLoad() {

this.eventChannel = this.getOpenerEventChannel()

onBack() {

此事件通道触发，发送'backEvent'事件，附带相关信息。

 _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()      
    }
  },

wx.navigateBack()

})

【最佳实践建议】

1. 少量简单数据推荐使用URL传值

2. 大量或复杂数据建议使用全局变量或缓存

3. 逆向传值优先考虑事件机制

4. 注意数据安全，重要数据不要明文传递

【代码优化建议】

// 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) => {
         	// 这里处理数据即可
        }
      } 
    })
  }