在项目的入口文件App.js中
<iframe src="https://www.abc.com/" style="position: absolute; display: block; border: 0px; top: 0px; left: 0px; width: 375px; height: 603px;"></iframe>
在项目的html文件中引入必需的js文件 https://res2.wx.qq.com/open/js/jweixin-1.6.0.js
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
在页面挂载时初始化调用微信内置config配置,并声明所需要调用的api接口
mounted() {
document.domain="abc.com"; // 设置主域名
this.$post(this.$api.apiGetAppKey).then(res => {
// 这里的 apiGetAppKey 为后台提供的接口
// const { appid, timestamp, noncestr, sign} = res || {}
console.log('res', res)
console.log('appid', res.appid)
console.log('timestamp', res.timestamp)
console.log('noncestr', res.noncestr)
console.log('signature', res.sign)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
beta: true,
appId: res.appid, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.noncestr, // 必填,生成签名的随机串
signature: res.sign, // 必填,签名
jsApiList: ["openLocation", "getLocation"] // 必填,需要使用的JS接口列表
});
})
},
在需要调用
jsapi
的模块前面加上parent
,在项目启动文件中已经声明了所需调用的js
方法,所以在后续的使用中只需在模块前面加上parent
即可
parent.wx.ready(function() {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
_this.getCurrLoc().then(res => {
_this.currLocation = res;
if (_this.mapRange.contains(cooFormat(res))) {
/*Toast("初次判断,在景区");*/
} else {
Toast("您当前不在景区内");
/*let geo = [{ position: this.mapCenter, styleId: "peoStyle" }];
_this.peoMarker.setGeometries(geo);*/
}
_this.calcDis(res).then(response=>{
if(response){
_this.secPointList.length > 1 ?_this.secPointList.sort((a, b) => a.distance - b.distance) : ''
_this.currMarkerGeo = markerGeoFormat(_this.secPointList)
}
});
});
});
// 获取当前设备定位
getCurrLoc() {
return new Promise((res, rej) => {
parent.wx.getLocation({
type: "gcj02", // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
altitude: true,
/*isHighAccuracy: true, // 高精度模式*/
success: function(response) {
let { latitude, longitude } = response;
res(`${latitude},${longitude}`);
},
fail(err) {
rej(err);
}
});
});
},
// 调用微信的内置地图接口
parent.wx.openLocation({
latitude: Number(arr[0]), // 纬度,浮点数,范围为90 ~ -90
longitude: Number(arr[1]), // 经度,浮点数,范围为180 ~ -180。
name: mapSpotName // 位置名
});