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

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


优点

  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#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"):

"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: false,enumerable: true,set: function(value) {val = value; // 重新赋值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;}
},

这样就实现啦,如果本文帮助到你的话 记得点个赞哦~

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

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

相关文章

消息队列之六脉神剑:RabbitMQ、Kafka、ActiveMQ 、Redis、 ZeroMQ、Apache Pulsar对比和如何使用

目录 1. RabbitMQ2. Kafka3. ActiveMQ4. Redis5. ZeroMQ6. Apache Pulsar 消息队列&#xff08;Message Queue&#xff09;是一种异步通信机制&#xff0c;它将消息发送者和接收者解耦&#xff0c;从而提高了应用程序的性能、可扩展性和可靠性。在分布式系统中&#xff0c;消息…

数学建模学习(7):Matlab绘图

一、二维图像绘制 1.绘制曲线图 最基础的二维图形绘制方法&#xff1a;plot -plot命令自动打开一个图形窗口Figure&#xff1b; 用直线连接相邻两数据点来绘制图形 -根据图形坐标大小自动缩扩坐标轴&#xff0c;将数据标尺及单位标注自动加到两个坐标轴上&#xff0c;可自定…

亚马逊云科技HPC解决方案,帮助浙江大学实现成本和科研任务的双丰收

浙江大学土壤学科是朱祖祥院士等几代土壤科学家共同创建的A国家重点学科&#xff0c;整体实力雄厚&#xff0c;优势特色明显&#xff0c;总体水平居国内前列。在亚马逊云科技科研创新支持计划&#xff08;Amazon Web Services Cloud Credits for Research&#xff09;的多次支持…

yolov8系列[五]-项目实战-yolov8模型无人机检测

yolov8系列[五]-项目实战-yolov8模型无人机检测 项目介绍项目展示功能简介代码结构如何启动 开发者模式1. 安装依赖环境2. 启动程序 源代码下载其他 项目介绍 无人机识别项目,无人机搭载nvidia jetson边缘计算板子,进行实时识别。使用yolov8算法&#xff0c;训练了识别无人机的…

QEMU源码全解析23 —— QOM介绍(12)

接前一篇文章&#xff1a;QEMU源码全解析22 —— QOM介绍&#xff08;11&#xff09; 本文内容参考&#xff1a; 《趣谈Linux操作系统》 —— 刘超&#xff0c;极客时间 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 上一回分析了…

【计算机网络】网络层协议 -- IP协议

文章目录 1. 网络层做了什么事2. IP协议的简介3. IP协议格式4. 分片与组装5. 网段划分6. 特殊的IP地址7. IP地址的数量限制8. 私网IP地址和公网IP地址9. 路由 1. 网络层做了什么事 保证数据可靠地从一台主机到另一台主机 当双方在进行基于TCP的网络通信时&#xff0c;要保证将数…

解决uniapp的tabBar使用iconfont图标显示方块

今天要写个uniapp的移动端项目&#xff0c;底部tabBar需要添加图标&#xff0c;以往都是以图片的形式引入&#xff0c;但是考虑到不同甲方的主题色也不会相同&#xff0c;使用图片的话&#xff0c;后期变换主题色并不友好&#xff0c;所以和UI商量之后&#xff0c;决定使用icon…

HCIP OSPF链路状态类型总结

OSPF的LSA OSPF是典型的链路状态路由协议&#xff0c;使用LAS&#xff08;链路状态通告&#xff09;来承载链路状态信息。LSA是OSPF的一个核心内容&#xff0c;如果没有LSA&#xff0c;OSPF 是无法描述网络的拓扑结构及网段信息的&#xff0c;也无法传递路由信息&#xff0c;更…

hbuilderx主题色分享-github风格

效果 步骤 hbuilderx总共有三种主题&#xff0c;绿柔主题Default,酷黑主题Monokai,雅黑主题Atom One Dark,修改主题色是基于三种主题之一的&#xff0c;不能直接创建一个新主题&#xff0c;比如下方配置是基于Atom One Dark(对象名为[Atom One Dark])&#xff0c;则当前hbuild…

Stream API:Java 8 编程的秘密武器

