小程序数据传递怎样进行
小程序开发之后要实现页面跳转,一般都会有一个数据传递,小程序数据传递是什么?数据怎样进行传递?接下来小编就会在文中进行说明,希望能够帮助到大家。
先告诉你,本质上都是string类型传递。但是对于对象和数组集合的传递需要小小的处理一下传递时的数据和接收后的数据。
1,传递基本数据类型
index.js 发送页JS
[javascript] view plain copy print?
Page({
data: {
testStr: '字符串str'
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?str='+this.data.testStr,
})
}
})
Page({
data: {
testStr: '字符串str'
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?str='+this.data.testStr,
})
}
})
test.js 接受页JS
[javascript] view plain copy print?
Page({
data:{
},
onLoad:function(options){
console.log("接收到的参数是str="+options.str);
}
})
Page({
data:{
},
onLoad:function(options){
console.log("接收到的参数是str="+options.str);
}
})
打印的Log如下:
接收到的参数是str=字符串str
2,传递对象{}
index.js 发送页JS
[javascript] view plain copy print?
Page({
data: {
testData:{name:'我是name', extra:'我是extra'}
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?extra='+JSON.stringify(this.data.testData)
})
}
})
Page({
data: {
testData:{name:'我是name', extra:'我是extra'}
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?extra='+JSON.stringify(this.data.testData)
})
}
})
test.js 接受页JS
[javascript] view plain copy print?
Page({
data:{
testData:null
}, onLoad:function(options){
Page({
data:{
testData:null
}, onLoad:function(options){
[javascript] view plain copy print?
console.log("接收到的参数是obj="+options.extra);//此处打印出来的仅仅是字符串 需要解析,解析如下
this.dat.testData = JSON.parse(options.extra);//解析得到对象
}})
console.log("接收到的参数是obj="+options.extra);//此处打印出来的仅仅是字符串 需要解析,解析如下
this.dat.testData = JSON.parse(options.extra);//解析得到对象
}})
打印的Log如下:
test.js [sm]:16 接收到的参数是obj={"name":"我是name","extra":"我是extra"}
3,传递数组集合[]
index.js 发送页JS
[javascript] view plain copy print?
Page({
data: {
list:['item-A','item-B']
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?list='+JSON.stringify(this.data.list),
})
}
})
Page({
data: {
list:['item-A','item-B']
},
onLoad: function () {
},
next: function(e){
wx.navigateTo({
url: '/pages/test/test?list='+JSON.stringify(this.data.list),
})
}
})
test.js 接受页JS
[javascript] view plain copy print?
Page({
data:{
list:[]
},
onLoad:function(options){
console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下
this.data.list = JSON.parse(options.list);//解析得到集合
}})
Page({
data:{
list:[]
},
onLoad:function(options){
console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下
this.data.list = JSON.parse(options.list);//解析得到集合
}})
打印的Log如下:
test.js [sm]:17 接收到的参数是list=["item-A","item-B"]
另外,还可以通过缓存(wx.setStorage(OBJECT),wx.setStorageSync(KEY,DATA))来传递数据,只是保存后需要清除,防止缓存过大的情况.
关于小程序数据传递,小编已经进行了说明。传递的数据类型主要有基本数据类型、对象、数组集合,想要获取更多相关资料请关注微信小程序素材网。
微信小程序怎么调用数据库?
微信小程序怎么链接数据?
微信小程序调用api之通过api接口将json数据展现到小程序上
上一篇:朋友圈加#号什么意思?
下一篇:公众号留言置顶有什么用处?