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

[fayeah]

背景

目前项目做的是一个小程序平台，意在集成很多其他的小程序和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:

• https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
• https://taro-docs.jd.com/taro/docs/apis/location/getlocation/