【微信小程序开发】记录一次ios真机调试无法调用getLocation的debug经历

友情提醒:所有蓝字均为超链接

开发工具: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经历,让我进一步认识了日志的重要性。加油,我的春招!


原文连接:https://blog.csdn.net/typefree/article/details/123419910

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

Webpack干货系列 | 在 Webpack 5 集成 ESLint 的方法

使用开源Cesium+Vue实现倾斜摄影三维展示

使用 Abp.Zero 搭建第三方登录模块(三):网页端开发

Vue初探

【前端面试】Vue面试题总结(持续更新中)

Re:用webpack从零开始的vue-cli搭建'生活'

vue3代码编写

Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

SpringBoot+Vue实现简单用户管理平台第二篇(前端设计,接口对接)

SpringBoot+Vue实现前后端分离的实习管理系统

Spring Boot+Vue3 动态菜单实现思路梳理

vue3 axios全局配置封装

热门App 高仿项目12 个 GitHub 上的高仿项目

vue2升级vue3指南(一)—— 环境准备和构建篇

TypeScript--如何在 vue中使用?

Vite+TS带你搭建一个属于自己的Vue3组件库

vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

Java 之SpringBoot+Vue实现后台管理系统的开发

基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结