小程序打开地图选择位置wx.chooseLocation 踩坑记

最近需求允许小程序打开地图位置来选择详细地址。貌似wx.chooseLocation()可以实现。很自信的就进行开发。开发完在手机上测试bug来了。苦逼的开启翻阅开发文档。。。

踩坑一：

wx.chooseLocation()获取地理位置。授权弹窗是否允许获取地理位置，点击不允许，发现接下来的n此触发都不会在弹起授权弹窗，直接fail。原来不卸载小程序，此时小程序不会再次弹起授权弹窗。了。

解决办法：在fail里面自定义弹窗，引导用户授权。

踩坑二：

自定义引导用户进行授权，让用户开启允许地理位置。发现开发工具和手机上还不一样。。what?

手机上的显示只有一个用户信息，没有开启地理位置按钮。。

开发工具上很完美的可以开启地理位置按钮。。

原来是：app.json里面加上配置：

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

主代码实现逻辑用户点击事件触发：

第一步检测用户有没有授权wx.getSetting()，没有授权就发起授权请求wx.authorize()，此时会出现弹窗：如果点击允许就会进入地图进行选择，如果点击不允许就授权失败，小程序只会做一次授权，接下来的n此触发都会直接进入fail，不会再次出现弹窗。

为了更好的用户体验只能做一个模拟弹窗引导客户重新开启授权。此时用户可以取消或者确定，当选择确定的时候就会重新授权。。。

此时调用wx.openSetting()打开地理位置就ok啦，然后就会自动弹出选择地图，大功告成。。

代码块：

wx.getSetting({
        success(res) {
          console.log('res是否开启授权', res)
          if (!res.authSetting['scope.userLocation']) { 
            wx.authorize({
              scope: 'scope.userLocation',  
              success() {
                // console.log('前用户发起授权请求')
                wepy.chooseLocation({
                  success: res => {
                    console.log('打开地图选择位置确定', res)
                  },
                  fail: res => {
                    console.log('打开地图选择位置取消', res)
                  }
                })
              },
              fail() {
                // 用户点击不允许引导重新获取授权
                that.fetchAgainLocation()
              }
            })
          } else {
             // 已经授权了就会直接进入地图
            wepy.chooseLocation({
              success: res => {
               console.log('打开地图选择位置确定', res)
              },
              fail: res => {
              console.log('打开地图选择位置取消', res)
              }
            })
          }
        }
      })

wx.openSetting()引导客户再次授权

fetchAgainLocation() {
    let that = this
    wx.getSetting({
      success: (res) => {
        var statu = res.authSetting;
        if (!statu['scope.userLocation']) {
          wx.showModal({
            title: '是否授权当前位置',
            content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
            success: (tip) => {
              if (tip.confirm) {
                wx.openSetting({
                  success: (data) => {
                    if (data.authSetting["scope.userLocation"] === true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      wx.chooseLocation({
                        success: res => {
                          console.log('打开地图选择确定', res)
                        }
                      })
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'success',
                        duration: 1000
                      })
                    }
                  },
                  fail: () => {},
                  complete: () => {}
                });
              }
            }
          })
        }
      },
      fail: ()=>{},
      complete: ()=>{}
    })
  }

过程是痛苦的，结果是甜甜的。。