微信小程序开发——小程序API获取用户位置及异常流处理完整示例
前言:
小程序需要添加一个定位功能,主要的就是获取用户位置的经纬度,然后根据用户经纬度进行一些判断操作。
在小程序提供的Api中,获取用户定位信息的主要Api是 wx.getLocation(obj) 。但是使用这个API,会先获取用户授权。如果用户取消授权,那么再调这个Api,也不会再出现授权页面,也就不能再获取用户位置了,这就需要使用其他的Api辅助打开授权页面了。所以获取用户位置就需要完整的授权、获取位置的流程及异常流处理了。
业务流程图:
关键技术点:
页面加载默认调用 wx.getLocation ,然后如果获取失败则调用 wx.getSetting ,如果未授权,则调用 wx.openSetting 打开授权设置界面,如果授权界面设置允许授权,则返回页面再次调用 wx.getLocation,主要的流程就是这个了。
示例代码:
- const app = getApp()
- Page({
- data: {
- hiddenReAuthorizePop:true,//隐藏重新授权确认弹窗
- latitude: "", //维度,浮点数
- longitude: "", //经度,浮点数
- content:"本活动需要获取位置才可以参加"
- },
- onLoad: function() {
- //1. 页面加载的时候获取定位
- this.getLocation()
- },
- /**
- * 1. 获取用户定位
- */
- getLocation: function() {
- var self = this;
- wx.getLocation({
- type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的坐标,可传入'gcj02'
- altitude: true, //传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度
- success: function(res) {
- var latitude = res.latitude; // 纬度,浮点数
- var longitude = res.longitude; // 经度,浮点数
- self.setData({
- latitude: res.latitude,
- longitude: res.longitude
- })
- },
- fail: function(res) {
- //未授权就弹出弹窗提示用户重新授权
- self.reAuthorize();
- }
- });
- },
- /**
- * 1.2 重新授权按钮点击事件
- * click event
- */
- openLocationSetting: function() {
- var self = this
- //先获取用户的当前设置,返回值中只会出现小程序已经向用户请求过的权限
- wx.getSetting({
- success: function(res) {
- if (res.authSetting && !res.authSetting["scope.userLocation"]) {
- //未授权则打开授权设置界面
- wx.openSetting({
- success: function(res) {
- if (res.authSetting && res.authSetting["scope.userLocation"]) {
- //允许授权,则自动获取定位,并关闭二确弹窗,否则返回首页不处理
- self.getLocation();
- self.setData({
- hiddenReAuthorizePop:true
- })
- wx.showToast({
- title: '您已授权获取位置信息',
- icon: 'none'
- })
- }else{
- //未授权就弹出弹窗提示用户重新授权
- self.reAuthorize();
- }
- }
- })
- } else {
- //授权则重新获取位置新(授权设置界面返回首页,首页授权二确弹窗未关闭)
- self.getLocation();
- }
- }
- })
- },
- /**
- * 重新授权
- */
- reAuthorize:function(){
- var self=this
- self.setData({ hiddenReAuthorizePop:false})
- }
- })
代码片段地址:https://developers.weixin.qq.com/s/uRMylxmO7e3Q
原创专业博客,转载请注明来源地址:https://www.cnblogs.com/xyyt/p/9871898.html
微信小程序开发——小程序API获取用户位置及异常流处理完整示例的更多相关文章
- 通过腾讯地图api获取用户位置限制在指定位置区域
<!--在微信中获取用户位置--><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">& ...
- 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...
- mpvue小程序开发之 wx.getUserInfo获取用户信息授权
一.背景 在使用美团的mpvue2.0框架搭建起小程序项目后,做获取用户信息时遇到一些问题:微信小程序更新api后,获取用户信息只能通过button上的绑定方法 来获取用户信息,vue上方法绑定不能直 ...
- 微信公众号开发(三)获取access_token
微信公众号开发(三)获取access_token 1.说明 access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.acce ...
- Ceph Object Gateway Admin api 获取用户列表问题
按照官方文档使用Admin Ops API 获取用户列表 GET /admin/user时 返回{code: 403, message: Forbidden}这里有两个问题:首先用户列表的请求为 如下 ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
- HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...
- 微信小程序维护登录态与获取用户信息
前言. 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://m ...
- 微信小程序开发01-小程序的执行流程是怎么样的?
前言 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是我们需要做一个Hybrid体系,如果做App,React Native也是不错的选择,但是一定要有完善的分层: ① ...
随机推荐
- Map 接口
1.键值对存储一组对象 2.key值不能重复,value可以重复 3.具体的实现类,HashMap,treeMap,HashTable,LinkedHashMap ------------------ ...
- VC中明明已经添加了头文件却还提示未定义的问题
我在VS中编译程序遇到这个错误:error C3861: 'ReadDirectoryChangesW': identifier not found, even with argument-depen ...
- 正则表达式——WPF输入控件TextBox 限定输入特定字符
概念: 正则表达式是对字符串操作的一种逻辑公式, 就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字符串的一种过滤逻辑. 目的: 给定一个正 ...
- git异常
1. SSL certificate problem: self signed certificate 因git默认是ssl方式验证,在采用http请求时,是使用的账号密码方式,因此需要git放行. ...
- mysql查询一个表的字段,添加或修改到另外一个表的数据
DELIMITER $$ USE `topsale`$$ DROP PROCEDURE IF EXISTS `sale_proce`$$ CREATE DEFINER=`root`@`%` PROCE ...
- jquery接触初级-----ajax 之:jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...
- javascript _ajax 原理 初级
1.1使用php 方式获取时间:写一个time.php文件,保存在test 文件夹中 <!DOCTYPE html> <html lang="en"> &l ...
- NIPS 2016上22篇论文的实现汇集
http://blog.csdn.net/jiandanjinxin/article/details/54087592 日前,LightOn CEO 兼联合创始人 Igor Carron 在其博客上放 ...
- GIS案例学习笔记-多边形内部缓冲区地理模型
GIS案例学习笔记-多边形内部缓冲区地理模型 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:对于多边形,建立内部缓冲区. 问题:ArcGIS缓冲工具不支持内部 ...
- C# WCF初识
原文:http://www.cnblogs.com/artech/archive/2007/02/26/656901.html 方式1: 需引用 System.ServiceModel namespa ...