uniapp 持续获取定位(登录状态下才获取)(不采用定时器)(任意页面都可监听定位改变)

基于上次文章做了优化和改良,保证在登录状态下才获取定位信息

uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)_uniapp小程序定位_前端小胡兔的博客-CSDN博客本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件_uniapp小程序定位https://blog.csdn.net/weixin_44805839/article/details/131984957?utm_source%20=%20uc_fansmsg

---

优点

1. 只设置一次
2. 不采用定时器的方式
3. 无需多个页面调用
4. 单独页面若想获取当前位置是否变化 可单独设置监听,并调用不同逻辑事件
5. 根据登录状态区分是否调用(新增)

---

原理: 

1. 采用uniapp推出的: uni.onLocationChange(监听实时地理位置变化事件)

2. 在app.vue中定义一次 且设置监听事件(便于独立页面监测定位改变并调用其他事件)

        有关"uni.onLocationChange"的相关内容,不再赘述,详情见官网:

uni.onLocationChange(FUNCTION CALLBACK) | uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/api/location/location-change.html

---

实现:

1 持续获取定位

1.1 app.vue页面定义globalData(全局变量)和方法,并在onshow和onhide中调用

<script>
	//import httpApi from '@/utils/httpApi.js' //自定义的接口文件 
	export default {
		globalData: {
			latitude: undefined,
			longitude: undefined,
			loginType: false, //登录状态 true为已登录
		},

		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
			this.globalData.loginType = uni.getStorageSync('token') ? true : false;
			this.updateLocationChange();
		},
		onHide: function() {
			console.log('App Hide')
			uni.stopLocationUpdate();
		},
		methods: {
			updateLocationChange: function() {
				if (!this.globalData.loginType) {
					console.log("没登录 不上传locationchange")
					return;
				}
				let that = this;
				uni.startLocationUpdate({
					success: res => {
						uni.onLocationChange(function(res2) {
							that.globalData.latitude = res2.latitude;
							that.globalData.longitude = res2.longitude;
                            //然后调用上传经纬度接口 自行定义
                        //httpApi.syncLocation(that.globalData.latitude, that.globalData
								//.longitude).then(res => {});
						});
					},
					fail: err => console.error('开启小程序接收位置消息失败：', err),
					complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
				});
			},
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

1.2 在manifest.json文件源码中做相关配置

        (重要设置"startLocationUpdate"和"onLocationChange"):

"mp-weixin" : {
	"appid" : "", //appid
	"setting" : {
		"urlCheck" : false
	},
	"usingComponents" : true,
	"permission" : {
		"scope.userLocation" : {
			"desc" : "定位" //微信小程序获取location必填
		}
	},
	"requiredPrivateInfos": [
			"getLocation", //使用uni.getlocation才需声明
			"startLocationUpdate", //必要
			"onLocationChange" //必要
		]
},

1.3 登录成功后调用:

getApp().globalData.loginType = true; //改变登录状态
getApp().updateLocationChange(); //开启上传位置

1.4 退出登录后修改登录状态:

getApp().globalData.loginType = false;

这样就做到登录后开启监听位置啦~

---

2 监听globalData中的属性

在任意页面监听globalData中的数据实时变化,并调用定义的不同方法

2.1 在app.vue中定义 "watch" 方法,具体方法如下:

// 监听全局变量变化(经纬度需要)
watch: function(variate, method) {
	var obj = this.globalData;
	let val = obj[variate]; // 单独变量来存储原来的值
	Object.defineProperty(obj, variate, {
		configurable: true,
		enumerable: true,
		set: function(value) {
			val = value; // 重新赋值
			if (method) {
				method(variate, value); // 执行回调方法
			}
		},
		get: function() {
			// 在其他界面调用getApp().globalData.variate的时候，这里就会执行。
			return val; // 返回当前值
		}
	})
},

2.2 使用

例如我想经纬度变化时 可以在页面这样操作:

onLoad() {
	this.latitude = getApp().globalData.latitude;
	this.longitude = getApp().globalData.longitude;
	//实时获取当前位置
	getApp().watch('latitude', this.watchLocation);
	getApp().watch('longitude', this.watchLocation);
},
methods: {
    //监听location变化回调
	watchLocation: function(name, value) {
		if (name == 'latitude') {
			this.latitude = value;
		}
		if (name == 'longitude') {
			this.longitude = value;
		}
	},
}

3.重要tips

在实现过程中发现,由于 onLocationChange 非常灵敏,可能会触发接口多次上传,甚至导致性能下降,对此我做了限制,即 onLocationChange 触发后,距上次上传位置的时间大于 3s(自行定义) 才允许上传,可以参考以下:

3.1 app.vue中设置globalData:

updateLocationTimestamp: "", //上传location的时间戳

3.2 上传位置方法中设置:

(先看代码结构, 后面贴了代码 自行复制)

判断代码:

if (!that.globalData.updateLocationTimestamp || parseInt(Date.parse(new Date())) - parseInt(that.globalData.updateLocationTimestamp) >= 3000) {

}

设置时间戳代码:

that.globalData.updateLocationTimestamp = Date.parse(new Date())

---

以上就是本篇文章的全部内容啦~ 欢迎小伙伴们一起探讨 一起进步~