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;}},
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/25813.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sql查询当前值到最大值中间的数据

方法一 select * from cmp where id >1 and id < max(id)很明显这样做是错的 会报错 invalid use of group function 原因是 max是聚合函数&#xff0c; where条件中不能使用聚合函数 为什么呢 这是一个很有意思的问题&#xff0c;仔细地想一下其实很有道理。我们知道…

Python web实战之Django URL路由详解

概要 技术栈&#xff1a;Python、Django、Web开发、URL路由 Django是一种流行的Web应用程序框架&#xff0c;它采用了与其他主流框架类似的URL路由机制。URL路由是指将传入的URL请求映射到相应的视图函数或处理程序的过程。 什么是URL路由&#xff1f; URL路由是Web开发中非常…

【如何使用cv::erode()函数对图像进行腐蚀操作】

文章目录 `cv::erode()`函数主要用途`cv::erode()`函数的参数卷积核cv::erode()函数主要用途 cv::erode()函数主要用于进行图像的腐蚀操作。这是一种图像处理技术,通常用于消除图像中的噪声、分离两个连接在一起的物体、或者使物体的边界变得更加明显。 腐蚀操作的基本思想是…

go-zero超强工具goctl的常用命令api,rpc,model及其构建的服务解析

goctl api 详情移步&#xff1a; go-zero的路由机制解析 基于go-zero的api服务刨析并对比与gin的区别 goctl rpc goctl支持多种rpc&#xff0c;较为流行的是google开源的grpc&#xff0c;这里主要介绍goctl rpc protoc的代码生成与使用。 protoc是grpc的命令&#xff0c;作用…

用栈实现队列(JS)

用栈实现队列 题目 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元素int…

ELK日志分析系统概述及部署

ELK 平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kibana 三个开源工具配合使用&#xff0c;完成更强大的用户对日志的查询、排序、统计需求。 一、ELK概述 1、组件说明 ①ElasticSearch ElasticSearch是基于Lucene&#xff08;一个全文…

.net core 中间件

先说一下 管道 这个概念&#xff1a; 在ASP.NET Core中&#xff0c;管道&#xff08;Pipeline&#xff09;是一个由多个中间件组成的处理请求和生成响应的机制。请求从第一个中间件开始&#xff0c;经过一系列中间件的处理&#xff0c;然后生成最终的响应。 每个中间件都会处…

Spring Cloud Gateway

一 什么是Spring Cloud Gateway 网关作为流量的入口&#xff0c;常用的功能包括路由转发&#xff0c;权限校验&#xff0c;限流等。 Spring Cloud Gateway 是Spring Cloud官方推出的第二代网关框架&#xff0c;定位于取代 Netflix Zuul。相比 Zuul 来说&#xff0c;Spring Clo…

vue项目实战-脑图编辑管理系统kitymind百度脑图

前言 项目为前端vue项目&#xff0c;把kitymind百度脑图整合到前端vue项目中&#xff0c;显示了脑图的绘制&#xff0c;编辑&#xff0c;到处为json&#xff0c;png&#xff0c;text等格式的功能 文章末尾有相关的代码链接&#xff0c;代码只包含前端项目&#xff0c;在原始的…

Tailwind css优于Bootstrap 7个原因

在某些情况下&#xff0c;Tailwind css 比 Bootstrap 更好&#xff0c;因为它是一个低级 CSS 框架&#xff0c;可让您根据需要构建自己的自定义组件。如果使用得当&#xff0c;它非常注重性能&#xff0c;可以显着减少 CSS 负载并确保更快的渲染。如果 Web 性能和自定义是您的首…

一百四十六、Xmanager——Xmanager5连接Xshell7并控制服务器桌面

一、目的 由于kettle安装在Linux上&#xff0c;Xshell启动后需要Xmanager。而Xmanager7版本受限、没有免费版&#xff0c;所以就用Xmanager5去连接Xshell7 二、Xmanager5安装包来源 &#xff08;一&#xff09;注册码 注册码&#xff1a;101210-450789-147200 &#xff08…

车载软件架构 —— 闲聊几句AUTOSAR OS(十)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕的就是把别人的眼光当成自己生活的唯一标…

HTML <section> 标签

实例 文档中的区段&#xff0c;解释了 PRC&#xff1a; <section><h1>PRC</h1><p>The Peoples Republic of China was born in 1949...</p> </section>定义和用法 <section> 标签定义文档中的节&#xff08;section、区段&#x…

【枚举+trie+dfs】CF514 C

Problem - 514C - Codeforces 题意&#xff1a; 思路&#xff1a; 其实是trie上dfs的板题 先把字符串插入到字典树中 对于每次询问&#xff0c;都去字典树上dfs 注意到字符集只有3&#xff0c;因此如果发现有不同的字符&#xff0c;去枚举新的字符 Code&#xff1a; #in…

Excel功能总结

1&#xff09;每一张表格上都打印表头 “页面布局”-->“打印标题”-->页面设置“工作表”页-->打印标题“顶端标题行” 如&#xff1a;固定第1~2行&#xff0c;设置成“$1:$2” 2&#xff09;将页面内容打印在一页【缩印】 1.选好需要打印的区域&#xff0c;“页面布…

AOSP开发——APN配置文件路径

Android1~9&#xff0c;APN配置文件路径&#xff1a; vendor/sprd/telephony-res/apn/apns-conf_8.xml Android10~12&#xff0c;APN配置文件路径&#xff1a; /vendor/sprd/telephony-res/apn/apns-conf_8_v2.xml Android13&#xff0c;APN配置文件路径&#xff1a; /vendor/…

GitHub的基本使用教程

GitHub是一个基于web的版本控制和协作平台。它允许开发人员将他们的代码存储库存储在云中&#xff0c;并与其他人一起进行工作。GitHub还提供了各种工具和功能来帮助开发人员管理和组织他们的代码项目&#xff0c;包括拉出请求、问题跟踪、代码评论等等。此外&#xff0c;它托管…

Android安卓实战项目(8)---自行车fitting计算软件(源码在文末)

Android安卓实战项目&#xff08;8&#xff09;—自行车fitting计算软件&#xff08;源码在文末&#x1f415;&#x1f415;&#x1f415;&#xff09; 【bilibili演示地址】 https://www.bilibili.com/video/BV1eu4y1B7yA/?share_sourcecopy_web&vd_sourceb2e9b9ed746ac…

0101docker mysql8镜像主从复制-运维-mysql

1 概述 主从复制是指将主数据库的DDL和DML操作通过二进制日志传到从库服务器&#xff0c;然后在从库上对这些日志重新执行&#xff08;也叫重做&#xff09;&#xff0c;从而使得从库和主库的数据保持同步。 Mysql支持一台主库同时向多台从库进行复制&#xff0c;从库同时可以…

ubuntu调整路由顺序

Ubuntu系统跳转路由顺序 1、安装ifmetric sudo apt install ifmetric2、查看路由 route -n3、把Iface下面的eth1调到第一位 sudo ifmetric eth1 0命令中eth1是网卡的名称&#xff0c;更改网卡eth1的跃点数&#xff08;metric值&#xff09;为0&#xff08;数值越小&#xf…