微信小程序页面传值的3种常用方式

239 阅读1分钟

在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,总结了以下几种方法:URL传参、全局变量和缓存

URL传参

URL传参简单易用,但只能传递简单参数

// 主页面
toDetail: function(e){
  var index = e.currentTarget.dataset.index;
  console.log(index);
  wx.navigateTo({
    url: '/pages/detail/detail?index=' + index,
  })
}

// detail页面
onLoad: function (options) {
  console.log('detail', options)  //detail {index: "0"}
},

全局变量

// app.js
globalData: {
  id: 1234
}

// 其他页面
var app = getApp(); // 获取应用实例,必须有这句才能获取全局变量

data: {
  logs: [],
  id: app.globalData.id,
},

本地缓存

在跳转页面之前先把参数保存到缓存,进入页面之后先获取缓存的参数,然后清除缓存中的参数,进行业务操作

// pageA.js
goToPageB:function() {
  let arg = {
    name: 'Jack',
    age: 9
  }
  // 这里采用同步的方式
  wx.setStorageSync('arg', arg);
  wx.navigateTo({
    url: '/pages/pageB'
  })
}


// pageB.js
let arg = wx.getStorageSync('arg');