uniapp小程序获取位置权限(不允许拒绝)

需求

小程序上如果需要一些定位功能,那么我们需要提前获取定位权限。我们页面的所有功能后续都需要在用户同意的前提下进行,所以一旦用户点了拒绝,我们应该给予提示,并让用于修改为允许。

实现

1.打开手机GPS

经过测试发现即使手机GPS没有打开,小程序依旧可以获取定位信息。所以这一步可以省略。

js 复制代码
const { locationEnabled } = uni.getSystemInfoSync()
if (!locationEnabled) {
  uni.showToast({
    title: '该功能需要手机定位,请打开手机定位后重新进入!',
  })
  return
}

2.获取小程序定位权限

  1. 首先我们检查用户是否开启了该权限

    js 复制代码
    //传一个权限key,则返回true,false判断是否有该权限
    //传一个权限key的数组,返回没有打开的权限列表
    export async function authIsPass (authValue: string | string[]) {
      try {
        const res = await new Promise((resolve, reject) => {
          uni.getSetting({
            success: (res) => {
              resolve(res)
            },
            fail: (err) => {
              reject(err)
            },
          })
        })
        const { authSetting }: any = res
        if (typeof authValue === 'string') {
          if (authSetting[authValue]) {
            return true
          } else {
            return false
          }
        }
        if (Array.isArray(authValue)) {
          let noPassList: string[] = authValue.filter((key: string) => !authSetting[key])
          if (noPassList.length > 0) {
            return noPassList
          } else {
            return []
          }
        }
      } catch (err) {
        return false
      }
    }

    因为抽离成了公共方法,所以会复杂一些,主要就是调用uni.getSetting获取到所有的设置权限,然后判断自己所需要的权限是否开启。

3.进行权限获取

js 复制代码
uni.authorize({
  scope: 'scope.userLocation',
  fail: (res) => {
    uni.showModal({
      title: '使用该功能必须允许位置服务,是否重新授权?',
      showCancel: false,
      success: ({ confirm }) => {
        if (confirm) {
          uni.openSetting({
            success() {
              //重新获取权限并判断
              console.log('开启权限成功')
            },
            fail() {
              console.log('开启权限失败')
            },
          })
        }
      },
    })
  },
  success: () => {
    //重新获取权限并判断
  },
})

上面代码主要依靠uni.showModal方法进行权限获取,如果你之前拒绝过该权限,则直接走fail回调,如果同意则走success回调。拒绝之前使用uni.showModal进行权限提示,并且在确定按钮绑定uni.openSetting方法重新进行权限设置。

完整逻辑

js 复制代码
const setLocationAuth = async () => {
  // 判断用户是否获取定位权限
  //authIsPass方法就是上面步骤2的方法
  const flag = await authIsPass('scope.userLocation')
  if (!flag) {
    uni.authorize({
      scope: 'scope.userLocation',
      fail: (res) => {
        uni.showModal({
          title: '使用该功能必须允许位置服务,是否重新授权?',
          showCancel: false,
          success: ({ confirm }) => {
            if (confirm) {
              uni.openSetting({
                success() {
                  setLocationAuth()
                  console.log('开启权限成功')
                },
                fail() {
                  console.log('开启权限失败')
                },
              })
            }
          },
        })
      },
      success: () => {
        setLocationAuth()
      },
    })
    return
  }
  //获取到定位权限后的操作
}
setLocationAuth()

上面方法,是在vue3 + ts的环境执行的。进入页面就会立即执行setLocationAuth方法,然后走获取权限的逻辑。如果用户点击拒绝则会弹出提醒,用户点击确定按钮后会跳到权限设置页面进行重新设置。无论他选择了允许还是不允许,重新回到页面都会重新执行setLocationAuth方法,再次进行判断。

相关推荐
QQ_21696290968 小时前
基于微服务架构的店铺管理系统的设计与实现
大数据·spring boot·后端·spring·微服务·小程序·架构
EatFan21 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
bug总结2 天前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
大佐不会说日语~2 天前
Android 16 下 uni-app APP 提示“网络连接失败”的排障与修复
android·uni-app
m0_587383002 天前
折扣卡CPS系统源码的技术架构与实战开发指南
人工智能·小程序·数据挖掘·系统架构·需求分析
2501_915106322 天前
苹果App Store上架费用及流程全面解析
android·ios·小程序·https·uni-app·iphone·webview
白远山2 天前
家政服务派单平台搭建实战指南:从需求分析到系统设计全流程解析
java·开发语言·架构·uni-app·需求分析
T01156182 天前
全栈项目实战手记|艺培场馆课时预约小程序全项目开发历程完整复盘总结
运维·服务器·小程序
lhldsg2 天前
多商户团购系统源码:技术架构选型与二次开发实战指南
java·小程序·架构
2601_949950632 天前
一套小程序,解决资料整理、在线刷题和错题复盘
人工智能·小程序·刷题·练习·小程序推荐