首页 > 编程语言 >微信小程序实时获取用户位置 onLocationChange

微信小程序实时获取用户位置 onLocationChange

时间:2023-12-13 15:35:36浏览次数:33  
标签:Taro log 微信 实时 listener onLocationChange latitude console const

首先在app.config.json中配置

requiredBackgroundModes: [
  'location'
],
requiredPrivateInfos: [
  'getLocation',
  'onLocationChange',
  'startLocationUpdate',
],
permission: {
  'scope.userLocation': {
    desc: '你的位置信息将用于小程序位置接口的效果展示',
  },
},

方法调用:

let registerOnlyOnceFlag = false;
let currentLat = 0; // 当前lat,用于判断位置变化则调用存储接口

useDidShow(() => {
  getUserLocationFunc();
});

const getUserLocationFunc = () => {
  Taro.startLocationUpdate({
    success: (res) => {
      console.log('定位成功', res);
      onLocationChangeFunc()
    },
    fail: (err) => {
      Taro.showModal({
        title: '获取定位失败,请重新授权',
        content: '',
        success: (res) => {
          if (res.confirm) {
            Taro.openSetting()
          } else {
            // 容错处理
            // Taro.switchTab({
            //   url: '/pages/home/index'
            // })
          }
        }
      })
    }
  })
}

const listener = (result) => {
  console.log('listener---result', result)
  const { latitude, longitude } = result;
  // 此处存一下,以下代码 本项目是将定位存储再使用,所以多了一层判断,可忽略以下代码
  if (currentLat !== latitude) {
    console.log('save api')
    saveUserPosition({ latitude, longitude, id: userId })
    currentLat = latitude;
  }
}

// 页面隐藏时停止定位
useDidHide(() => {
  Taro.stopLocationUpdate({
    success: () => {
      console.log('success')
    },
    fail: (err) => {
      console.log('err', err)
    }
  })
  Taro.offLocationChange(listener);
});

const onLocationChangeFunc = () => {
  if (!registerOnlyOnceFlag) {
    registerOnlyOnceFlag = true; // 页面刷新后重新注册,否则无需注册多次
    Taro.onLocationChange(listener);
  }
}

标签:Taro,log,微信,实时,listener,onLocationChange,latitude,console,const
From: https://www.cnblogs.com/ZerlinM/p/17899144.html

相关文章

  • 微信小程序订阅消息推送
    一、后台配置模板消息:首先打开微信后台https://mp.weixin.qq.com/,找到订阅消息那里进行模板配置: 点击选用按钮,选择指定的模板,选择字段,确定后可以看到下面的信息: 复制上面的模板ID,这个在模板消息推送时要用的。点击详情,可以看到下面的信息:这里面的模板ID和详细内容是需要......
  • js实时显示当前时间(转载)
    <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>显示时间</title></head><body&g......
  • 即时通讯技术文集(第27期):实时音视频技术合集(Part2) [共17篇]
    ​为了更好地分类阅读52im.net总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第27 期。[- 1 -] 专访微信视频技术负责人:微信实时视频聊天技术的演进[链接] http://www.52im.net/thread-1201-1-1.html[摘要] 本次专访是对谷沉沉老师在即将到来的2017Ar......
  • 微信私域引流
    微信作为当下最大的app流量来源,每日的日活超十亿,很多人都在里面进行客户引流,更是把微信作为自己产品流量的承接载体,也就是我们常说的私域流量。实际上微信本身就是一个超大的流量航母,自身就有很多可以进行引流的方式和入口,和大家分享微信本身自带引流入口:通信录导入:根据微信号综合......
  • H5网页跳转微信小程序
    获取scheme码该接口用于获取小程序scheme码,适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放,详见获取URLscheme。 效果:https://www.youlingrc.com/minishare.html项目地址:https://github.com/yusheng9/openwxchat H......
  • uniapp+node.js+mysql前后端微信小程序授权登录
    文章目录一、前端代码?1.微信授权登录的页面(没有样式,自己写)2.”我的“页面3.封装request.js的页面4.vuex的状态管理的页面5.添加了识别有放token的没有登录就自动跳转登录的功能的main.js页面二、后端代码1.数据库连接页面(sql.js)2.数据库页面封装查询用户与插入用户信息的页面以及......
  • ETLCloud的应用策略——实时数据处理是关键
    一、ETLCloud是什么?ETLCloud又称数据集成(DataOps),是RestCloud旗下的一款数据仓库管理工具,通过自动化数据转换和集成来实现企业内部和外部数据的无缝对接,从而帮助企业快速获取准确的数据信息,进而作出正确的业务决策。ETLCloud的功能分为离线数据集成、实时数据集成、数据源管理、监控......
  • ETLCloud的应用策略——实时数据处理是关键
    一、ETLCloud是什么? ETLCloud又称数据集成(DataOps),是RestCloud旗下的一款数据仓库管理工具,通过自动化数据转换和集成来实现企业内部和外部数据的无缝对接,从而帮助企业快速获取准确的数据信息,进而作出正确的业务决策。ETLCloud的功能分为离线数据集成、实时数据集成、数据源管......
  • websocket使用方法|vue实时推送
    WebSocket实时推送创建一个WebSocket对象:准备变量mounted(){//初始化consturi=window.location.href;//获取网页urlconstprotocol=uri.split("/")[0];//https:确定当前传输协议constdomain=uri.split("/")[2];//Iip:portconstwsPr......
  • 微信公众号文章批量转pdf
    操作步骤步骤一:下载离线html网页文件1、登录微信公众号后台,打开“发表记录”。2、按Ctrl+S或右击网页选择“另存为”,保存离线的html网页文件。(网页的文件后缀名是html)3、记住html文件保存路径(如下图最上面红色方框),并设置【html文件名称】。注意:html文件由序号1~n,html文件名称格......