关于公众号页面微信分享跳转链接包含的参数被替换、篡改、截取的问题 VUE

最近同事找到我说他的微信分享的参数莫名消失,我一开始觉着肯定是代码有问题,有些细节没注意好。
后来我吧我做的微信分享的代码发给他,结果也是一样的,然后我就开始找原因。

PS:我这边是基于vue框架开发的,如果你用的是其他框架参照思路就好了,解决起来并不难

一开始我怀疑微信把跳转链接转码了,于是在前置路由中打印出了windown.location.href,发现参数被替换了,然后我发现我之前做的微信分享连接带的参数只有一个,于是把同事的微信分享参数改成一个之后又正常了,经百度搜搜之后也有相同的情况。

然后我就想,可能跟拿授权code一样,state参数值如果包含了URI中的特殊字符需要encodeURI,于是吧参数做了encodeURI结果就可以了。

  // 原链接
  let link = 'https://www.baidu.com/#/?a=1&b=2&c=3'
  // 替换成  encodeURIComponent是js的一个对URI的特殊符号进行转义的一个函数
  let param = '?a=1&b=2&c=3'
  let link = 'https://www.baidu.com/#/param=' + encodeURIComponent(param)
  // 然后在前置路由拦截器中处理
  let url = windown.location.href
  // 如果觉得param会冲突可以替换成比较个性化的字段名 
  if(url.indexOf('param') !== -1){
  	// getUrlParam是我封装的一个方法,从url中截取参数值用的
  	// decodeURIComponent是对encodeURIComponent的解码,在VUE中不用导入直接诶可以用
  	let param = decodeURIComponent(getUrlParam('param'))
  	// getDomain是我获取域名的方法,因为会有不同的环境,所以不能写死,你们可以视情而定
    let goPath = getDomain() + '/#/' + param
    // 替换浏览器地址
    window.location.href = goPath
  }
  // getUrlParam方法
  function getUrlParam (paramName) {
	  if (paramName) {
	    let url = window.location.href
	    url = url.substring(url.indexOf(paramName))
	    url = url.substring(url.indexOf('=') + 1)
	    let index = url.indexOf('&')
	    if (index !== -1) {
	      return url.substring(0, index)
	    }
	    return url
	  }
   }

最后,我这不一定是最好的方案,但确切的解决了我的问题。我本人是一个Java后端,因公司需要学了一点前端VUE的知识,也只是动点皮毛,如果各位大佬有更好的解决方案,欢迎与我分享。

你可能感兴趣的:(关于公众号页面微信分享跳转链接包含的参数被替换、篡改、截取的问题 VUE)