最近做的一个微信网页项目,用的是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获取签名。
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