小程序支持webview的url缓存上一个页面

如果是普通的缓存内部页面不会这么麻烦,存在了webview的url,并且还拼接了token,需要传回给原url。更新token则需要解码再解码,编码再编码。如果存在token,解码拿到最新的缓存token,更新之后,再次编码返回最新token拼接回path。

这里封装好了util,直接使用,记录一下工具类。

使用方法

在页面的onShow()生命周期函数中调用 storeCurrentPagePath() 函数存储当前页面路径到本地缓存中。

在需要跳转回上一次浏览的页面时,调用 navigateToLastPage() 函数即可。

注意:以上代码仅作为示例,并未考虑一些特殊情况的处理。实际使用时需根据具体场景进行适当修改。

/**
 * 存储当前页面路径到本地缓存中
 */
function storeCurrentPagePath() {
//  console.log('存储上一个页面路径到本地缓存中',getCurrentPages()[getCurrentPages().length-2]);
  var currentPagePath = getCurrentPages()[getCurrentPages().length-1].route;
  var url = getCurrentPages()[getCurrentPages().length-1].options.url;
  if(currentPagePath === 'pages/webview/webview') {
    currentPagePath =  currentPagePath.concat('?url=' +url)
  }
  wx.setStorageSync('lastPagePath', currentPagePath);
}

/**
 * 获取上一次浏览的页面路径
 * 如果存在token,解码拿到最新的缓存token,更新之后,再次编码返回最新token拼接回path
 */
function getLastPagePath() {
  let lastPagePath = wx.getStorageSync('lastPagePath');
  let page_path = lastPagePath && lastPagePath.split('?')[0]
  if(page_path === 'pages/webview/webview') {
    let lastPage_query = getULRParametes(lastPagePath)
    let webview_path = getUrl(lastPage_query.url).split('?')[0]
    let webview_query = getULRParametes(getUrl(lastPage_query.url))
    if(webview_query.token) {
      webview_query.token = wx.getStorageSync('token')
    }
    let encode_webview_query = jsonToURL(webview_query)
    let encode_webview_path = encodeURIComponent('?url='+webview_path + encode_webview_query)
    lastPagePath = page_path.concat(encode_webview_path) // 合并一级path与webview_url
  }
  return lastPagePath ? '/' + lastPagePath : '';
}

/**
 * 跳转到上一次浏览的页面
 */
function navigateToLastPage() {
  var lastPagePath = getLastPagePath();
  if (lastPagePath) {
    wx.navigateTo({
      url: lastPagePath
    });
  } else {
    // 如果没有上一次浏览路径,则跳转到默认页面
    wx.navigateTo({
      url: '/pages/index/index'
    });
  }
}


/**
 *  递归解码
 */
function getUrl (url) {
  if (url.indexOf('%') < 0) {
    return url
  } else {
    const newUrl = decodeURIComponent(url)
    return getUrl(newUrl)
  }
}

/**
 * jsonToURL
 * @param {*} myJsonObject 
 */
function jsonToURL(myJsonObject) {
  let jsonString = Object.keys(myJsonObject).map(function (key) { 
     return encodeURIComponent(key) + "=" + encodeURIComponent(myJsonObject[key]);
     }).join("&");
  let urlEncodedString = encodeURIComponent(jsonString);
  return urlEncodedString
}

/**
 * @param {*} query
 * @returns {*} queryMap 返回query对象
 */
function getULRParametes(url) {
  let query = url.split('?')[1]
  if (!query) {
    return {}
  }
  var paraments = query.split('&') // 将字符串从指定字符分割成为一个数组 参数字段分离
  var queryMap = {} // 声明一个空对象 用于存放参数对象
  for (var i = 0; i < paraments.length; i++) {
    const newParaments = paraments[i]
    const arrObj = newParaments && newParaments.split('=')
    for (var j = 0; j < arrObj.length; j++) {
      var key = arrObj[0]
      var value = arrObj[1]
      queryMap[key] = value
    }
  }
  return queryMap
}


module.exports = {
  storeCurrentPagePath,
  getLastPagePath,
  navigateToLastPage,
  getUrl,
  getULRParametes,
  jsonToURL
}

// 使用方法:

// 在页面的onShow()生命周期函数中调用 storeCurrentPagePath() 函数存储当前页面路径到本地缓存中。

// 在需要跳转回上一次浏览的页面时,调用 navigateToLastPage() 函数即可。

// 注意:以上代码仅作为示例,并未考虑一些特殊情况的处理。实际使用时需根据具体场景进行适当修改。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值