小程序模板网

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

先告诉你,本质上都是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))来传递数据,只是保存后需要清除,防止缓存过大的情况.



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23674.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询