前言：
在小程序开发中，经常需要获取用户信息的场景，例如在附近商城小程序需要获取用户的位置信息推荐附近门店等。然而，由于用户有权选择是否授权，因此可能会遇到用户拒绝授权的情况。本文将介绍当用户拒绝位置服务授权后，如何引导用户重新开启授权的方法。
需求描述：
本文将主要讨论用户拒绝了位置服务授权后，如何引导用户重新开启授权的问题。
前置知识：
wx.getLocation：用于获取当前地理位置和速度的小程序接口。wx.openSetting：用于调起客户端小程序设置界面，返回用户设置的操作结果。
需求实现：
1. 开启位置服务权限：
A. 在根目录的 app.json 中添加以下代码以开启位置服务权限：
"permission": {
"scope.userLocation": {
"desc": "您的位置信息将用于小程序位置接口的展示"
}
}
2. 唤醒授权弹窗：
A. 实现 getLocation() 方法来获取当前地理位置。
getLocation () {
wx.getLocation({
type: 'wgs84',
altitude: false,
success: res =>{
console.log('接口调用成功回调->', res)
const { latitude, longitude } = res || {}
},
fail: err => {
console.log('接口调用失败回调->', err)
// 拒绝了出现引导弹窗
this.showTipsModal('请授权')
},
complete: () =>{
console.log('接口调用结束回调-> 成功、失败都会执行')
}
})
}
3. 实现授权引导弹窗：
A. 实现 showTipsModal() 方法，在用户拒绝授权后弹出引导弹窗。
showTipsModal (e) {
wx.showModal({
title: '提示',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
console.log('弹窗回调->', res)
const { confirm } = res || {}
if(confirm){
console.log('点击了弹窗去设置按钮-> 可发起下一步流程')
// 跳转至原生设置页
_this.openLocationSetting()
}
}
})
}
4. 跳转原生设置页：
A. 实现 openLocationSetting() 方法，跳转到原生设置页。
openLocationSetting () {
const _this = this
const setting = 'scope.userLocation'
wx.openSetting({
success (res) {
console.log('原生设置页回调->', res)
const { authSetting } = res || {}
// 已开启位置授权
if (authSetting.hasOwnProperty(setting) && authSetting[setting]) {
console.log('已成功开启位置服务->But这里没有返回任何位置信息相关信息')
// 再次手动获取用户位置信息
_this.getLocation()
}
},
fail () {
toast('获取位置信息失败，按“右上菜单 - 关于\n - 右上菜单 - 设置 - 位置信息”授权')
}
})
}
5. 接收设置页回调：
A. 在回调函数中再次获取用户位置信息即可。
6. 完整代码示例，以uniapp项目为例，test.vue：
<template>
<view>
<button @click="getLocation()">授权</button>
</view>
</template>
<script>
export default {
name: 'test',
data() {
return {
lat: '',
lon: ''
}
},
onLoad() {
this.getLocation()
},
methods: {
getLocation() {
const that = this
uni.getLocation({
type: 'gcj02',
altitude: false,
success: (res) => {
console.log('接口调用成功回调->', res)
const { latitude, longitude } = res || {}
that.lat = latitude
that.lon = longitude
uni.setStorageSync('lat', res.latitude)
uni.setStorageSync('lon', res.longitude)
// that.storeList = []
// that.over = false
// that.p = 1
// that.getStoreListData()
},
fail: (err) => {
console.log('接口调用失败回调->', err)
// 拒绝了出现引导弹窗
this.showTipsModal()
},
complete: () => {
console.log('接口调用结束回调-> 成功、失败都会执行')
}
})
},
showTipsModal() {
uni.showModal({
title: '提示',
showCancel: false,
content: '请在设置中打开定位服务',
success: (res) => {
console.log('弹窗回调->', res)
const { confirm } = res || {}
if (confirm) {
console.log('点击了弹窗去设置按钮-> 可发起下一步流程')
// 跳转至原生设置页
this.openLocationSetting()
}
}
})
},
openLocationSetting() {
const setting = 'scope.userLocation'
uni.openSetting({
success: (res) => {
const { authSetting } = res || {}
if (authSetting.hasOwnProperty(setting) && authSetting[setting]) {
console.log('已成功开启位置服务->But这里没有返回任何位置信息相关信息')
// 再次手动获取用户位置信息
this.getLocation()
} else {
console.log('再次手动获取用户位置信息----未开启位置服务')
}
},
fail() {
uni.showModal({
title: '提示',
content: '获取位置信息失败，请在设置中打开定位服务',
showCancel: false
})
}
})
}
}
}
</script>
写在最后：
若有任何错误，请及时指正，我们将尽快更正。如果本文对您有帮助，请给予点赞或收藏！
