微信小程序获取地理位置实现定位签到功能

为了保证签到定位的精确性,要求开启GPS定位。小程序成功精确获取地理位置打卡签到,需要三步授权验证:

  1. 地理位置的系统开关(系统GPS开关是否打开) --系统级
  2. 允许微信使用定位的开关 (微信是否有获取系统定位的权限) --微信App端
  3. 小程序是否获得了用户使用地理位置的授权 (小程序端向微信请求权限) --小程序端

以下是一个实现测试的小demo,因为要开启和关闭微信的权限调试,需在真机上进行测试

  1. 因为要使用wx.getLocation方法,所以先修改app.json,添加和pages同级的代码
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  1. index.js:
  onShow: function() {
    let sInfo = wx.getSystemInfoSync();
    console.log(sInfo);
    this.setData({
      locationEnabled: sInfo.locationEnabled + "",
      locationAuthorized: sInfo.locationAuthorized + ""
    })

    let that = this;
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        that.setData({
          locationMini: "true",
          location: JSON.stringify(res)
        })
        console.log(res);
      },
      fail(err) {
        that.setData({
          locationMini: "false",
          location: "小程序未开启授权"
        })
        console.log(err);
      }
    })
  },
  1. index.wxml:

  

  地理位置的系统开关 {{locationEnabled}}
  允许微信使用定位的开关 {{locationAuthorized}}
  地理位置的系统开关 {{locationMini}}

  位置信息:
  {{location}}

  1. 圈点勾画
    最终思路就是,先调用wx.getSystemInfoSync来判断系统定位有没有打开和微信是否被授权,都已打开再判断是否小程序获取了位置权限,然后即可获取更精确的位置。

真机效果:


真机效果图.gif

温馨提醒,真机调试!

你可能感兴趣的:(微信小程序获取地理位置实现定位签到功能)