微信小程序 - 获取权限

一、前言

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

图四

图五

三、上线 - 配置隐协议

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

相关推荐
Mr_li14 小时前
给 Vue 开发者的 uni-app 快速指南
vue.js·uni-app
anyup16 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
icebreaker17 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker17 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
Mintopia2 天前
Vue3 项目如何迁移到 uni-app x:从纯 Web 到多端应用的系统指南
uni-app
Mintopia2 天前
uni-app x 发展前景技术分析:跨端统一的新阶段?
uni-app
不爱说话郭德纲3 天前
告别漫长的HbuilderX云打包排队!uni-app x 安卓本地打包保姆级教程(附白屏、包体积过大排坑指南)
android·前端·uni-app
大米饭消灭者4 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
HashTang4 天前
【AI 编程实战】第 12 篇:从 0 到 1 的回顾 - 项目总结与 AI 协作心得
前端·uni-app·ai编程
JunjunZ4 天前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app