微信网页开发JSSDK获取地理位置wx.getLocation的使用，及开发时遇到的问题（invalid signature）

最近做的一个微信网页项目，用的是vue，但因为项目中需要实现定位，获取用户的经纬度，因此使用了微信公众号的JSSDK中的wx.getLocation，具体可看官方文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html.
1、首先安装 jssdk

npm install weixin-js-sdk --save-dev
// 不通过npm也可以按照官网上说的 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

2、在需要用到的地方引入

import wx from 'weixin-js-sdk'

3、使用wx.getLocation
使用微信提供的接口时需要先通过config接口注入权限验证配置

//这里的的参数除了debug和jsApiList，其他都是后端同事获取到后传给前端的
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

具体获取定位信息函数代码如下

//定位，获取用户经纬度
async setLocation() {
// 因为对axios进行了封装，所以，这里使用到了async await 
	let _this = this;
	var url = '';
	var href = window.location.href;
	url = href.split('#')[0];//截取当前地址栏的URL，（不带#hash部分）
	let res = await this.postAxios('getSignature.do',{url:url});//通过接口获取微信配置所需信息
	if(res.status){
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: res.data.appid, // 必填，公众号的唯一标识
			timestamp: res.data.timestamp, // 必填，生成签名的时间戳
			nonceStr: res.data.noncestr, // 必填，生成签名的随机串
			signature: res.data.signature, // 必填，签名
			jsApiList:['getLocation'],//必填，需要使用的JS接口列表，如我要用的是wx.getLocation，那么我的jsApiList里的就是getLocation
		});
		wx.ready(function() {
			// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
			// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
			// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
			wx.getLocation({
				type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				success: function(res) {
					var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					var speed = res.speed; // 速度，以米/每秒计
					var accuracy = res.accuracy; // 位置精度
					_this.$store.commit('CHANGE_LONGITUDE', longitude);
					_this.$store.commit('CHANGE_LATITUDE', latitude);
				},
				fail: function(err) {
					alert("获取定位位置信息失败！")
				},
				cancel: function (res) {
					alert('用户拒绝授权获取地理位置');
				}
			});
		});
	}
	
}

4、在这过程中我遇到的问题及解决方法（提示错误invalid signature）
（1）在web 开发者工具 中进行调试，获取错误的提示信息（因为做的是h5移动端网页，开始在浏览器调试的时候没能获取到具体的报错信息，后面才知道有web开发者工具）

（2）根据官网上的JSSDK文档的附件5 进行错误排查（这部分我是让后端同事排查的，因为config信息是后端同事给的），发现我的失败是因为用来获取签名的URL不对，导致的invalid signature，因为我的在公众上访问时后端会在地址栏传参数给前端，但是后端在获取签名的时候没有把参数部分一起加上去，所以导致了这个错，我们解决这个问题的方法就是前端截取当前访问的URL（去掉hash部分），传给后端，后端再根据这个URL获取签名。