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 // 位置名
});