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

server/2025/1/19 18:27:55/

文章目录

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

  "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步骤的页面

/*** 点击授权定位*/
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去代替

uni.getSetting({success: function (res) {const statue = res.authSettingif (!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('调用授权窗口失败')},
})

http://www.ppmy.cn/server/159681.html

相关文章

npm的包管理

从哪里下载包 国外有一家 IT 公司,叫做 npm,Inc.这家公司旗下有一个非常著名的网站: https://www.npmjs.com/,它是全球最大的包共享平台,你可以从这个网站上搜索到任何你需要的包,只要你有足够的耐心!到目前位置,全球约…

今天你学C++了吗?——C++中的STL

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…

.Net 6.0 .Net7.0 .Net8.0 .Net9.0 使用 Serilog 按日志等级写入日志及 appsetting.json 配置方式实现

前言 最近使用最新版的Serilog记录日志时,发现以前有些关于Serilog的Nuget弃用了,最关键的是有些配置写法也改变,于是就整理了一下最新版的Serilog配置方式(appsetting.json)的使用 说明:我是用的.Net6,最新长期支持…

pyqt5开发ui图形化工具

1.背景 本人系统, 网络, 内核驱动, 嵌入式开发, 之前项目没机会接触UI图形程序开发, 测试用例都是终端文字提示 OK/NG, scuuess/fail, 高级一点终端文字加高亮颜色也曾幻想自己开发一款 软件工具/APP, 让上百万人使用, 然后被 被阿里/腾讯/…收购, 最后躺平虽然做了程序员, 成…

HTML5 Canvas实现的跨年烟花源代码

以下是一份基于HTML5 Canvas实现的跨年烟花源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">…

合合信息名片全能王上架原生鸿蒙应用市场,成为首批数字名片类应用

长期以来&#xff0c;名片都是企业商务沟通的重要工具。随着企业数字化转型&#xff0c;相较于传统的纸质名片&#xff0c;数字名片对于企业成员拓展业务、获取商机、提升企业形象等方面发挥着重要作用。近期&#xff0c;合合信息旗下名片全能王正式上线原生鸿蒙应用市场&#…

MySQL8数据库全攻略:版本特性、下载、安装、卸载与管理工具详解

大家好&#xff0c;我是袁庭新。 MySQL作为企业项目中的主流数据库&#xff0c;其5.x和8.x版本尤为常用。本文将详细介绍MySQL 8.x的特性、下载、安装、服务管理、卸载及管理工具&#xff0c;旨在帮助用户更好地掌握和使用MySQL数据库。 1.MySQL版本及下载 企业项目中使用的…

重拾Python学习,先从把python删除开始。。。

自己折腾就是不行啊&#xff0c;屡战屡败&#xff0c;最近终于找到前辈教我 第一步 删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder&#xff0c;跟matlab最像&#xff0c;也最容易入手。 从VScode上搞python&#xff0c;最后安装到appdata上&#xff0c;安装插…