微信小程序 - 获取权限

一、前言

领导知道我是用uniapp写的APP,所以让我把App转成微信小程序

二、开发 - 微信小程序的权限获取

业务代码层面其实不需要修改很多,主要是一些plus的兼容问题需要使用#ifdef去解决,下面主要介绍一下微信小程序权限获取相关的配置和写法

1. manifest.json 配置

如果有使用相关权限,需要在mp-weixin里面添加对应的permission,代码如下

⚠️注意:这个必须加上,如果不在permission中加上对应的权限说明,正式环境是无法去获取对应权限的,即wx.authorize失效

JSON 复制代码
{
    "mp-weixin" : {
        "permission" : {
            "scope.camera": {
              "desc": "需要访问您的摄像头以提供拍照翻译功能"
            },
            "scope.record": {
              "desc": "需要访问您的麦克风以提供语音翻译功能"
            }
        }
    }
}
2. 查询权限

摄像头权限为例子,每次在使用摄像头功能前去前置检测是否有权限

使用到的api

js 复制代码
const checkPermission = () => {
    wx.getSetting({
        success: (res) => {
            // 在 manifest.json 有声明过
            const permissionName = 'scope.camera'
            const hasPermission = res.authSetting[permissionName]
            
            if (hasPermission === true) {
            
                // 已经同意了权限
                // 执行相关初始化逻辑
              
            } else if (hasPermission === false) {
            
                // 已经拒绝了权限
                // 引导用户手动去设置页面开启相关权限(图一所示)
                wx.showModal({
                    title: '权限提示',
                    content: '请前往设置页面开启摄像头权限',
                    success: (res) => {
                        if (res.confirm) {
                            wx.openSetting()
                        } else {
                            // 用户拒绝去设置
                            // 显示没有权限相关提示模块 (图二所示)
                        }
                    }
                })
                
            } else {
            
                // 还没申请过该权限
                // 打开自定义的提示dialog,说明你需要干嘛(图三所示)
               
            }
        }
    
    })

}

图一

图二

图三

3. 获取权限

摄像头权限为例子,点击图二的继续

js 复制代码
const handleAuthorize = () => {

    // 获取某个权限,一次只能获取一个(图四所示)
    wx.authorize({
        scope: 'scope.camera',
        success: () => {
        
            // 同意授权
            // 关闭提示弹窗 && 初始化拍照逻辑(图五所示)
            
        },
        fail: () => {
        
            // 拒绝授权 | 接口调用失败
            // 关闭弹窗 && 提示错误 && 保存日志 && 显示没有权限相关提示模块(图二所示)
        }
    })
}

图四

图五

三、上线 - 配置隐协议

开发环境和真机调试对于权限都是很宽松的,但是到了上线,则需要配置隐私协议,否则无法获取到相关权限。具体操作参考官方文档即可

相关推荐
大叔_爱编程44 分钟前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_11 小时前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
wangpq17 小时前
微信小程序map组件渲染几百个marker后,页面卡顿,如何解决?
vue.js·微信小程序
伊泽瑞尔.20 小时前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app
lyz24685920 小时前
uniapp uni-swipe-action滑动内容排版改造
uni-app
IT199520 小时前
uniapp笔记-自定义分类组件
前端·笔记·uni-app
MaCa .BaKa20 小时前
27-衣橱管理系统(小程序)
java·vue.js·spring boot·小程序·架构·uni-app·maven
Json____21 小时前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·uni-app·h5电商·手机端商城·前端手机端商城·静态商城
往日情怀酿做酒 V17639296381 天前
微信小程序逆向开发
微信小程序·小程序