【uni-app】微信小程序定位授权与指引

48 阅读1分钟

在微信小程序开发中,获取用户的地理位置是一项常见需求。出于隐私和安全的考虑,微信小程序需要经过用户授权才能获取其位置信息。本文将介绍微信小程序的定位授权功能。

技术栈:uni-app、Vue3(3.4.21)、TypeScript(4.9.5)、wot-design-uni(1.2.26)、UnoCSS(0.58.9)

 ​编辑

实现步骤

  • 检查定位权限

首先,我们需要确认小程序是否已获得用户的地理位置授权。可以通过 uni.getSetting 来获取用户的权限设置:

/** 是否已授权 */
  const checkLocationPermission = () => {
    return new Promise<void>((resolve, reject) => {
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.userLocation']) {
            // 未请求过权限或权限被拒绝,可以发起权限请求
            requestLocationPermission()
            reject()
          } else {
            // 权限已经被授予
            resolve()
          }
        },
        fail: () => {
          uni.showToast({
            title: '获取设置失败',
            icon: 'none',
          })
          reject()
        },
      })
    })
  }

  • 请求定位权限

当发现用户未授权时,我们需要主动请求权限。通过 uni.authorize 方法可以发起授权请求:

/** 获取权限 */
  const requestLocationPermission = () => {
    uni.authorize({
      scope: 'scope.userLocation',
      success: () => {
        // 用户已授权
      },
      fail: () => {
        // 用户拒绝授权,可引导用户至设置页手动开启
        uni.showModal({
          title: '需要授权',
          content: '需要获取您的地理位置,请在设置中打开位置权限',
          success: (modalRes) => {
            if (modalRes.confirm) {
              uni.openSetting()
            }
          },
        })
      },
    })
  }

如果用户同意授权,success 回调会被触发;如果用户拒绝授权,我们可以通过 uni.showModal 提示用户手动到设置页面开启权限。 

​编辑

  •  用户引导

在用户拒绝授权后,通过 uni.showModal 提示用户,并提供指引到设置页面的方法。uni.openSetting 可以打开小程序的设置页面,让用户手动开启权限。

以上就是微信小程序定位授权与指引的实现啦^-^