友情提醒:所有蓝字均为超链接
开发工具:Hbuilder X 3.3.11; 微信开发者工具 调试基础库2.22.1
开发框架:uni-app
调试环境:ios微信端
最近开始学小程序开发,以前都是学后端,没有Vue,js的基础,有点头疼。这里先贴出我的代码,这里是实现一个拍照-签到 的功能:
<script>
var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
data() {
return {
canCheckin: true,
photoPath: '',
btnText: '拍照',
showCamera: true,
showImage: false
}
},
onLoad: function() {
qqmapsdk = new QQMapWX({
key: 'MOIBZ-QPNRD-WDC4I-P7CZP-KZA5K-KDBPO'
});
},
methods: {
clickBtn:function(){
let that=this;
if(that.btnText=="拍照"){
let ctx=uni.createCameraContext();
ctx.takePhoto({
quality:"high",
success:function(resp){
console.log(resp.tempImagePath)
that.photoPath=resp.tempImagePath
that.showCamera=false
that.showImage=true
that.btnText="签到"
}
})
}
else{
uni.showLoading({
title: '签到中请稍后'
})
setTimeout(function() {
uni.hideLoading()
},2000)
uni.getLocation({
type: 'wgs84',
success:function(resp){
let latitude = resp.latitude
let longitude = resp.longitude
console.log(latitude)
console.log(longitude)
qqmapsdk.reverseGeocoder({
location:{
latitude:latitude,
longitude:longitude
},
success:function(resp){
console.log(resp.result)
let address = resp.result.address;
let addressComponent = resp.result.address_component;
let nation = addressComponent.nation;
let province = addressComponent.province;
let city = addressComponent.city;
let district = addressComponent.district;
}
})
},
// 输出报错信息getLocation:fail require permission desc
fail: function(err){
console.log(err)
}
})
}
},
afresh: function() {
this.showCamera = true;
this.showImage = false;
this.btnText = '拍照';
}
}
}
</script>
一开始真机调试的时候,控制台只能输出如下信息,说明没能调用成功定位的功能:
一开始我以为是没有配置request合法域名的原因,检查了微信公共平台以及开发者工具,发现都配置了:
这说明,我们联网是成功了的,于是我加了调用失败的代码,输出下控制台的报错信息:
fail: function(err){
console.log(err)
}
输出的结果如下:
复制报错信息“getLocation:fail require permission desc”,启动百度~官方已经对这个进行了说明:
由于ios 系统对用户隐私保护的要求,同时我们也为了让用户可以更好的判断是否要将地理位置信息提供给开发者,故调整为当小程序/小游戏获取用户地理位置信息时,开发者需要填写获取用户地理位置的用途说明:
给出的解决办法就是在 app.json
里面增加 permission 属性配置:
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
但是BBQ了兄弟们,我们是uniapp框架,没有app.json
配置文件呀,百度了下,才发现uniapp有个mainfest.json
的配置文件,长这样:
这是Hbuilder封装好的配置文件,后端er从未有过的体验。我们只需要在微信小程序配置这里,勾选上位置接口,并且填写描述信息(你的位置信息将用于小程序位置接口的效果展示)即可。
回到真机调试,console控制台成功输出了位置信息~
总结
通过这次的debug经历,让我进一步认识了日志的重要性。加油,我的春招!