微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度
时间:2022-07-28
本文章向大家介绍微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们在开发小程序时,有些操作必须让用户授权。比如我们获取用户位置,需要用户授权位置信息。授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限。我们这里就以获取经纬度为例,来带大家学会友好的引导用户授权。
老规矩,先看效果图
授权.gif
一,我们使用位置信息,就需要授权
//校验位置权限是否打开
checkLocation() { let that = this; //选择位置,需要用户授权
wx.getSetting({
success(res) { if (!res.authSetting['scope.userLocation']) {
wx.authorize({ scope: 'scope.userLocation',
success() {
wx.showToast({ //这里提示失败原因
title: '授权成功!', duration: 1500
})
},
fail() {
that.showSettingToast('需要授权位置信息');
}
})
}
}
})
},
弹窗.png
首先检验用户是否授权位置信息的权限“scope.userLocation”,如果有授权,我们就可以直接去获取用户的位置经纬度了。如果没有授权,我们就弹窗引导用户去设置页。去设置页的方法如下
// 打开权限设置页提示框
showSettingToast: function (e) {
wx.showModal({ title: '提示!', confirmText: '去设置', showCancel: false, content: e, success: function (res) { if (res.confirm) {
wx.navigateTo({ url: '../setting/setting',
})
}
}
})
},
弹窗引导用户去设置页
由于去设置页,需要用户手动触发,这里我们就用一个setting.wxml页作为过过渡页。
过渡页
我们这个过渡页的按钮,用户点击后就会去真正的授权页了。
授权页
当用户开启地理位置授权后。我们再点击获取位置,就可以获取到用户当前的经纬度了。
获取到了经纬度
完整代码如下
//index.jsPage({
getLocation() { this.checkLocation(); let that = this;
wx.chooseLocation({ success: function(res) { var latitude = res.latitude var longitude = res.longitude;
that.setData({ address: "经纬度:" + longitude + ", " + latitude,
})
}
});
}, //校验位置权限是否打开
checkLocation() { let that = this; //选择位置,需要用户授权
wx.getSetting({
success(res) { if (!res.authSetting['scope.userLocation']) {
wx.authorize({ scope: 'scope.userLocation',
success() {
wx.showToast({ //这里提示失败原因
title: '授权成功!', duration: 1500
})
},
fail() {
that.showSettingToast('需要授权位置信息');
}
})
}
}
})
}, // 打开权限设置页提示框
showSettingToast: function (e) {
wx.showModal({ title: '提示!', confirmText: '去设置', showCancel: false, content: e, success: function (res) { if (res.confirm) {
wx.navigateTo({ url: '../setting/setting',
})
}
}
})
},
})
到此我们就实现了小程序引导授权的全部功能,并且可以获取到用户的位置经纬度了。是不是很简单。
- 围棋之幸?围棋之悲?史上最年轻“五冠王”柯洁宣布再战AI
- spring 在Thread中注入@Resource失败,总为null的解决方案
- ActiveMQ笔记(3):基于Networks of Brokers的HA方案
- HTML5 Video Player概览
- 统计01:概述
- ActiveMQ笔记(2):基于ZooKeeper的HA方案
- ActiveMQ笔记(2):基于ZooKeeper的HA方案
- CSS几个竖直与水平居中盒子模型
- ZooKeeper 笔记(6) 分布式锁
- Hadoop(十五)MapReduce程序实例
- dubbox 的各种管理和监管
- bash魔法堂:History用法详解
- 大众点评cat系统的搭建笔记
- 我们只能在安全和隐私之间寻求平衡吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL|update字段为相同的值是否会记录binlog
- 微服务配置 Config 与消息总线
- 贷款违约预测-Task5 模型融合
- Python字符串
- MYSQL logstash 同步数据到es的几种方案对比以及每种方案数据丢失原因分析。
- 手写“SpringBoot”:几十行代码基于Netty搭建一个 HTTP Server
- SpringCloud Sleuth 分布式请求链路追踪
- StarUML 使用方法
- nacos 服务注册与配置中心
- sql语句中(+)的作用
- 1.7 C++运算符
- 探花交友_搭建开发环境
- 编程体系结构(04):JavaIO流文件管理
- Hadoop框架:HDFS简介与Shell管理命令
- OpenCV的Mat类型以及基本函数使用