微信小程序页面间传值

小程序传值的方式有正向传值和反向传值

正向传值：上一页面 --> 下一页面

• url 传值

• 本地储存
• 全局的 app 对象

反向传值：下一页面 --> 上一页面

• 本地储存
• 全局的 app 对象

一、正向传值

• url 传值

A页面代码

// 点击列表
clickReleaseItem: function (e) {
  var release = e.currentTarget.dataset.para;
  wx.navigateTo({
    url: '../../pages/releaseDetail/releaseDetail?release=' + JSON.stringify(release)
  })
},

B页面代码

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  this.setData({
    // 获取上个页面传过来的列表发布信息
    currentRelease: JSON.parse(options.release)
  });
},

• 本地储存

A页面代码

/* 把发布信息异步存储到缓存当中 */
wx.setStorage({
  key: 'releases',
  data: list,
})

B页面代码

// 本地获取收藏的发布信息
var that = this;
wx.getStorage({
  key: 'releases',
  success: function (res) {
    that.setData({
      releaseArray: res.data
    });
  },
})

• 全局的 app 对象

A页面代码

var app = getApp();
app.releaseData = release;

B页面代码

 

var app = getApp();
var release = app.releaseData;

二、反向传值

• 本地储存

B页面代码

/* 把发布信息异步存储到缓存当中 */
wx.setStorage({
  key: 'releases',
  data: list,
})
// 返回上一页
wx.navigateBack();

A页面代码

/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
  // 本地获取收藏的发布信息
  var that = this;
  wx.getStorage({
    key: 'releases',
    success: function (res) {
      that.setData({
        releaseArray: res.data
      });
    },
  })
},

• 全局的 app 对象

B页面代码

var app = getApp();
app.releaseData = release;

A页面代码

var app = getApp();
/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
  var releaseData = app.releaseData;
  this.setData({
    release: releaseData
  });
},

链接：https://www.jianshu.com/p/62f071651b07
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。