Stream API 是 Java 8 中最重要的新特性之一&#xff0c;它是处理集合和数组的一种新方式。它提供了一种简单、灵活和可读的方式来处理集合和数组中的元素&#xff0c;从而使代码更加简洁、高效和易于维护。 1. 原理介绍 Stream API 的核心是 Stream 接口&#xff0c;它表示一…

union和union all

union 是一个计算机函数&#xff0c;用于合并两个或多个 SELECT 语句的结果集。 请注意&#xff0c;UNION 内部的 SELECT 语句必须拥有相同数量的列。列也必须拥有相似的数据类型。同时&#xff0c;每条 SELECT 语句中的列的顺序必须相同。 union 语法&#xff1a; select …

Profinet转EtherNet/IP网关连接AB PLC的应用案例

西门子S7-1500 PLC&#xff08;profinet&#xff09;与AB PLC以太网通讯&#xff08;EtherNet/IP&#xff09;。本文主要介绍捷米特JM-EIP-PN的Profinet转EtherNet/IP网关&#xff0c;连接西门子S7-1500 PLC与AB PLC 通讯的配置过程&#xff0c;供大家参考。 1, 新建工程&…

06-MySQL-基础篇-SQL之DCL语句

SQL之DCL语句 前言DCL 管理用户查询用户创建用户修改用户密码删除用户说明 权限控制常见权限描述查询权限授予权限撤销权限说明 前言 本篇来学习下SQL中的DCL语句 DCL DCL英文全称是Data Control Language(数据控制语言)&#xff0c;用来管理数据库用户、控制数据库的访问权…

有哪些类似bootstrap的纯css框架?

前言 下面是一些类似bootstrap的css框架&#xff0c;以及其开源的仓库和网址附上&#xff0c;整理不易&#xff0c;希望多多点一下赞同收藏喜欢哈~ 1、Tailwind Star&#xff1a;70.5k Tailwind CSS 是一个实用的工具集&#xff0c;用于快速构建现代化的自定义用户界面。它提…

7、单元测试--测试RestFul 接口

单元测试–测试RestFul 接口 – 测试用例类使用SpringBootTest(webEnvironment WebEnvironment.RANDOM_PORT)修饰。 – 测试用例类会接收容器依赖注入TestRestTemplate这个实例变量。 – 测试方法可通过TestRestTemplate来调用RESTful接口的方法。 测试用例应该定义在和被测…

vue2实现一个树型控件(支持展开树与checkbox勾选)

目录 vue2实现一个树型控件(支持展开树与checkbox勾选)TreeItem.vueTree.vue效果 vue2实现一个树型控件(支持展开树与checkbox勾选) TreeItem.vue <template><div class"tree-item"><span click"toggleExpanded" class"icon" v…

Sentinel Dashboard集成Nacos

1.前言 当项目上Sentinel Dashboard做流量监控的时候&#xff0c;我们可以通过Sentinel控制台修改限流配置&#xff0c;但当我们使用Nacos作为配置中心动态配置流控规则的时候&#xff0c;问题就来了。 首先我们要明白&#xff0c;Sentinel Dashboard的配置是从机器的内存中加…

TCP网络通信编程之网络上传文件

【图片】 【思路解析】 【客户端代码】 import java.io.*; import java.net.InetAddress; import java.net.Socket; import java.net.UnknownHostException;/*** ProjectName: Study* FileName: TCPFileUploadClient* author:HWJ* Data: 2023/7/29 18:44*/ public class TCPFil…

【SpringBoot笔记36】SpringBoot自定义WebSocketHandler集成WebSocket

这篇文章,主要介绍SpringBoot自定义WebSocketHandler集成WebSocket。 目录 一、SpringBoot集成WebSocket 1.1、添加WebSocket依赖 1.2、自定义WebSocketHandler 1.3、注册WebSocket服务端

NoSQL--------- Redis配置与优化

目录 一、关系型数据库与非关系型数据库 1.1关系型数据库 1.2非关系型数据库Nosql 1.3关系与非关系区别 1.4非关系产生的背景 1.5总结 二、Redis介绍 2.1Redis简介 2.3Redis优点 2.4 Redis为什么这么快&#xff1f; 三、Redis安装部署 3.1安装redis 3.2测试redis 3.3r…