微信小程序页面之间传递数据_微信小程序页面间传递数据

使用路由传递数据：

跳转时将数据使用 ? 拼接在 URL 后面；在另一个页面的 onLoad() 方法的参数中即可获取到传递的参数。

微信小程序对路由传参的大小有限制。

接收数据的页面获取到的都是字符串。也就是说，即使传递数据的页面传递的参数是布尔值或者数值，到了接收数据的页面获取到的也都是字符串。

如果数据中有 ? 等特殊字符，微信会做截取。
解决方法：利用 encodeURIComponent() 和 decodeURIComponent() 对要传递的数据进行编解码。

// 传递数据的页面
const selectData = encodeURIComponent(this.data.path);
wx.redirectTo({
   url: `../order/order?path=${path}`
})

// 接收数据的页面
onLoad(options){
	const path = decodeURIComponent(options.path);
}
1
2
3
4
5
6
7
8
9
10

如果将对象类型的数据拼接在路径后面，到另一个页面获取时会发现是 "[object,object]"，无法使用。
解决方法：利用 JSON.stringify() 和 JSON.parse()。

// 传递数据的页面
const selectData = JSON.stringify(this.data.selectData);
wx.redirectTo({
   url: `../order/order?selectData=${selectData}`
})

// 接收数据的页面
onLoad(options){
	const selectData = JSON.parse(options.selectData);
}
1
2
3
4
5
6
7
8
9
10

// 传递数据的页面
wx.navigateTo({
     url: `../select/select?id=${id}`,
})

// 接收数据的页面
onLoad(options){
	const id = options.id;
}
1
2
3
4
5
6
7
8
9

使用 wx.navigateTo() 中的 EventChannel 传递数据：

上一页面向被打开页面传递数据：

// 上一页面
wx.navigateTo({
    url: '../about-us/about-us',
    success: function(res) {
      // 通过 eventChannel 向被打开页面传送数据
      res.eventChannel.emit('event1', { isFromPrevPage: true })
    }
})
1
2
3
4
5
6
7
8

// 被打开页面
const eventChannel = this.getOpenerEventChannel()
  // 通过 eventChannel 获取上一页面传递到当前页面的数据
  eventChannel.on('event1', function(data) {
    console.log(data)
})
1
2
3
4
5
6

被打开页面向上一页面传递数据：

// 上一页面
wx.navigateTo({
    url: '../about-us/about-us',
    events: {
      // 通过 eventChannel 获取被打开页面传送到当前页面的数据
      event1: function(data) {
        console.log(data)
      },
    },
})
1
2
3
4
5
6
7
8
9
10

// 被打开页面
const eventChannel = this.getOpenerEventChannel()
// 通过 eventChannel 向上一页面传递数据
eventChannel.emit('event1', {isFromNextPage: true});
1
2
3
4

回退页面时给上一级页面传递数据，还可以直接获取到页面实例后设置 data 数据。但是目前这种方式已经不太常用了。

使用本地存储传递数据：

// 传递数据的页面
wx.setStorageSync('id', 1)

// 接收数据的页面
wx.getStorageSync('id')
1
2
3
4
5

使用全局变量传递数据：

1. 在 app.js 中将数据存储为全局变量。
2. 在需要使用的页面通过getApp().变量名 获取。

// app.js
App({
	globalData:{
		id: 1
	}
})

// index.js
const app =  getApp()
const id = app.globalData.id
1
2
3
4
5
6
7
8
9
10