微信小程序 监听位置信息

wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.onLocationChange.html

小程序 获取当前城市位置-高德地图_Start2019-CSDN博客小程序获取位置信息,包括省市区、用户拒绝后,调起用户授权设置页,重新授权获取位置信息https://blog.csdn.net/Start2019/article/details/122542917上一篇文章是获取用户所在城市地址信息,这里是根据经纬度监听位置,大概3秒刷新一次经纬度。

需要在app.json中配置

"requiredBackgroundModes": ["location"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序扫描货物码时的地址展示"
    }
  },

微信小程序后台持续定位功能使用 - ShawYoi - 博客园微信小程序团队在7月30日更新了 基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口 从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.sthttps://www.cnblogs.com/cokolxvd/p/11393510.html

具体做法: 

const app = getApp();
Page({
  onShow: function () { 
    this.wxLocation(); //检测是否授权位置信息,若授权则开始监听位置
    
    //开启监听
    const _locationChangeFn = res=> {
      // console.log('location change', res.latitude, res.longitude);
      app.getAddress(res.latitude, res.longitude)
    }
    wx.onLocationChange(_locationChangeFn); 
  },

  //生命周期函数--监听页面隐藏
  onHide: function () {
    wx.offLocationChange();  //取消监听
  },

  //检测位置信息
  wxLocation(){
    wx.getSetting({
      success(res){        
        if(res.authSetting['scope.userLocationBackground']){
          wx.startLocationUpdate({
            success: (res) => {
              console.log('startLocationUpdate-res', res)
            },
            fail: (err) => {
              console.log('startLocationUpdate-err', err)
            }
          })
        } else {
          if(!res.authSetting['scope.userLocation']){ 
            //打开设置页面去授权
            //扫描货物码时开始提示。否则取消后还是能继续扫描,只有返回到该页面时才提示,起不到引导用户授权效果  
          } else {       
            wx.startLocationUpdate({
              success: (res) => {
                console.log('startLocationUpdate-res', res)
              },
              fail: (err) => {
                console.log('startLocationUpdate-err', err)
              }
            })  
          }
        } //判断authSetting['scope.userLocationBackground']结束
        
      }
    });
  },

  //点击货物码
  click: function(){
    wx.getSetting({
        success(res){
          if(!res.authSetting['scope.userLocation']){
            app.utils.showModal('检测到您没打开此小程序的定位权限,是否去设置打开?', '提示').then(()=>{
              wx.openSetting({
                success: function(e){
                  console.log("打开授权页面",e);
                  app.getUserLocation(); //获取地址
                },
              })
            })
          } else {
            //已授权要做的操作
          }
        }
      });
  }
})

app.getAddress(res.latitude, res.longitude) 是我封装在 app.js 中的函数,具体使用过程可以在上个博客中去看一下。

const amapFile = require('./libs/amap-wx.130');
App({
  //获取用户经纬度 latitude纬度, longitude经度
  getUserLocation(){
    var that = this;
    wx.getLocation({
     success: function(res){
       console.log("经纬度",res); 
      //  that.setData({"userInfo.latitude": res.latitude, "userInfo.longitude": res.longitude});
       that.getAddress(res.latitude,res.longitude)
     }
    })
  },
  //转换成省市区 latitude纬度,long经度
  getAddress(latitude, longitude){
    // latitude="22.26",longitude = "112.57";
    var that = this;
    var myAmapFun = new amapFile.AMapWX({ key: that.addressKey }); 
     myAmapFun.getRegeo({
       location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
       success: function (data) {
         let {province,city,district} = data[0].regeocodeData.addressComponent;
         city = (city || city.length>0) ? city:"";
         console.log("省市区", province,city,district)
         
       },
       fail: function (info) { }
     })
  },
})

微信小程序实时获取用户经纬度地理位置信息_电脑小技巧_上网技巧_QQ地带微信小程序实时获取用户经纬度地理位置信息https://www.oicqzone.com/pc/2019092024670.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序是一种基于微信平台的应用程序,而Vuex是Vue.js框架中用于管理应用程序状态的插件。要在微信小程序监听Vuex的状态变化,可以按照以下步骤进行操作: 1. 在微信小程序的根目录下创建一个`store`文件夹,并在该文件夹下创建一个`index.js`文件。 2. 在`index.js`中引入Vuex和相关的模块文件,同时创建一个Vuex的 Store 实例,例如: ```javascript import Vuex from 'vuex' import moduleA from './moduleA' const store = new Vuex.Store({ modules: { a: moduleA, // 其他模块 }, // 其他配置项 }) export default store ``` 3. 在微信小程序的`app.js`文件中引入刚才创建的`store/index.js`: ```javascript import store from './store/index' App({ store, // 将store注入到app实例中 // 其他配置项 }) ``` 4. 在需要监听Vuex状态变化的页面或组件中,通过`this.$store`可以访问到Vuex的 Store 实例。在`onLoad`生命周期函数中使用`watch`函数监听状态变化: ```javascript Page({ onLoad() { this.watchState() // 监听状态变化 }, watchState() { this.$store.watch( (state) => state.a, // 监听的状态,这里假设我们要监听模块a的变化 (newVal, oldVal) => { console.log('状态变化:', newVal) } ) }, // 其他函数 }) ``` 通过以上步骤,就可以在微信小程序监听Vuex的状态变化了。当状态发生变化时,会触发相应的回调函数,你可以在回调函数中进行相应的操作。注意,这里需要保证引入的Vuex和相关模块文件路径正确,并且需要确保在小程序的`app.js`中将`store`注入到`App`实例中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值