H5页面兼容微信内置功能wx.ready,wx.getLocation在iframe内遇到无法获取位置也不报错问题

前提:本人项目中HTML5使用了iframe嵌套页面,在嵌套页面使用wx.getLocation()一直没有效果。
然后发现wx.config和wx.ready不能放在内嵌页面,否则访问不到,正确代码如下。
外层页面代码:(部分)

 <div class="bottom-nav">
			<ul>
				<li class="j-bottomalink active">
					<a href="<%=basePath%>weChat/index/volunteerView" target="tabmain">
						<label><i class="icon iconfont icon-index-0-copy"></i></label>
						<font>首页</font>
					</a>
				</li>
</div>

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=vFF2LptWMc4jGe7e8H4O3nnHuHgY6Lzc"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>	
	$(function(){
            	config();
    })

 //权限配置
            function config(){
				$.ajax({
				    url : "/weChat/index/wxConfig",
				    type : "post",
				    data : {
				    	url:location.href.split('#')[0],
				        debug: false,
				        jsApiList: ['getLocation', 'openLocation']
				    },
				    datatype : "json",
				    success : function(data, textStatus) {
				    	console.log(eval('(' + data + ')'));
				        wx.config(eval('(' + data + ')'));
				        wx.error(function (res) {
			            alert("微信权限获取失败");
			        	}); 
				    }
				}) 
			}
          
          //微信获取定位
            wx.ready(function () {
				wx.getLocation({
					  type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
					  success: function (res) {
						  var storage=window.localStorage;//本地缓存
				          storage["lat"] = res.latitude; // 纬度,浮点数,范围为90 ~ -90
				          storage["lng"] = res.longitude; // 经度,浮点数,范围为180 ~ -180。
						  $(".bottom-nav ul li a").get(0).click();
					  }
				});
				 wx.error(function (res) {
		            alert("地理位置获取失败");
		        }); 
            })

内嵌页面代码:(部分)

$(document).ready(function() {
				 //权限配置
	            //config();
	            });

function getDIstance(){
	            storage=window.localStorage;//本地缓存
      	         lat1 = storage["lat"]; // 纬度,浮点数,范围为90 ~ -90
      	            lng1 = storage["lng"]; // 经度,浮点数,范围为180 ~ -180。
      	            distance = GetDistance(lat1,lng1,lat2,lng2).toFixed(1);
			    if(distance>1000){
      	            	distance=(distance/1000).toFixed(1)+'k'
      	            }
			    if(distance!="NaN"){
			    	$("#distance_"+item.id).html(distance+" 公里");
      	            }
      	            //微信获取定位
      	            /* wx.ready(function () {
      					wx.getLocation({
      						  type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
      						  success: function (res) {
      						    lat1 = res.latitude; // 纬度,浮点数,范围为90 ~ -90
      						    lng1 = res.longitude; // 经度,浮点数,范围为180 ~ -180。
      						    distance = GetDistance(lat1,lng1,lat2,lng2).toFixed(1);
      						    if(distance>1000){
	        	            	distance=(distance/1000).toFixed(1)+'k'
	        	            }
      						    if(distance!="NaN"){
      						    	$("#distance_"+item.id).html(distance+" 公里");
	        	            }
      						  }
      					});
      				}) */
      			
       	    	html+='<li class="project" dataId="'+item.id+'">';
       	    	html+='<div class="imgbox"><img src="<%=basePath%>'+item.projectImage+'" /></div>'
       	    	html+='<div class="text">'
       	    	html+='<p>'+longProjectName(item.projectName)+'</p>'
       	    	html+='<font>'+(item.vtTeam==null?"":longProjectName(item.vtTeam.teamName))+'</font>'
       	    	html+='<font>发起:'+(item.createTime.substring(0,10))+'<span style="margin-left:40px;width:120px;"><img src="<%=basePath%>/resources/wechat/images/icon11.png" style="width:.3rem;margin-right:5px;"><font id="distance_'+item.id+'">'+distance+' 公里</font></span></font>'
       	    	html+='</div>'
       	    	html+='</li>'
       	    	}

//权限配置
            /* function config(){
				$.ajax({
				    url : "/weChat/index/wxConfig",
				    type : "post",
				    data : {
				    	url:location.href.split('#')[0],
				        debug: true,
				        jsApiList: ['getLocation', 'openLocation']
				    },
				    datatype : "json",
				    success : function(data, textStatus) {
				    	console.log(eval('(' + data + ')'));
				        wx.config(eval('(' + data + ')'));
				        wx.error(function (res) {
				            alert("config错误");
				        }); 
				    }
				})
			}  */

注意点:
之所以发现在iframe页面访问不到wx.config,是开启了wx.config的debug为true,但是内嵌页面没有任何alert。把wx.config放到外层页面就能看到alert说明内部无法使用wx.config和wx.ready。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中,使用wx.getLocation可以获取用户的地理位置信息。但是,对于wx.getLocation的重复调用需要注意一些问题。 首先,频繁调用wx.getLocation可能导致用户体验下降。因为每次调用wx.getLocation都需要用户授权,并且在一些设备上获取地理位置可能需要较长的时间。因此,如果在短时间内多次调用wx.getLocation,用户可能会感到繁琐和不满。 其次,在代码中重复调用wx.getLocation可能会带来一些逻辑上的混乱。例如,在一个页面中,如果重复调用wx.getLocation获取用户位置,可能会导致获取到的位置信息被覆盖或者混乱,而无法正确处理。 为了避免重复调用wx.getLocation带来的问题,可以采取以下的措施: 1. 在获取位置信息后,将其存储在一个合适的变量中,以便之后的使用。这样可以避免重复调用wx.getLocation而导致的延迟和用户体验问题。 2. 通过适当的条件判断,避免重复调用wx.getLocation。例如,可以在用户第一次访问页面时调用wx.getLocation获取位置信息,并在之后的访问中直接使用之前获取位置信息。 3. 如果需要在某些特定的情况下更新位置信息,可以通过用户交互来触发wx.getLocation的调用,而不是在每次页面加载时都去获取。 总之,对于wx.getLocation的重复调用,开发者需要综合考虑用户体验和业务逻辑的需求,避免频繁调用wx.getLocation,同时合理利用已获取位置信息,以提升小程序的性能和用户满意度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值