北京做网站建设的公司有哪些,浏览器一打开就是2345网址导航,网站开发职业技能简历,单页面网站 万网x3基于上次文章做了优化和改良,保证在登录状态下才获取定位信息
uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)_uniapp小程序定位_前端小胡兔的博客-CSDN博客本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定…基于上次文章做了优化和改良,保证在登录状态下才获取定位信息
uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)_uniapp小程序定位_前端小胡兔的博客-CSDN博客本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件_uniapp小程序定位https://blog.csdn.net/weixin_44805839/article/details/131984957?utm_source%20%20uc_fansmsg 优点
只设置一次不采用定时器的方式无需多个页面调用单独页面若想获取当前位置是否变化 可单独设置监听,并调用不同逻辑事件根据登录状态区分是否调用(新增) 原理: 采用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 实现:
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 完成)});},}}
/scriptstyle/*每个页面公共css */
/style 1.2 在manifest.json文件源码中做相关配置 (重要设置startLocationUpdate和onLocationChange):
mp-weixin : {appid : , //appidsetting : {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;}},
} 以上就是本篇文章的全部内容啦~ 欢迎小伙伴们一起探讨 一起进步~
