微信小程序页面跳转时数据传输_微信小程序跳转页面传数据

本篇文章主要记录3种页面跳转时数据的传输方式

url传输

单个数据可以直接传输，但是如果要传输数组字典等复杂类型，要先使用JSON.stringify()转换成字符串再进行传输。
注意：这种方法传输时，如果值里面存在？或者&可能会发生错误，例如网址就会出错
解决方法：可以将参数先进行转码再传输，或者用缓存吧哈哈哈

//向D页面传递数据name，id;使用&连接不同的变量
var name = 'abc';
var id = 3;
wx.navigateTo({
    url:'../pageD/pageD?name='+ name + '&id=' + id
})     
1
2
3
4
5
6

---

//如果要传输数组字典等复杂类型，要先使用JSON.stringify()转换成字符串传递
var detail = [{   
    "userid": app.data.user.id,    
    "goodid": this.data.list[i].id,  
    "addressid": this.data.address.id, 
    "number": this.data.list[i].count,
    "totalPrice": this.data.list[i].total_price,
    "date": this.data.date
}]
wx.navigateTo({
    url:'../pageD/pageD?good_detail='+ JSON.stringify(detail)
})
1
2
3
4
5
6
7
8
9
10
11
12

---

//接受数据
 onLoad:function(e){
 	 console.log(e.name) ;
 	 console.log(e.id);
 	 //如果是转换成字符串的字典等数据，需要先进行转换
 	 var detail = JSON.parse(e.detail);
 	 console.log(detail);
  }
1
2
3
4
5
6
7
8

为上一页的变量赋值

通过页面栈获取上一页面的路由，然后为上一页面赋值

//A页面有一个address变量  
data: {
	address:{}
｝
1
2
3
4

---

//B页面中为A页面的address赋值
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面

if(prevPage.__route__ == 'pages/A/A'){// 这边判断上一界面是哪一个
    wx.navigateBack({ 
        delta:1,
        success:function(res){
            console.log("地址获取成功")
            prevPage.setData({ //为address赋值
                address: '123'
            })
        },
        fail:function(){
            console.log('地址获取失败')
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

缓存

缓存可以用来保存很多信息，有些小程序的购物车就是利用缓存制作的，缓存就是在本机建立的一个小型数据库

//A页面保存数据     
wx.setStorageSync('data_goods', list)
1
2

---

//B页面接收数据  
li = wx.getStorageSync('data_goods')
//接收了之后别忘了从缓存中去除掉
wx.removeStorageSync('data_goods')
1
2
3
4

全局变量

将某些数据设置为全局变量，供所有页面访问，例如用户信息

//app.js设置全局变量
App({
	globalData:{
		userInfo:null
	}
}) 
1
2
3
4
5
6

---

//其他页面使用全局变量  
var app = getApp()
app.globalData.userInfo = res.data.data.userInfo
1
2
3