微信小程序获取位置权限用户拒绝授权后重新引导用户授权

微信小程序获取位置权限用户拒绝授权后重新引导用户授权

解决问题:

​ 微信小程序获取位置权限,用户点击允许后直接地图选点,或者用户拒绝授权后引导用户到设置页面重新授权,需要代码可直接滑至页面底部。

调用方法:

1.利用uni.getSetting 获取用户的当前设置

2.利用uni.authorize 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。如果用户之前拒绝了授权,此接口会直接进入失败回调,一般搭配uni.getSettinguni.openSetting使用

3.利用uni.openSetting 调起客户端小程序设置界面,返回用户设置的操作结果

4.利用uni.chooseLocation 打开地图选择位置

解决思路:

利用uni.getSetting获取设置信息-用户权限列表:

如果用户已授权,则直接调用uni.chooseLocation 打开地图选择位置;

如果还未授权且,利用uni.authorize 发起授权

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lu4uD0ap-1648964361911)(C:\Users\GIGABYTE\AppData\Roaming\Typora\typora-user-images\1648964049110.png)]

如果用户点击了允许,调用选择位置信息函数选择位置

如果用户点击了拒绝或者用户之前点击过拒绝授权,打开用户设置模态框
在这里插入图片描述

利用uni.openSetting 调起客户端小程序设置界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KPiAGywB-1648964361912)(C:\Users\GIGABYTE\AppData\Roaming\Typora\typora-user-images\1648963973941.png)]

用户在设置中点击了允许,调用选择位置信息函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UU9WQNf1-1648964361913)(C:\Users\GIGABYTE\AppData\Roaming\Typora\typora-user-images\1648964288498.png)]

用户在设置中点击了不允许,展示拒绝授权信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDBdz7pq-1648964361913)(C:\Users\GIGABYTE\AppData\Roaming\Typora\typora-user-images\1648964258438.png)]

完整代码:

页面标签

<!-- 点击按钮获取地图位置信息 -->
<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)
					},
				})
			},
                
            
    }
}

猜你喜欢

转载自blog.csdn.net/m0_52459016/article/details/123936449