微信小程序之数据传递
2017-05-13 09:28
585 查看
本文主要介绍,页面跳转间的数据传递。传递的数据类型主要有1,基本数据类型;2,对象;3,数组集合;
先告诉你,本质上都是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,
})
}
})
test.js 接受页JS
[javascript] view
plain copy
print?
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)
})
}
})
test.js 接受页JS
[javascript] view
plain copy
print?
Page({
data:{
testData:null
}, onLoad:function(options){
[javascript] view
plain copy
print?
<span style="white-space:pre"> </span>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),
})
}
})
test.js 接受页JS
[javascript]
view plain
copy
print?
<span style="font-size:14px;">Page({
data:{
list:[]
},
<span style="white-space:pre"> </span>onLoad:function(options){
<span style="white-space:pre"> </span>console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下
<span style="white-space:pre"> </span></span><span style="font-size: 14px; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;">this.data.list = JSON.parse(options.list);//解析得到集合</span><span style="font-size:14px;">
}})</span>
打印的Log如下:
test.js [sm]:17 接收到的参数是list=["item-A","item-B"]
另外,还可以通过缓存(wx.setStorage(OBJECT),wx.setStorageSync(KEY,DATA))来传递数据,只是保存后需要清除,防止缓存过大的情况.
先告诉你,本质上都是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,
})
}
})
test.js 接受页JS
[javascript] view
plain copy
print?
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)
})
}
})
test.js 接受页JS
[javascript] view
plain copy
print?
Page({
data:{
testData:null
}, onLoad:function(options){
[javascript] view
plain copy
print?
<span style="white-space:pre"> </span>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),
})
}
})
test.js 接受页JS
[javascript]
view plain
copy
print?
<span style="font-size:14px;">Page({
data:{
list:[]
},
<span style="white-space:pre"> </span>onLoad:function(options){
<span style="white-space:pre"> </span>console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下
<span style="white-space:pre"> </span></span><span style="font-size: 14px; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;">this.data.list = JSON.parse(options.list);//解析得到集合</span><span style="font-size:14px;">
}})</span>
打印的Log如下:
test.js [sm]:17 接收到的参数是list=["item-A","item-B"]
另外,还可以通过缓存(wx.setStorage(OBJECT),wx.setStorageSync(KEY,DATA))来传递数据,只是保存后需要清除,防止缓存过大的情况.
相关文章推荐
- 微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()
- 微信小程序 页面跳转和数据传递实例详解
- 微信小程序--页面之间相互传递数据方法
- 微信小程序View层向逻辑层传递数据——事件data-xxx
- 微信小程序给嵌套template模板传递数据的方式
- 微信小程序开发(2)------使用navigateTo数据传递
- 微信小程序 —— 页面的跳转和数据传递
- 微信小程序入门——页面跳转、数据传递、数据接收
- 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
- 微信小程序 页面跳转及数据传递详解
- 微信小程序开发-页面数据传递(getStorage,setStorage)
- 微信小程序 页面跳转传递数据
- 转载--微信小程序数据传递
- 微信小程序开发之数据存储 参数传递 数据缓存
- 微信小程序开发之数据存储 参数传递 数据缓存
- 微信小程序开发之数据存储 参数传递 数据缓存
- 微信小程序--(5-1)点击列表item,把item上面显示的所有数据,传递到另外一个页面
- 微信小程序之传递数据(两种方法)
- web-view h5页面传递参数给小程序,小程序接收h5网页传过来的数据——微信web-view高级用法10