欢迎光临,了解微信小程序开发,就上易用通!

微信小程序---数据传递

发布:2018-04-18 10:46浏览: 来源:网络 作者:cola

先告诉你,本质上都是string类型传递。但是对于对象和数组集合的传递需要小小的处理一下传递时的数据和接收后的数据。

 

1,传递基本数据类型

index.js 发送页JS

 

				
  1. [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  2. Page({
  3. data: {
  4. testStr: '字符串str'
  5. },
  6. onLoad: function () {
  7. },
  8. next: function(e){
  9. wx.navigateTo({
  10. url: '/pages/test/test?str='+this.data.testStr,
  11. })
  12. }
  13. })

test.js 接受页JS

 

				
  1. [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  2. Page({
  3. data:{
  4. },
  5. onLoad:function(options){
  6. console.log("接收到的参数是str="+options.str);
  7. }
  8. })

打印的Log如下:

接收到的参数是str=字符串str

 

2,传递对象{}

index.js 发送页JS

 

				
  1. [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  2. Page({
  3. data: {
  4. testData:{name:'我是name', extra:'我是extra'}
  5. },
  6. onLoad: function () {
  7. },
  8. next: function(e){
  9. wx.navigateTo({
  10. url: '/pages/test/test?extra='+JSON.stringify(this.data.testData)
  11. })
  12. }
  13. })

test.js 接受页JS

 

				
  1. [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  2. Page({
  3. data:{
  4. testData:null
  5. }, onLoad:function(options){
  6. [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  7. <span style="white-space:pre"> </span>console.log("接收到的参数是obj="+options.extra);//此处打印出来的仅仅是字符串 需要解析,解析如下
  8. this.dat.testData = JSON.parse(options.extra);//解析得到对象
  9. }})

打印的Log如下:

test.js [sm]:16 接收到的参数是obj={"name":"我是name","extra":"我是extra"}

 

3,传递数组集合[]

index.js 发送页JS

 

				
  1. [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  2. Page({
  3. data: {
  4. list:['item-A','item-B']
  5. },
  6. onLoad: function () {
  7. },
  8. next: function(e){
  9. wx.navigateTo({
  10. url: '/pages/test/test?list='+JSON.stringify(this.data.list),
  11. })
  12. }
  13. })

test.js 接受页JS

 

				
  1. [javascript]
  2. view plain
  3. copy

在CODE上查看代码片派生到我的代码片

 

				
  1. <span style="font-size:14px;">Page({
  2.  
  3. data:{
  4.  
  5. list:[]
  6.  
  7. },
  8.  
  9. <span style="white-space:pre"> </span>onLoad:function(options){
  10.  
  11. <span style="white-space:pre"> </span>console.log("接收到的参数是list="+options.list);//此处打印出来的是字符串,解析如下
  12.  
  13. <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;">
  14.  
  15. }})</span>

打印的Log如下:

test.js [sm]:17 接收到的参数是list=["item-A","item-B"]

另外,还可以通过缓存(wx.setStorage(OBJECT),wx.setStorageSync(KEY,DATA))来传递数据,只是保存后需要清除,防止缓存过大的情况.

微信小程序---数据传递(图1)微信小程序---数据传递(图2)微信小程序---数据传递(图3)






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。