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

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

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

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

1. 因为要使用wx.getLocation方法，所以先修改app.json，添加和pages同级的代码

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

2. 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);
      }
    })
  },

3. index.wxml:

<view class="container">
  <button wx:if="{{canIUse}}" open-type="openSetting">授权设置页</button>

  <view style='margin-top:40rpx;'>地理位置的系统开关 {{locationEnabled}}</view>
  <view>允许微信使用定位的开关 {{locationAuthorized}}</view>
  <view>地理位置的系统开关 {{locationMini}}</view>

  <view style='margin-top:40rpx;'>位置信息：</view>
  <view style='color:#666;width:100%;word-wrap:break-word;text-align:center;'>{{location}}</view>
</view>

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

真机效果：

真机效果图.gif

温馨提醒，真机调试！