微信小程序五种页面传值方法_微信小程序 页面传值

getCurrentPages页面栈

页面栈适用于同一个tabbar里面的页面间跳转的情况，比如从A页面跳到B页面，B页面函数执行完毕，想要改变A页面数据的值，小程序中页面栈最多十层。

代码如下

// A页面，可以通过路由跳转到B页面，A和B要在一个tabbar里
page({
	data:{
		number: 1  // A页面有个数据值为1
	}
})
------------------------------------
// B页面
page({
	// B页面的函数
	changeNumber(){
		var pages = getCurrentPages() // 获取页面栈
      	var prevPage = pages[pages.length - 2];  //上一个页面即A页面，通过减法可以定义到A的上级页面
      	// 改变A页面的值，prevPage相当于A的this
      	prevPage.setData({
			number: 2
		})
      	wx.navigateBack()
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

url传参

url传参适用于同一个tabbar里面的页面间跳转的情况，比如从A页面跳到B页面，需要把A页面的值传到B页面供B页面使用

// A页面，可以通过路由跳转到B页面，A和B要在一个tabbar里
page({
	data:{
		number: 1 // A页面有个数据值为1
	},
	// 跳转到B页面的函数
	toBpage(){
		var value = this.data.number // 获得data里的数据
		var infoStr = JSON.stringify(value) // 将数据转化为json数据
		// 跳转时在正常路径'/pages/B/B'后面加上'?'，后面接上数据的名称，这里为infoStr，等号后面接上数据
      	wx.navigateTo({
        	url: '/pages/B/B?infoStr=' + infoStr,
      	})
	}
})
------------------------------------
// B页面
page({
	onLoad(options) {
    	var infoStr = options.infoStr // 接收A页面传来的数据
    	var info = JSON.parse(infoStr) // 将数据转化为原来格式
    	console.log(info) 
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

EventChannel通道通信

EventChannel通道通信适用于同一个tabbar里面的页面间跳转的情况，比如从A页面跳到B页面，需要把A页面的值传到B页面供B页面使用，必须搭配 wx.navigateTo() 函数使用

代码如下

// A页面
page({
	data:{
		number: 1 // A页面有个数据值为1
	},
	// 跳转B页面的函数
	toBpage() {
    	var value = this.data.number
    	wx.navigateTo({
      		url: '/pages/B/B',
      		success: function (res) {
        		// 通过eventChannel向被打开页面传送数据
        		res.eventChannel.emit('acceptData', value)
      		}
    	})
  	},
})
---------------------------------------------------------
// B页面
page({
	onLoad(options) {
    	const eventChannel = this.getOpenerEventChannel()
    	// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
    	eventChannel.on('acceptData', (value) => {
      		console.log(value)
    	})
  	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Storage缓存

Storage缓存是把当前页面数据缓存到手机上，然后在其他页面读取缓存使用数据，可以跨tabbar传值，缓存占用硬件内存，最好设置个函数可以清除缓存

代码如下

// A页面
page({
	data:{
		number: 1 // A页面有个数据值为1
	},
	// 任意函数
	saveDataStorage(){
		var value = this.data.number // 获得data里的数据
		wx.setStorageSync('key', value) // 数据缓存到设备，名字为key
	}
})
------------------------------------
// B页面
page({
	// 任意函数
	getDataStorage() {
    	var value = wx.getStorageSync('key') // 从缓存读取数据
    	console.log(value)
    	wx.clearStorageSync() // 如果数据以后不用，可以清除缓存
  	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

globalData全局数据

globaldata全局数据是app.js里的数据，数据是全局的，任意页面都可以读写，可以跨tabbar传值

代码如下

// app.js
App({
  globalData: {
    dataInfo: "全局数据"
  }
})
------------------------------
// A页面写global数据
const app = getApp(); // 需要引入app
page({
	// 任意函数
	changeGlobalData(){
		app.globalData.dataInfo = "修改数据"
	}
})
------------------------------
// B页面读取global数据
const app = getApp(); // 需要引入app
page({
	// 任意函数
	getGlobalData(){
		var value = app.globalData.dataInfo
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24