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

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

url传输

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

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

//如果要传输数组字典等复杂类型,要先使用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)
})

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

为上一页的变量赋值

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

//A页面有一个address变量  
data: {
	address:{}
}

//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('地址获取失败')
        }
    })
}

缓存

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

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

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

全局变量

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

//app.js设置全局变量
App({
	globalData:{
		userInfo:null
	}
}) 

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

你可能感兴趣的:(微信小程序)