本篇文章實現(xiàn)了uniapp 微信小程序?qū)崟r獲取定位信息,小程序打開即可持續(xù)獲取定位信息, 位置更新也會觸發(fā)相關(guān)自定義事件

tips: 如果需要做成區(qū)分登錄狀態(tài)的 看這篇優(yōu)化后的文章:

uniapp 持續(xù)獲取定位(登錄狀態(tài)下才獲取)(不采用定時器)(任意頁面都可監(jiān)聽定位改變)_前端小胡兔的博客-CSDN博客uniapp 持續(xù)獲取定位(登錄狀態(tài)下才獲取)(不采用定時器)(任意頁面都可監(jiān)聽定位改變)https://blog.csdn.net/weixin_44805839/article/details/132106373?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132106373%22%2C%22source%22%3A%22weixin_44805839%22%7D

優(yōu)點

1. 只設(shè)置一次
2. 不采用定時器的方式
3. 無需多個頁面調(diào)用
4. 單獨頁面若想獲取當(dāng)前位置是否變化 可單獨設(shè)置監(jiān)聽,并調(diào)用不同邏輯事件

原理:?

1. 采用uniapp推出的:?uni.onLocationChange(監(jiān)聽實時地理位置變化事件)
2. 在app.vue中定義一次 且設(shè)置監(jiān)聽事件(便于獨立頁面監(jiān)測定位改變并調(diào)用其他事件)

有關(guān)"uni.onLocationChange"的相關(guān)內(nèi)容,不再贅述,詳情見官網(wǎng):uni.onLocationChange(FUNCTION CALLBACK) | uni-app官網(wǎng)uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/api/location/location-change.html#startlocationupdate????

步驟:

1.1 在app.vue中開啟監(jiān)聽位置變化:

<script>
	//import httpApi from '@/utils/httpApi.js' //調(diào)用接口 自行修改
	export default {
		globalData: {
			latitude: undefined,
			longitude: undefined,
		},
		
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
			uni.startLocationUpdate({
				success: res => {
					uni.onLocationChange(function(res2) {
						console.log('緯度：' + res2.latitude);
						console.log('經(jīng)度：' + res2.longitude);
						getApp().globalData.latitude = res2.latitude; //賦值給全局變量 后續(xù)子頁面需要使用
						getApp().globalData.longitude = res2.longitude;
//httpApi.syncLocation(res2.latitude, res2.longitude).then(); //調(diào)用上傳位置接口 自行修改
					});
				},
				fail: err => console.error('開啟小程序接收位置消息失?。?, err),
				complete: msg => console.log('調(diào)用開啟小程序接收位置消息 API 完成')
			});
		},
		onHide: function() {
			console.log('App Hide')
			uni.stopLocationUpdate();
		},
	}
</script>

1.2 在manifest.json文件源碼中做相關(guān)配置

????????(重要設(shè)置"startLocationUpdate"和"onLocationChange"):

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

2.1 在app.vue中設(shè)置監(jiān)聽globalData(全局變量)的方法:

methods: {
	// 監(jiān)聽全局變量變化(經(jīng)緯度需要)
	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); // 執(zhí)行回調(diào)方法
				}
			},
			get: function() {
				// 在其他界面調(diào)用getApp().globalData.variate的時候，這里就會執(zhí)行。
				return val; // 返回當(dāng)前值
			}
		})
	},
},

2.2 在需要監(jiān)聽的頁面的onload設(shè)置監(jiān)聽

onLoad() {
    //實時獲取當(dāng)前位置
	getApp().watch('latitude', this.watchLocation);
	getApp().watch('longitude', this.watchLocation);
},

2.3 在頁面的methods中設(shè)置watchLocation方法(監(jiān)聽globalData數(shù)據(jù)變化后的回調(diào)):

//監(jiān)聽location變化回調(diào)
watchLocation: function(name, value) {
	console.log('name==' + name, value);
	if (name == 'latitude') {
		this.latitude = value;
	}
	if (name == 'longitude') {
		this.longitude = value;
	}
},

這樣就實現(xiàn)啦,如果本文幫助到你的話 記得點個贊哦~文章來源地址http://www.zghlxwxcb.cn/news/detail-621050.html

到了這里，關(guān)于uniapp 小程序?qū)崟r且持續(xù)獲取定位信息(全局設(shè)置一次)(單頁面監(jiān)聽定位改變)(不采用定時器)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！