本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件
tips: 如果需要做成区分登录状态的 看这篇优化后的文章:
uniapp 持续获取定位(登录状态下才获取)(不采用定时器)(任意页面都可监听定位改变)_前端小胡兔的博客-CSDN博客uniapp 持续获取定位(登录状态下才获取)(不采用定时器)(任意页面都可监听定位改变)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
优点
- 只设置一次
- 不采用定时器的方式
- 无需多个页面调用
- 单独页面若想获取当前位置是否变化 可单独设置监听,并调用不同逻辑事件
原理:
- 采用uniapp推出的: uni.onLocationChange(监听实时地理位置变化事件)
- 在app.vue中定义一次 且设置监听事件(便于独立页面监测定位改变并调用其他事件)
有关"uni.onLocationChange"的相关内容,不再赘述,详情见官网:uni.onLocationChange(FUNCTION CALLBACK) | uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/api/location/location-change.html#startlocationupdate
步骤:
1.1 在app.vue中开启监听位置变化:
<script>
//import httpApi from '@/utils/httpApi.js' //调用接口 自行修改
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('经度:' + res2.longitude);
getApp().globalData.latitude = res2.latitude; //赋值给全局变量 后续子页面需要使用
getApp().globalData.longitude = res2.longitude;
//httpApi.syncLocation(res2.latitude, res2.longitude).then(); //调用上传位置接口 自行修改
});
},
fail: err => console.error('开启小程序接收位置消息失败:', err),
complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
});
},
onHide: function() {
console.log('App Hide')
uni.stopLocationUpdate();
},
}
</script>
1.2 在manifest.json文件源码中做相关配置
(重要设置"startLocationUpdate"和"onLocationChange"):文章来源:https://www.toymoban.com/news/detail-621050.html
"mp-weixin" : {
"appid" : "", //appid
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "定位" //微信小程序获取location必填
}
},
"requiredPrivateInfos": [
"getLocation", //使用uni.getlocation才需声明
"startLocationUpdate", //必要
"onLocationChange" //必要
]
},
2.1 在app.vue中设置监听globalData(全局变量)的方法:
methods: {
// 监听全局变量变化(经纬度需要)
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设置监听
onLoad() {
//实时获取当前位置
getApp().watch('latitude', this.watchLocation);
getApp().watch('longitude', this.watchLocation);
},
2.3 在页面的methods中设置watchLocation方法(监听globalData数据变化后的回调):
//监听location变化回调
watchLocation: function(name, value) {
console.log('name==' + name, value);
if (name == 'latitude') {
this.latitude = value;
}
if (name == 'longitude') {
this.longitude = value;
}
},
这样就实现啦,如果本文帮助到你的话 记得点个赞哦~文章来源地址https://www.toymoban.com/news/detail-621050.html
到了这里,关于uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!