微信小程序 - 获取权限

一、前言

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

图四

图五

三、上线 - 配置隐协议

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

相关推荐
Sun Peng25 分钟前
【uniapp】uniapp+uview-ui+mixins实现搜索+上拉加载+加载动画功能:
ui·uni-app
00后程序员张33 分钟前
iOS 开发环境搭建完整指南 Xcode 安装配置、iOS 开发工具选择、ipa 打包与 App Store 上架实战经验
android·macos·ios·小程序·uni-app·iphone·xcode
Q_Q5110082851 小时前
python+springboot+uniapp基于微信小程序的停车场管理系统 弹窗提示和车牌识别
vue.js·spring boot·python·django·flask·uni-app·node.js
慎思笃行_5 小时前
uniapp 无线连接 手机基座
智能手机·uni-app
00后程序员张5 小时前
App 上架全流程指南,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 分发与 App Store 审核经验分享
android·ios·小程序·https·uni-app·iphone·webview
2501_916013745 小时前
iOS App 上架流程详解,苹果应用发布步骤、App Store 审核规则、ipa 文件上传与测试分发实战经验
android·ios·小程序·https·uni-app·iphone·webview
小样还想跑5 小时前
UniApp ConnectSocket连接websocket
websocket·elasticsearch·uni-app
Nan_Shu_6146 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
计算机学姐6 小时前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
—Qeyser6 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel