在微信小程序页面间传递数据

在开发微信小程序过程之中，遇到这么一些需要在微信小程序页面之间进行数据的传递的情况，也遇到了开发过程微信小程序限制情况，特此做个总结。

全局变量之中传递参数数据

• 在微信小程序的开发过程之中，需要从A页面跳转到B页面，并且把A页面的数据传递到B页面使用。可以使用全局变量使用的方法，微信小程序官方提供app.js全局变量定义文件，里面可以定义需要在全局需要使用的变量与及变量值，例如用户登录之后，需要在所有页面中使用用户登录状态等。
• 微信小程序初始化时，首先会加载app.json全局样式配置文件和全局变量文件，例如下面的globalData变量。
• 在app.js定义全局变量后，可以在各页面间直接加载全局变量，小程序提供了getApp()方法，可以直接获取到App({...})这个全局实例对象。

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }，
  //全局变量
  globalData：{
      userInfo：null
    }
    
    })
  //page/index/index
  var app=getApp();//取得全局App({..})实例
  var userInfo=app.globalData.userInfo;//取得全局变量需要的值
复制代码

使用本地缓存的方法保存全局变量,本地缓存是有存储限制的，所以建议手动删除不再需要的缓存数据。

• 假如在A页面保存需要的信息,如下图就可以直接保存键名为cargo的数据。

var cargo={
    id:'12345',
    count:2,
    name:'xx书籍',
    price:85,
    picUrl:'http://image/kiwis.com/gfdscvbwerdcdgqd.jpg'
};
wx.setStorage({
  key:"cargo",
  data:cargo
})
复制代码

• 在B页面直接可以使用小程序的wx.getStorage并传入要获取到的键值名就可以获取本地缓存的数据。

wx.getStorage({
  key: 'cargo',
  success: function(res) {
      console.log(res.data)
  } 
})
复制代码

通过在跳转、重定向等转变页面时候，可以直接通过url来传送数据。

• 在A页面传递数据到B页面中使用的时候可以直接使用以下数据。

  //page A
  wx.navigateTo({
    url: 'test?id=1'
  })
  //or page A
  wx.redirectTo({
    url: 'test?id=1'
   })
  // or page A
  wx.reLaunch({
    url: 'test?id=1'
  })
  //page B
  Page({
      onLoad: function(option){
        console.log(option.query)
      }
  })
  复制代码

• wx.navigateTo和wx.redirectTo不能跳转到tabar定义的页面，查看了微信小程序提供了wx.switchTab进行跳转，但是switchTab不可以传递url参数，后面提供了wx.reLaunch函数。
• 往组件模板之中传递数据，可以直接在模板的data-*中传递数据。