【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址
摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等..
场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息
step1
在小程序中若要获取用户地理位置信息,需得到用户明确授权,且声明用途,所以首先在app.json中配置声明
参见(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html)
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于获取附近门店"
}
}
step2
声明之后即可调用 wx.authorize 向用户申请授权,用户同意之后 调用 wx.getLocation 得到经纬度并做下一步处理
参见(https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html)
//可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope,也可直接调用wx.authorize请求授权;
wx.getSetting({
success(res) {// 查看所有权限
let status = res.authSetting['scope.userLocation']// 查看位置权限的状态,此处为初次请求,所以值为undefined
if (!status) {// 如果是首次授权(undefined)或者之前拒绝授权(false)
wx.authorize({ // 发起请求用户授权
scope: 'scope.userLocation',
success() {// 用户允许了授权
wx.getLocation({ // 请求位置信息
type: 'gcj02',
success (res) {
console.log(res, 95);// 得到位置信息(经纬度,速度等等),====>>>>>请求附近门店
}
})
}
})
}
}
})
step3
兼容用户拒绝授权的场景:若用户可能会点击不允许,我们是拿不到位置信息的,而且我们再次调用 wx.authorize 请求位置授权,上面的弹框是不会再次出现的,除非用户删除小程序后再次进入 ,那如果我们还需要再次向用户申请授权呢?
当当当当~
这时我们就需要用到wx.openSetting了,这个api可以直接跳转打开设置页面,引导用户授权
具体代码如下:
wx.openSetting({
success (data) {
if (data.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: ,
success () {}
})
}
}
})
用户授权之后,我们就可以再次 使用 wx.getLocation 来获取位置信息了
step4
通过经纬度,逆解析获取用户城市
这里使用的是百度地图的api,使用方法非常简单,调用接口,传入经纬度,就可以得到省市区,甚至街道啦(但是街道不怎么准,省市区一般也够用了)
// 百度地图的密钥请自行注册。。。
wx.request({
url: 'http://api.map.baidu.com/geocoder/v2/?ak=你的密钥&location=' + latitude + ',' + longitude + '&output=json',
data: {},
header: { 'Content-Type': 'application/json' },
success: function (ops) {
wx.setStorageSync('province', ops.data.result.addressComponent.province)//把位置信息存起来
wx.setStorageSync('city', ops.data.result.addressComponent.city)// 把位置信息存起来
},
fail: function (resq) {
wx.showModal({
title: '信息提示',
content: '请求失败',
showCancel: false,
confirmColor: '#f37938'
});
},
complete: function () {}
})
今天的课就上到这里了,各位同学再见!
留个微信,欢迎交流
【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址的更多相关文章
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 微信小程序从零开始开发步骤(二)创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打 ...
- 微信小程序把玩(三十二)Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx. ...
- 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载
微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...
- 解决微信小程序用 SpringMVC 处理http post时请求报415错误
解决微信小程序用 SpringMVC 处理http post时请求返回415错误 写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax类似处理方法一致 小程序端请求代码 ...
- 微信小程序中用户唯一ID的获取
折腾到半夜,搞得挺兴奋,总结一下,免得忘了: 1.微信小程序直接获得的是一些简单信息,基本无用 2.用户唯一标识是openid,还有一个unionid是关联多个公众号之类情况下用,我不大关心 3.在g ...
- 【微信小程序】用户首次进入小程序拒绝授权,如何再次调用授权页面,获取用户信息userInfo
前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户 ...
- 微信小程序中用户登录和登录态维护
提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...
- 微信小程序之用户数据解密(七)
[未经作者本人同意,请勿以任何形式转载] 经常看到有点的小伙伴在群里问小程序用户数据解密流程,所以打算写一篇关于小程序用户敏感数据解密教程: 加密过程微信服务器完成,解密过程在小程序和自身服务器完成, ...
随机推荐
- Django学习笔记(11)——开发图书管理页面
一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...
- WPF 鼠标移动时触发图片旋转(非动画)
非动画,只是简单的触发器. 主要是针对旋转的写法. 代码 <Grid> <Image x:Name="image" Source="nifi3.gif& ...
- 【MySQL】条件查询之排序聚合分组分页查询
排序查询 语法:order by 子句 order by 排序字段1 排序方式1 , 排序字段2 排序方式2... 排序方式: ASC:升序,默认的. DESC:降序. 注意: 如果有多个排序条件,则 ...
- HTTP Error 502.5 - ANCM Out-Of-Process Asp.Net Core发布到IIS失败
问题概述 asp.net core网站发布到windows server 2012r2 IIS后,出现这个报错.dotnet xx.dll命令网站能够正常运行.说明不是程序问题. 经过一番折腾终于部署 ...
- 2019-9-2-win10-uwp-判断本地ip
原文:2019-9-2-win10-uwp-判断本地ip title author date CreateTime categories win10 uwp 判断本地ip lindexi 2019-0 ...
- ASP.NET Core中的jQuery Unobtrusive Ajax帮助器
最近在ASP.NET Core下写文章管理系统时,准备在分页显示文章内容时,使用Ajax.网上找了篇帖文,简单翻一下,仅供自己查阅. 原链接:https://dotnetthoughts.net/jq ...
- 实验6:Mapreduce实例——WordCount
实验目的1.准确理解Mapreduce的设计原理2.熟练掌握WordCount程序代码编写3.学会自己编写WordCount程序进行词频统计实验原理MapReduce采用的是“分而治之”的 ...
- 2.监控软件zabbix-客户端安装
环境准备 Zabbix-Agent只要http://www.zabbix.com/download.php中可以下载的Zabbix-Agent均可以搭建Zabbix-Agent环境,本文选用CentO ...
- JS 判断设备来源
1.js代码判断当前设备: function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", ...
- Facebook发布全新JavaScript引擎:Hermes
摘要: JS引擎开始升级了... 原文:技术栈中的爱马仕?Facebook发布全新JavaScript引擎:Hermes 作者:Carson_Ho Fundebug经授权转载,版权归原作者所有. 前言 ...