记录微信小程序页面之间的传值取值

一、按方式分类

小程序传递参数的方式有三种：

通过在App.js中设置全局变量
通过拼接URL直接传递
通过数据缓存存储再获取
通过页面栈传值

1.使用全局变量globalData

通常把不更改的常量数据放在app.js中,在各个页面都可以通过App实例获取Data的数据.

最外层的app.js中定义全局变量

globalData: {
     js_code:null
 }

可以在page1的登陆函数中设置值

wx.login({
     success: function (res) {
         if (res.code) {
           app.globalData.js_code = res.code
         }
     }
 })

page2中打印

console.log(app.globalData.js_code)

2.通过navigateTo,reLaunch在跳转地址后面加后缀

准备跳转页

// 点击跳转
 openDetail: function(e) {
   var that = this;
   wx.navigateTo({
     url: '../detail/detail?who=f0&s=2',
   });
 },

目标页面通过options这个函数来接

onLoad: function (options) {
    var who = options.who;
    var s = options.s;
}

3.使用本地缓存wx.setStorage（或wx.setStorageSync）

准备储存页面

var writeInfo = {
  xing:'林',
  sex: '男',
  birthday: '2018.09.13',
  type:1
};
wx.setStorage({
  key: "writeInfo",
  data: writeInfo
});

目标页面用wx.getStorage从本地缓存中异步获取指定key的内容（或者wx.getStorageSync同步获取）

wx.getStorage({
   key: 'writeInfo',
   success: function (res) {
     console.log(res.data)
   },
   fail: function (res) {
     console.log(res.data)
   }
 })

删除的话用wx.removeStorage（删除某个）、wx.clearStorage（清除所有）

4.通过页面栈传值

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：

不要尝试修改页面栈，会导致路由以及页面状态错误

不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page 还没有生成。

页面栈应用

例如：
在首页 index 进入列表页 list，再进入详情页 detail 后，如果需要能从detail页一键返回到index页，并且传值给index页，这里就可以用页面栈来实现。

首页：

<!--index.wxml-->
<view>{{tag}}</view>
//index.js 
Page({
  data: {
    tag: ''
  }
})

详情页：

返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

<!-- pages/detail/detail.wxml-->
<view bindtap='backToIndex'> 点此返回首页 </view>
// pages/detail/detail.js
Page({
  data: {
    tag: '土豆'
  },
  
  backToIndex () {
    let pages = getCurrentPages() // 获取页面栈，pages为一个数组，里面存储了从首页到当前页的所有页面，如下图所示
    console.log(pages)
    let tag = this.data.tag // 拿到当前页的tag
    wx.navigateBack({
      delta: 2,
      success () {
        pages[0].setData({
          tag: tag    // 将当前detail页的tag赋值给首页index中的tag
        })
      }
    })
  },
})

console.log(pages) 打印值：
在这里插入图片描述

二、按传值的类型分类

1.传递String字符串

使用url拼接 ?key=val，通过onLoad中接收的options取值

Page({  
  data: {
    testStr: 'xiaochengxu'
  },
  next: function(e){
    wx.navigateTo({
      url: '/test/test?str='+this.data.testStr
    })
  }
})
Page({
  onLoad:function(options){  
    console.log("接收到的参数是str="+options.str);  
  }
})

打印内容：接收到的参数是str=xiaochengxu

2.传递对象

通过拼接url使用JSON.stringify(this.data.testData)传递，通过onLoad中接收的options取值，通过JSON.parse(options.testData);将数据复原成对象

Page({
  data: {
    testData:{name:'username', password:'password'}  
  },
  next: function(e){
    wx.navigateTo({
       url: '/test/test?testData='+JSON.stringify(this.data.testData)
    })
  }
})
Page({
  data:{
    testData:null
  },
onLoad:function(options){
   console.log("接收到的参数是testData="+options.testData);
   this.data.testData = JSON.parse(options.testData);
}})

打印内容：接收到的参数是testData={“name”:“username”,“password”:“password”}

3.传递数组集合

同上

Page({
  data: {
    list:['item-A','item-B']
  },
  next: function(e){
    wx.navigateTo({
      url: '/test/test?list='+JSON.stringify(this.data.list),
    })
  }
})
Page({  
  data:{
    list:[]
  },
onLoad:function(options){
   console.log("接收到的参数是list="+options.list); 
   this.data.list = JSON.parse(options.list);  
}})

打印内容：接收到的参数是list=[“item-A”,“item-B”]
使用的话,就给数组赋值就可以了,看这个示例：

onLoad: function (options) {
	// 页面初始化 options为页面跳转所带来的参数
	console.log("接收到的参数是list=" + options.goodsList);
	this.setData({
		list: JSON.parse(options.goodsList)
	})
}

摘自
https://blog.csdn.net/longgeaisisi/article/details/82695075
https://blog.csdn.net/weixin_40099554/article/details/79871971?utm_medium=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.wap_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

【小程序开发】页面传取值(数组,对象,字符串)