1. 引入jssdk
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
//安装
npm install weixin-js-sdk --save
//引入
import wx from 'weixin-js-sdk';
2. 通过config接口注入权限验证配置
第一步:获取当前页面的url( 作为请求接口的参数,从后台换取 config 验证配置的参数值 )
第二步:检查当前微信版本是否支持指定 JS 接口,支持批量判断
第三步:引入获取地理位置 API ( 获取经纬度:wx.getLocation() 打开地图:wx.openLocation() )
getLoationInfo(){ //获取门店
var that = this;
var _url = window.location.href;
Api.ajax({
key: "getSignatureUrl",
type: "GET",
data: {
url:_url
}
}).then(res => {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,调用js签名,
jsApiList: ['checkJsApi','getLocation', 'openLocation','hideOptionMenu'] // 必填,需要使用的JS接口列表,这里只写支付的
});
wx.ready(function(){
// 1 判断当前版本是否支持指定 JS 接口,支持批量判断
wx.checkJsApi({
jsApiList : [ 'getLocation' ],
success : function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false// 如:{"checkResult":{"getLocation":true},"errMsg":"checkJsApi:ok"}
if (res.checkResult.getLocation == false) {
alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
return;
}
}
});
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude ; // 经度,浮点数,范围为180 ~ -180。
console.log(latitude,longitude)
//打开地图 (经纬度为要到达位置的经纬度信息)
wx.openLocation({
latitude: Number(this.latitude), // 纬度,浮点数,范围为90 ~ -90
longitude: Number(this.longitude), // 经度,浮点数,范围为180 ~ -180。
name: storeDetail.storeName, // 位置名
address: storeDetail.storeAddress, // 地址详情说明
scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
},
cancel:function(res){
// alert('获取当前位置失败',res);
// console.log(res)
}
});
})
},res => {
// console.log(res)
});
}