iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)
  • 106
分享到

uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)

uni-app小程序前端 2023-08-31 13:08:31 106人浏览 安东尼
摘要

本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件 tips: 如果需要做成区分登录状态的 看这篇优化后的文章: uniapp 持续获取定位(登录状态下才获取)(不采用定

本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件

tips: 如果需要做成区分登录状态的 看这篇优化后的文章:

uniapp 持续获取定位(登录状态下才获取)(不采用定时器)(任意页面都可监听定位改变)_前端小胡兔的博客-CSDN博客uniapp 持续获取定位(登录状态下才获取)(不采用定时器)(任意页面都可监听定位改变)https://blog.csdn.net/weixin_44805839/article/details/132106373?csdn_share_tail={"type":"blog","rType":"article","rId":"132106373","source":"weixin_44805839"}


优点

  1. 只设置一次
  2. 不采用定时器的方式
  3. 无需多个页面调用
  4. 单独页面若想获取当前位置是否变化 可单独设置监听,并调用不同逻辑事件

原理: 

  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 在app.vue中开启监听位置变化:

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" //必要]},

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://blog.csdn.net/weixin_44805839/article/details/131984957

--结束END--

本文标题: uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)

本文链接: https://www.lsjlt.com/news/385830.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作