前提:本人项目中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。