微信小程序 - 获取权限

一、前言

领导知道我是用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: () => {
        
            // 拒绝授权 | 接口调用失败
            // 关闭弹窗 && 提示错误 && 保存日志 && 显示没有权限相关提示模块(图二所示)
        }
    })
}

图四

图五

三、上线 - 配置隐协议

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

相关推荐
Aiden Targaryen2 小时前
Windows/MacOS WebStorm/IDEA 中开发 Uni-App 配置
java·uni-app·webstorm
想要飞翔的pig3 小时前
uniapp+vue3页面滚动加载数据
前端·vue.js·uni-app
会功夫的李白3 小时前
uniapp自动构建pages.json的vite插件
前端·uni-app·vite
TE-茶叶蛋4 小时前
Uniapp、Flutter 和 React Native 全面对比
flutter·react native·uni-app
特立独行的猫a7 小时前
uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台
uni-app·开源·harmonyos·鸿蒙·影视
七七小报10 小时前
uniapp-商城-61-后台 新增商品(添加商品到数据库)
uni-app
hbcui198410 小时前
uni-app x正式支持鸿蒙原生应用开发
uni-app·harmonyos·uni-app x
lqj_本人10 小时前
鸿蒙OS&UniApp制作支持多图上传的图片选择器:打造高性能移动端上传体验#三方框架 #Uniapp
华为·uni-app·harmonyos
好好的哦12 小时前
uni-app小程序登录后…
小程序·uni-app
!win !1 天前
uni-app小程序登录后…
前端·uni-app