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

这篇具有很好参考价值的文章主要介绍了uniapp小程序获取位置权限(不允许拒绝)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求

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

实现

1.打开手机GPS

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

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

2.获取小程序定位权限

uniapp配置了获取位置的权限,uniapp,微信小程序,uni-app,小程序

  1. 首先我们检查用户是否开启了该权限
    //传一个权限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.进行权限获取

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方法重新进行权限设置。

完整逻辑

const setLocationAuth = async () => {
  const { locationEnabled } = uni.getSystemInfoSync()
	if (!locationEnabled) {
	  uni.showToast({
	    title: '该功能需要手机定位,请打开手机定位后重新进入!',
	  })
	  return
	}
  // 判断用户是否获取定位权限
  //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方法,再次进行判断。文章来源地址https://www.toymoban.com/news/detail-853448.html

到了这里,关于uniapp小程序获取位置权限(不允许拒绝)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现

    1、调用接口,官网文档是这样写的 2、将经纬度转化为位置信息 需要开通腾讯位置服务,开发者每天有一万次的免费转化次数。开通地址  记住当前申请的key值,然后下载微信小程序JavaScriptSDK 然后安全域名设置,在小程序管理后台 - 开发 - 开发管理 - 开发设置 - “服务器域

    2024年02月11日
    浏览(69)
  • uniapp微信小程序uni.getLocation获取位置(经纬度)之逆地址解析获取城市信息

    前言: 我好像隐隐约约的记得前几个月用uniapp开发微信小程序使用API接口uni.getLocation好像能获取到城市信息,但是现在只能获取到经度、纬度了,然后去看了一下uniapp官网发现仅App端支持......好吧!那可能是我记错了,也没关系,竟然能获取到经度和纬度那我们就使用第三方

    2024年02月10日
    浏览(65)
  • uniapp 微信小程序保存图片到系统相册(包括获取手机相册权限)即拿即用

    1. 代码,即拿即用 2. 介绍使用到的方法 1. uni.getSetting uniapp官网链接: https://uniapp.dcloud.io/api/other/setting.html#getsetting 2. uni.authorize 链接:https://uniapp.dcloud.io/api/other/authorize.html#authorize 3. uni.saveImageToPhotosAlbum 链接: https://uniapp.dcloud.io/api/media/image.html#saveimagetophotosalbum 4. uni.openSe

    2024年02月11日
    浏览(63)
  • uniapp微信小程序获取屏幕宽高,胶囊按钮的位置以及Vue3.2在css层获取逻辑层的数据

    场景:在开发小程序时需要把使用了固定定位的按钮放在屏幕的中间,考虑了用 vw  vh  % 但是还要减去按钮宽的一半,所以在这里不适用。以下是uniapp中自带的获取屏幕的高宽等数据,我在这里顺便记录一些其他小知识 1.使用uni.getWindowInfo()  uniapp官网介绍: uni.getWindowInfo(

    2024年02月12日
    浏览(65)
  • uniapp&&微信小程序点击右上角菜单分享功能权限配置

    个人项目地址: SubTopH前端开发个人站   (自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面) SubTopH前端开发个人站 https://subtop.gitee.io/subtoph.github.io/#/home 点击右上角...配置发送给朋友和分享到朋

    2024年02月09日
    浏览(62)
  • 【微信小程序地理位置权限】申请教程

    1.微信为进一步规范开发者调用涉用户信息相关接口或功能,自2022年4月18日开始,将对地理位置相关接口实行准入开通。如未申请,后续将影响线上小程序相关功能的使用。 点击查看公告: 小程序地理位置相关接口调整 (qq.com) 1.打开微信公众平台 (qq.com),扫码登录小程序管

    2024年02月11日
    浏览(51)
  • uniapp开发小程序如何获取用户地理位置

    1、需求说明 需求:点击按钮获取当前微信位置,以及点击拒绝授权后,下次点击还可以拉起授权窗口; 2、言归正传 1、编写代码 模板部分 script部分 2、在 manifest.json 新增如下配置 原因:因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途说明,则将无

    2024年04月14日
    浏览(37)
  • uniapp,小程序获取定位,打开地图选择位置失败问题

    场景: 调用api报错 chooseLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json 说明: 1.以下 8 个接口需完成准入开通流程:getFuzzylocation、getLocation、onLocationChange、chooseAddress、choosePoi、chooseLocation、startLocationUpdate、startLocationUpdateBackground 首先需要开通权限

    2024年02月13日
    浏览(43)
  • 微信小程序地理位置权限申请及使用教程

    准备工作 需要在 微信开发者平台 中注册一个小程序账号,微信开发者平台官网如下 https://mp.weixin.qq.com/ 申请流程 登录 微信开发者平 台后,在左侧选项栏点击 开发-开发管理 在 开发管理 中点击 接口设置 ,在下面就可以进行 地理位置权限申请 了,其中wx. getFuzzyLocation接口

    2024年02月12日
    浏览(44)
  • uniapp 企业微信侧边栏开发网页授权 注入企业权限 注入应用权限 获取userid(2)

    想知道怎么搭建一个企业微信侧边栏应用的,请移步: https://blog.csdn.net/u013361179/article/details/131936040?spm=1001.2014.3001.5501 1、网页授权,获取code 代码: 里面用到的方法: // 获取url后参数code // 删除URL中指定search参数 这个时候就会发现,如果你是从企业微信客户端侧边栏配置的

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包