小程序之页面跳转传递对象参数问题

开发过小程序的一定会知道，小程序的页面直接的数据传递是不支持传递对象参数的，但是在小程序开发过程中，由于业务需要和接口设计的原因，不得不把上一个页面的对象数据传递到下一个页面，这就造成了一定的困扰。

解决这个问题的方法也有几种：

一种是把对象存储在app.js全局变量，在下个页面的时候直接去app.js取值。但显然这是非常无奈的一种做法，因为如果有多个这个的参数，那这种全局变量不就要写一大推了，也不符合我们的开发习惯。

另外一种就是把数据存储在缓存中，然后在进入下个页面的时候去缓存中取出来。思想跟第一种差不多，也一样是不推荐的做法，而且每次用完都需要清理掉这个缓存，不然或造成数据错乱。

下面给大家介绍另外一种方法，就是把数据转为string拼接在url后面，这样就干净利落。但是需要把对象参数一个个拼上去也比较麻烦，所以这里就封装了一个url.js工具类，使用简单方便。废话不多说，直接上代码。

// 构建url
const buildURL = (url, query = {}, isSequence = true) => {
  if (!query) return url
  const joiner = url.match(/\?/) ? '&' : '?'
  const queryStr = Object.keys(query)
    .map(key => `${key}=${encodeURIComponent(isSequence ? JSON.stringify(query[key]) : query[key])}`)
    .join('&')
  return url + joiner + queryStr
}

// 解析query对象
const decodeQuery = (originQuery = {}, isSequence = true) => {
  const result = {}
  if (!originQuery) return {}
  return Object.keys(originQuery).reduce((prev, curr) => {
    result[curr] = decodeURIComponent(originQuery[curr])
    if (isSequence) {
      result[curr] = JSON.parse(result[curr])
    }
    return result
  }, result)
}

module.exports = {
  buildURL,
  decodeQuery
}

使用方法非常简单，传递时加密。大括号里面可以任意添加任何参数，在解密取值时在根据传值取出来。

let url = app.urlHelper.buildURL('/pages/laugh/detail/index', {
      item: this.data.item
    })

wx.navigateTo({
      url,
    })

使用时解密，在页面onLoad方法中：

onLoad: function(options) {
    let item = app.urlHelper.decodeQuery(options).item
}

这样就可以完美解决小程序页面间的传值问题。

如有更好方法，欢迎贴出来一起交流。

小程序之页面跳转传递对象参数问题

猜你喜欢