微信小程序获取位置权限用户拒绝授权后重新引导用户授权
解决问题:
微信小程序获取位置权限,用户点击允许后直接地图选点,或者用户拒绝授权后引导用户到设置页面重新授权,需要代码可直接滑至页面底部。
调用方法:
1.利用uni.getSetting
获取用户的当前设置
2.利用uni.authorize
提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。如果用户之前拒绝了授权,此接口会直接进入失败回调,一般搭配uni.getSetting
和uni.openSetting
使用
3.利用uni.openSetting
调起客户端小程序设置界面,返回用户设置的操作结果
4.利用uni.chooseLocation
打开地图选择位置
解决思路:
利用uni.getSetting
获取设置信息-用户权限列表:
如果用户已授权,则直接调用uni.chooseLocation
打开地图选择位置;
如果还未授权且,利用uni.authorize
发起授权
如果用户点击了允许,调用选择位置信息函数选择位置
如果用户点击了拒绝或者用户之前点击过拒绝授权,打开用户设置模态框
利用uni.openSetting
调起客户端小程序设置界面
用户在设置中点击了允许,调用选择位置信息函数
用户在设置中点击了不允许,展示拒绝授权信息
完整代码:
页面标签
<!-- 点击按钮获取地图位置信息 -->
<view @click="getSetting">{
{ address }}</view>
<!-- 为保持页面modal弹框UI样式一致,使用第三方uView组件 -->
<u-modal v-model="isShowOpen" :content="content" @confirm="openSetting" :show-cancel-button="true"></u-modal>
方法:
export default{
data(){
address: '点击添加地址(必填)',
isShowOpen:false,//是否打开设置
content:'检测到您没打开获取位置功能权限,是否去设置打开?',
},
methods:{
// 1.获取设置信息-用户权限列表
getSetting() {
const that = this;
uni.getSetting({
success: res => {
console.log('用户权限列表:', res.authSetting)
if (res.authSetting['scope.userLocation']) {
console.log('已授权userLocation')
// 选择位置信息
that.chooseLocation();
} else {
console.log('用户未授权userLocation')
//2.用户第一次进来发起授权
uni.authorize({
scope: 'scope.userLocation',
success: (res1) => {
console.log("允许授权", res1);
// 3.如果用户点击了允许,调用选择位置信息函数选择位置
that.chooseLocation();
},
fail: (err1) => {
console.log("拒绝授权", err1);
// 3.如果用户点击了拒绝或者用户之前点击过拒绝授权,打开用户设置模态框
that.isShowOpen = true;
},
})
}
}
})
},
// 4.打开设置
openSetting(){
const that = this;
uni.openSetting({
success: (res) => {
console.log("打开设置成功", res);
if (res.authSetting['scope.userLocation']) {
console.log('成功授权userLocation')
// 5.用户在设置中点击了允许,调用选择位置信息函数
that.chooseLocation();
} else {
console.log('用户未授权userLocation')
// 5.用户在设置中点击了不允许,展示拒绝授权信息
uni.showToast({
title: '你拒绝了授权,无法操作内容',
icon: 'none',
duration: 3000,
})
}
},
fail: (err) => {
console.log("打开设置失败", err)
}
})
},
// 选择位置信息
chooseLocation() {
uni.chooseLocation({
success: (res) => {
console.log("选择位置信息", res)
this.address = res.address + res.name
this.lat = res.latitude
this.lng = res.longitude
},
fail(err) {
console.log("选择位置信息失败或者点击了取消按钮", err)
},
})
},
}
}