H5项目中通过iframe引入语音导览解决微信jsapi关于同一级域名二级域名跨域问题解决方案

在项目的入口文件App.js中

在项目的html文件中引入必需的js文件 https://res2.wx.qq.com/open/js/jweixin-1.6.0.js

在页面挂载时初始化调用微信内置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 // 位置名
});

你可能感兴趣的:(前端,微信,javascript,vue.js)