【小程序】平台端实现小程序授权地理位置

背景

目前项目做的是一个小程序平台，意在集成很多其他的小程序和H5页面。在该平台中我们能够实现授权的统一处理，而不需要集成过来的每一个小程序都做同样的操作。那么具体的实现也依赖于后台的配置服务，管理员可以通过上传H5创建响应的条目，平台就可以引导用户打开该H5。

JSSDK

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 我们的H5有可能需要拥用微信的某些能力，所以微信就提供了工具包供网页开发者使用，这样在H5内就可以实现某些小程序的功能，比如扫一扫，获取地理位置等等。

Prerequisite

Taro
合法域名的配置
React
微信开发者工具
VS Code/intellij等代码编辑器

业务流程图

在讨论了几轮技术方案之后，最后在客户能够接受一定时间的误差的条件下，提出了以下方案：

用户打开 小程序平台之后，判断是否有已经授权，如果已经授权，那么传经纬度给到H5
如果没有授权，那么会先去redis去查看是否已经存储了地理信息，如果已经存储那么，使用该地理位置信息（redis存储时间为10分钟，尽量减少误差）
如果redis没有存储信息，那么跳到小程序平台地理位置授权页面，提示用户授权：
如果用户点击“允许”，那么获取当前地理位置，并存储到redis，返回上一个页面（H5），用户再次做地理位置相关的操作就能够获取到数据
如果用户点击“拒绝”，那么直接返回H5
“拒绝”之后再次跳到授权页面，那么提示用户去设置页授权地理位置：

实现

配置地理位置授权：

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

创建授权页，在授权页面判断是否已经授权：

const authSettings = await Taro.getSetting()
const hasLocationAuth = authSettings.authSetting['scope.userLocation']
// false 表示之前已经拒绝过，如果是第一次判断，是undefined
if (hasLocationAuth === false) {
  this.gotoSetting()
} else {
  Taro.authorize({
    scope: 'scope.userLocation',
    success: () => {
      this.getLocation()
    },
    fail: () => {
      Taro.navigateBack()
    }
  })
}

getLocation = () => {
Taro.getLocation({
  type: 'wgs84',
  success: (lbsRes) => {
    this.handleOnSuccess({
      latitude: lbsRes.latitude,
      longitude: lbsRes.longitude,
    })
  }
})
}
gotoSetting = () => {
Taro.showModal({
  content: '需要打开授权地址位置开关哦~快去设置吧！',
  cancelText: '取消',
  confirmText: '去设置',
  confirmColor: '#000000',
  success: ({confirm, cancel}) => {
    if (confirm) {
      Taro.openSetting().then(setting => {
        // 判断设置完成时候是否已经授权
        const locationAuthEnabled = setting.authSetting['scope.userLocation']
        if (locationAuthEnabled) {
          this.getLocation()
        }
      })
    }
    if (cancel) {
      Taro.navigateBack()
    }
  }
})
}

rerence:

fayeah / blogs

【小程序】平台端实现小程序授权地理位置 #41

背景

JSSDK

Prerequisite

业务流程图

实现