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

在项目的入口文件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 ~ -90longitude: Number(arr[1]), // 经度，浮点数，范围为180 ~ -180。name: mapSpotName // 位置名
});

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

在Vue2.0项目中与H5项目中获取、设置、清除cookie的一些注意点
在vue中获取cookie 原生js方法没有直接获取cookie中值的,所以我在vue的项目中我自己写了个获取cookie值的方法(还有删除与设置cookie的方法还没去写,大家一起来补充完善) &l ...
H5项目中 ios的border不显示问题
H5项目中 ios的border不显示问题在开发H5项目过程中,发现先天如果用border,在安卓正常显示,苹果则显示不出来原因是border给0.01rem(1px) 解决方法:遇到需要用bor ...
展馆语音导览小程序开发方案有源码
展馆或景区语音导览小程序,全馆讲解,科技赋能.适合科技馆.博物馆.旅游景区等在线音频讲解,让游客更好的体验科技的乐趣,更加了解展览项目.有免费试听音频,有付费的导游讲解音频,优惠券,购买会员,在线支付 ...
uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈
uniapp项目中使用canvas生成海报并保存.微信分享.发送至朋友圈 1.html <canvas canvas-id="poster&qu ...
Angular2项目中浏览器拦截弹出窗口的解决方法
Angular2项目中浏览器拦截弹出窗口的解决方法为什么把项目是Angular2的放到了前边? 因为正常也页面网上已经很多解决方案.请自行百度或Google. 现象:当window.open为用户触 ...
TIA博途WINCC中英文切换的项目中摄氏度符号无法正常显示的解决办法
TIA博途WINCC中英文切换的项目中摄氏度符号无法正常显示的解决办法问题概述组态了中英文切换的多语言项目,有些应用场合在数值显示时需要标注单位,例如:摄氏度符号°C. 常见的问题是切换显示语言为 ...
vue项目中npm install安装失败，万能解决方法
vue项目中npm install安装失败,万能解决方法,即更换淘宝镜像,再执行npm install. 具体如下: npm config set registry https://registry. ...
springboot项目中pom文件parent报错的解决方法
springboot项目中pom文件parent报错的解决方法 1:首先配置maven环境 2:修改maven的settings.xml文件 3:用编辑器修改settings文件 4:设置Eclips ...
vue项目中使用vant时tabbar遮挡页面解决方法
标题vue项目中使用Vant时tabbar遮挡页面解决方法单页面使用: 页面底部可以增加一个div,<div style="height: 5rem;"></d ...

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

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

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

最新文章

热门文章