小程序跳转页面传递参数2
2017-02-23 10:20
489 查看
先告诉你,本质上都是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))来传递数据,只是保存后需要清除,防止缓存过大的情况.
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))来传递数据,只是保存后需要清除,防止缓存过大的情况.
相关文章推荐
- 微信小程序 页面跳转navigator与传递参数
- [微信小程序]页面跳转对象参数的传递方法
- 如何使PHP程序执行页面跳转时传递大量参数
- 微信小程序的页面跳转和参数传递,页面生命周期
- 详解微信小程序 页面跳转 传递参数
- 微信小程序之页面跳转和参数传递
- 微信小程序 页面跳转 传递参数
- 微信小程序之页面跳转和参数传递的实现
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序 页面跳转 传递参数
- 全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序——页面跳转传递参数(实体,对象)
- 微信小程序页面跳转传递Json对象参数
- [转] 微信小程序 页面跳转 传递参数
- 微信小程序 页面跳转 传递参数
- 小程序页面跳转传递多个参数
- {HTML5}JQueryMobile页面跳转参数的传递解决方案
- JavaScript跳转页面/Action并传递中文参数[解决js超链接传递过程中产生的中文乱码问题]
- JQueryMobile页面跳转参数的传递解决方案