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

【在微信小程序页面间传递数据】在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况,也遇到了开发过程微信小程序限制情况,特此做个总结。
全局变量之中传递参数数据
  • 在微信小程序的开发过程之中,需要从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.navigateTowx.redirectTo不能跳转到tabar定义的页面,查看了微信小程序提供了wx.switchTab进行跳转,但是switchTab不可以传递url参数,后面提供了wx.reLaunch函数。
  • 往组件模板之中传递数据,可以直接在模板的data-*中传递数据。