APP分享h5页面(vue cli)到微信不能正常请求接口的问题

APP分享h5页面(vue cli)到微信不能正常请求接口的问题

当APP中分享h5链接到微信中时,微信会自动拼接一些参数在h5链接的后面,此时可能会影响vue cli写的h5中请求接口的触发成功,以及相关的其他功能操作;
我的处理方法逻辑比较简单,就是判断地址是否被添加了微信的参数,然后获取url取其中自己需要的,在给到location.replace();

微信自动拼接的通常为

朋友圈   &from=timeline&isappinstalled=0

微信群   &from=groupmessage&isappinstalled=0

好友分享 &from=singlemessage&isappinstalled=0

识别url


getQueryString: function (name) {//根据字段看网址是否拼接&字符串
	  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	  var r = window.location.search.substr(1).match(reg);
	  if (r != null)
	      return unescape(r[2]);
	  return null;
	}

	// 如果存在相关拼接参数,就重新加载url
			let from = getQueryString('from');
			let appinstall = getQueryString('appinstall');
			let sec = getQueryString('sec');
			let timekey = getQueryString('timekey');
			if (from || appinstall || sec || timekey) {
				let newUrl = window.location.href.split('?')[0];
				let urlParams = getUrlParams();  
				//getUrlParams()为获取url参数函数
				newUrl = newUrl + "?regularCode=" + regularCode;
				location.replace(newUrl);
			}

抓取url参数对象

  function getUrlParams () {
        var url = window.location.href.split('#')[0];
        const parseQueryString = url => {
            var json = {};
            var arr = url.substr(url.indexOf('?') + 1).split('&');
            arr.forEach(item => {
                var tmp = item.split('=');
                json[tmp[0]] = tmp[1];
            });
            return json;
        }
        return parseQueryString(url)
    }

如此一来,便可以去除当前页面自动添加的参数,消除其影响,页面和你在本地写的一样了;

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值