微信小程序页面之间传递参数的几种方式

小程序开发过程中，不可避免要遇到不同页面之间数据通讯的问题，如判断是否登录等，现做出以下分类总结

一、使用全局变量实现数据传递

使用场景：

购物车界面需要根据是否登录来区别显示，当没有登录时提醒去登录，登录后之间显示自己购物车里的商品列表

全局变量使用方法：

再 app.js 文件中定义全局变量 globalData， 如下：将用户信息存放在 userInfo 中

//app.js
  App({
  onLaunch: function () {
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  // 全局变量
  globalData: {
    userInfo: null
  }
})

购物车界面获取全局变量userInfo 的值，判断用户是否登录

onLoad: function (options) {
    var app = getApp();
    if (app.globalData.userInfo === null){
      this.setData({ "haveLogin": false});
    }else {
      this.setData({ "haveLogin": true});
    }
  },

登录界面，登录成功后，将用户信息保存到全局变量中

wx.request({
        url: 'your url',
        method: 'POST',
        data: { "acount": acount, "aPWD": aPWD, "phone": acount, "pPWD": aPWD},
        success: function(res) {
          if(res.code === 1){
            getAPP().globalData.userInfo = res.userInfo;
          }
        },
        fail: function (err) {
          console.log(err)
        }
      })

二、页面跳转或重定向时，使用url带参数传递数据

使用场景：

点击产品列表中的某一项，跳转到对应的产品详情页面

使用方法：

产品列表中要保证每一项都有个id，点击的时候获取id即可

toSomeone: function (event) {
    wx.navigateTo({
      url: 'some/some?id=' + event.target.id,
    })
  }

详情页获取传递来的数据：

onLoad: function (options) {
    console.log(options)
  },

*注： 如果传递参数是 json 数据，需要使用JSON.stringify,然后在后台逻辑之中使用JSON.parse序列化成对象使用，而且传递的数据有字节也有限制

三、使用组件模板 template传递参数

使用场景：

我们在排版项目页面的时候，习惯将相同样式的模块拆分成一个模板，在需要用的时候，直接引用模板，这样就可以避免多次排版，同时还方便维护。

使用方法：

不知道怎么使用 template 的同学们， 可以看一下我的上一篇博文（小程序template使用方法），那里详细描述了如何使用template的方法，这里就不在赘述了。

<template is="good" data="{{data}}"></template>

四、使用缓存传递参数

使用场景：

登录成功后将用户信息放入缓存，购物车获取显示用户数据

使用方法：

    //缓存数据
      wx.setStorage({
        key: 'userInfo',
        data: res.userInfo
      })

getUsersInfo: function () {
    //读取缓存登录
    wx.getStorage({
      key: 'userInfo',
      success: function (res) {
        this.userInfo = res.userInfo;
      }
    })
  }

五、使用数据库传递数据

使用场景：

购物车中添加商品之后，直接保存到数据库中，然后购物车界面的产品显示，直接从数据库中获取数据。

使用方法：

//添加商品
  addGoods: function (good) {
    wx.request({
      url: 'your url',
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      data: good,
      success: function (res) {
        this.setData({ "goodsList": res.data })
      }
    })
  },
//获取数据
getGoodsList: function () {
    wx.request({
      url: 'your url',
      method: 'GET',
      success: function (res) {
        this.getGoodsList();
      }
    })
  }

本次总结就到这里了，觉得有用就在左上点个赞再走呗~~