vue3+ts+uniapp 微信小程序(第一篇)—— 微信小程序定位授权,位置信息权限授权

文章目录

    • 简介
    • 一、先看效果
        • [1.1 授权定位前,先弹出隐私协议弹框](#1.1 授权定位前,先弹出隐私协议弹框)
        • [1.2 上述弹框点击同意,得到如下弹框](#1.2 上述弹框点击同意,得到如下弹框)
          • [1.3 点击三个点,然后点设置](#1.3 点击三个点,然后点设置)
        • [1.4 在1.2步骤下,无论同意或者拒绝](#1.4 在1.2步骤下,无论同意或者拒绝)
    • [二、manifest.json 文件配置](#二、manifest.json 文件配置)
    • 三、微信公众平台配置
        • [3.1 登录进入微信公众平台,点击账号设置](#3.1 登录进入微信公众平台,点击账号设置)
        • [3.2 去完善隐私协议](#3.2 去完善隐私协议)
        • [3.3 填写需要的用户权限](#3.3 填写需要的用户权限)
        • [3.4 提交审核](#3.4 提交审核)
    • 四、代码实现
        • [4.1 通过代码调起隐私协议和定位授权](#4.1 通过代码调起隐私协议和定位授权)
        • [4.2 使用位置信息处逻辑](#4.2 使用位置信息处逻辑)

简介

开发工具:VsCode

技术栈:vue3 + Ts + uni-app

简介:图文结合,十分钟带你搞定微信小程序如何授权定位

注意:最核心的代码在步骤四


一、先看效果

1.1 授权定位前,先弹出隐私协议弹框
1.2 上述弹框点击同意,得到如下弹框
1.3 点击三个点,然后点设置
1.4 在1.2步骤下,无论同意或者拒绝

注:uni.openSetting 即可引导用户跳转此页面,详情参考官方文档

二、manifest.json 文件配置

找到项目中的 manifest.json 文件,在 mp-weixin 中配置如下代码
注 :若是 unibest 项目,则在 manifest.ts 文件中进行配置

bash 复制代码
  "mp-weixin": {
     // ... 其他代码
    "requiredPrivateInfos": [
      "getLocation"
    ],
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      },
    }
   // ... 其他代码
  },

三、微信公众平台配置

微信公众平台官网https://mp.weixin.qq.com/

3.1 登录进入微信公众平台,点击账号设置
3.2 去完善隐私协议
3.3 填写需要的用户权限
3.4 提交审核

四、代码实现

4.1 通过代码调起隐私协议和定位授权

进入系统,调用过此代码之后,即可获得1.4步骤的页面

js 复制代码
/**
 * 点击授权定位
 */
const handleLocation = () => {
  uni.getLocation({
    success: function (res) {
      console.log('res', res)
    },
    fail: function (res) {
      console.log('res', res)
    },
  })
}
4.2 使用位置信息处逻辑

注:我用的 message.comfirm 是 wot design ui 的组件。你们可用 uni.showModal去代替

javascript 复制代码
uni.getSetting({
  success: function (res) {
    const statue = res.authSetting

    if (!statue['scope.userLocation']) {
      // 若未授权摄像头
      message
        .confirm({
          msg: '请授权小程序位置信息权限,以便XXXXX',
          title: '温馨提示',
          confirmButtonText: '授权',
          cancelButtonText: '取消',
        })
        .then(() => {
          // 点击确认,开始判断位置服务权限信息
          uni.openSetting({
            success: function (data) {
              if (data.authSetting['scope.userLocation']) {
                toast.success('授权成功')
                resolve(data)
              } else {
                toast.warning('授权失败')
                reject(error)
              }
            },
            fail(e) {
              reject(e)
            },
          })
        })
        .catch(() => {
          console.log('点击了取消按钮')
        })
    } else {
      // 若已授权
      console.log('存在权限')
      resolve(res)
    }
  },
  fail: function (res) {
    reject(res)
    toast.error('调用授权窗口失败')
  },
})
相关推荐
澄江静如练_11 分钟前
微信小程序发体验版
微信小程序·小程序
颜渊呐2 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长4 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
流口水的兔子4 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记4 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481216 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero8 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠9 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
aklry10 小时前
uniapp三步完成生成一维码图片
uni-app
汤姆yu19 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序