一篇搞明白微信小程序的基本授权功能

这篇具有很好参考价值的文章主要介绍了一篇搞明白微信小程序的基本授权功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、介绍

        由于部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,

用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。

此类接口调用时:

  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。
二、使用
        1.首先就是获取用户授权设置 wx.getSetting

通过此接口我们能够查看到,当前有哪些功能授权过了,能够直接使用,调用成功输出结果如下:

一篇搞明白微信小程序的基本授权功能,小程序,微信,微信小程序,小程序

         2.下一步我们只需要判断结果中 authSetting 是否存在某 scope.功能即可,具体代码如下:

这里以相机为例:

wx.getSetting({
        success(res) {
            /* 授权配置不存在摄像头 */
            if (!res.authSetting['scope.camera']) {
                /* 如果不存在  先进行弹出框授权 */
                wx.authorize({
                    scope: 'scope.camera',
                    success() {
                        /* 授权成功直接调用相机拍照 */
                        that.chooseMedia()
                    }
                })
            } else {
                /* 已经授权完毕可以直接使用喽 */
                that.chooseMedia()
            }
        }
    })

 授权可以有两种方式:

        1.弹出框授权----用户体验较好,通过弹出框的形式,让用户进行授权,如图所示:

一篇搞明白微信小程序的基本授权功能,小程序,微信,微信小程序,小程序

        2.设置页面授权----如果我们用的是第一种方式,用户拒绝授权,将不再进行弹出框,而是需要自行去设置页面进行同意授权,这种方式调用结果也是打开设置页面进行同意授权,现在打开设置页也是三种方式

        (1)  button 按钮的 open-type 属性

<button open-type="openSetting" bindopensetting="callback">打开设置页</button>

        (2) 引导用户点击行为触发    wx.openSetting 接口的调用,打开设置页面

wx.openSetting({
  success (res) {
    res.authSetting = {
       "scope.camera": true,
    }
  }
})

       (3) 用户也可以主动在小程序设置界面(「右上角」 - 「关于」 - 「右上角」 - 「设置」)中控制对该小程序的授权状态.

一篇搞明白微信小程序的基本授权功能,小程序,微信,微信小程序,小程序

一篇搞明白微信小程序的基本授权功能,小程序,微信,微信小程序,小程序

一篇搞明白微信小程序的基本授权功能,小程序,微信,微信小程序,小程序

        3.最后一步就是授权成功可以使用该功能,进行下一步的业务操作
三、具体案例:

        主要使用弹出框授权

        1.相机授权,直接上代码:
------相机授权------
/* 点击拍照 */
photo() {
    const that = this
    /* 打开授权设置 */
    wx.getSetting({
        success(res) {
            /* 授权配置不存在摄像头 */
            if (!res.authSetting['scope.camera']) {
                /* 如果不存在  先进行弹出框授权 */
                wx.authorize({
                    scope: 'scope.camera',
                    success() {
                        /* 授权成功直接调用相机拍照/本地图库 */
                        that.chooseMedia()
                    }
                })
            } else {
                /* 已经授权完毕可以直接使用喽 */
                that.chooseMedia()
            }
        }
    })
},
/* 调用媒体工具 */
chooseMedia() {
    const that = this
    wx.chooseMedia({
        mediaType: ['image'], //媒体类型可以是视频或者照片等其他
        sourceType: ['album'], // 指定拍照或相册选择,可选值:camera、album,默认为album   album 指的是图库
        /* maxDuration: 60,  */ // 视频最大时长,单位为秒,默认值为60秒 
        camera: 'back', // 默认使用后置摄像头,可选值:front、back,默认值为back 
        /* sizeType 是否选择压缩图片*/
        success(res) {
            // 选择视频成功,返回选定视频的临时路径和文件名 
            console.log(res)
            const tempFilePath = res.tempFiles[0].tempFilePath
            // 在页面上显示选择的视频 或者 图片
            that.setData({
                imgUrl: tempFilePath,
            })
        }
    })
}
         2.录音授权(接口调整---现在使用 wx.getRecorderManager() 获取全局唯一的录音管理能够实现)
/* 打开麦克风 */
openRecord() {
    const that = this
    /* 打开授权设置 */
    wx.getSetting({
        success(res) {
            /* 授权配置不存在麦克风权限 */
            if (!res.authSetting['scope.record']) {
                /* 如果不存在  先进行弹出框授权 */
                wx.authorize({
                    scope: 'scope.record',
                    success() {
                        /* 授权成功直接调用麦克风 */
                         wx.startRecord({
                            success (res) {
                                //录音文件的临时路径
                                const tempFilePath = res.tempFilePath
                            }
                        })
                        //结束录音
                        setTimeout(function () {
                              wx.stopRecord()
                        }, 10000)
                    }
                })
            } else {
                /* 已经授权完毕可以直接使用 */
                wx.startRecord({
                   success (res) {
                       //录音文件的临时路径
                       const tempFilePath = res.tempFilePath
                   }
                })
            }
        }
    })
},
        3.地理位置授权已在定位功能中讲解,具体可查看

[小程序]定位功能实现-CSDN博客

        4.蓝牙授权(一般像共享单车这种需要连接开启蓝牙设备)
openbluetooth() {
        const that = this
        /* 打开授权设置 */
        wx.getSetting({
            success(res) {
                /* 授权配置不存在蓝牙权限 */
                if (!res.authSetting['scope.bluetooth']) {
                    /* 如果不存在  先进行弹出框授权 */
                    wx.authorize({
                        scope: 'scope.bluetooth',
                        success() {
                            /* 授权成功之后可以进行下一步的操作 */
                        }
                    })
                } else {
                    /* 已经授权完毕可以直接进行下一步 */
                }
            }
        })
    },

我们可以在后续的操作中调用以下 api,具体可查看.

设备 / 蓝牙-通用 / wx.openBluetoothAdapter (qq.com)

wx.openBluetoothAdapter()  //初始化蓝牙模块
wx.onBluetoothAdapterStateChange(function listener)  //监听蓝牙适配器状态变化事件
        5.添加到相册
openWritePhotosAlbum() {
        const that = this
        /* 打开授权设置 */
        wx.getSetting({
            success(res) {
                /* 授权配置不存在该权限 */
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    /* 如果不存在  先进行弹出框授权 */
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success() {
                            /* 授权成功之后 调用保存相册到本地系统的接口 */
                            that.saveMedia()
                        }
                    })
                } else {
                    /* 已经授权完毕可以直接进行下一步 */
                    that.saveMedia()  //保存图片到本地系统
                }        
            }
        })
}

saveMedia(){
    //可以是临时文件路径也可以是永久文件路径 (本地路径)
    //保存图片到本地系统
    wx.saveImageToPhotosAlbum({
      filePath: '文件路径',
      success(res) { 
         console.log(res.errMsg) 
      }
    })
    //保存视频到本地系统
    wx.saveVideoToPhotosAlbum({
      filePath: '文件路径',
      success (res) {
        console.log(res.errMsg)
    }
})
}
        6.添加到联系人
openaddPhoneContact() {
        const that = this
        /* 打开授权设置 */
        wx.getSetting({
            success(res) {
                /* 授权配置不存在该权限 */
                if (!res.authSetting['scope.addPhoneContact']) {
                    /* 如果不存在  先进行弹出框授权 */
                    wx.authorize({
                        scope: 'scope.addPhoneContact',
                        success() {
                            /* 授权成功之后  */
                            //添加手机通讯录联系人。
                            //用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方    
                            式,写入手机系统通讯录
                            wx.addPhoneContact({
                                firstName: '名字',  //必填项
                                success(res){}
                                  
                            })
                        }
                    })
                } else {
                    /* 已经授权完毕可以直接进行下一步 */
                    //添加手机通讯录联系人。
                    //用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方式,写入手                
                    机系统通讯录
                    wx.addPhoneContact({
                       firstName: '名字',  //必填项
                       success(res){}       
                    })
                }        
            }
        })
}
        7.添加到日历(真实场景不常用,方法和 6一样)
        8.微信运动获取个人信息下一篇讲到
四、注意事项
        1.授权有效期

        一旦用户明确同意或拒绝过授权,其授权关系会记录在后台,直到用户主动删除小程序。

        2.使用时机

        在真正需要使用授权接口时,才向用户发起授权申请,并在授权申请中说明清楚要使用该功能的理由。

      文章来源地址https://www.toymoban.com/news/detail-796776.html

到了这里,关于一篇搞明白微信小程序的基本授权功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在微信小程序中生成二维码:一个最简单的案例就让你明白

    使用weapp.qrcode.js 在 微信小程序 中,快速生成二维码     下载weapp-qrcode代码 然后 将 dist 目录下的weapp.qrcode.esm.js 复制到项目目录中(这里是utils目录下) 1、小程序wxml文件 创建 canvas,并定义好 width, height, canvasId 2、小程序js代码 非常简单的案例,onLoad函数直接生成二维码 运

    2024年02月12日
    浏览(31)
  • UNIAPP---实现微信小程序登录授权和手机号授权(uniapp做微信小程序)

    描述:uniapp开发小程序,先授权用户信息后再出现手机号授权的页面进行手机号授权。完成后返回上一页面并把信息存入后台以及前台缓存中,方便使用。 1.在uniapp的manifest.json进行微信小程序配置 2.封装request请求api.js(如果已封装可跳过) 3.封装微信授权登录以及获取手机

    2024年02月11日
    浏览(32)
  • 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能

    微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面判断是否登录了。 第一种方式: 第二种方式:

    2024年02月11日
    浏览(29)
  • 微信小程序-微信授权登录

    小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系 触发授权登录 : 用户在小程序中触发登录操作,通常通过点击登录按钮或执行相关操作。 授权弹窗 : 小程序弹出授权登录的弹窗,要求用户授权小程序访问其微信账

    2024年02月08日
    浏览(36)
  • 【微信授权登录】uniapp开发小程序,实现微信授权登录功能 & 退出登录

    微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面判断是否登录了。 第一种方式: 第二种方式:

    2024年02月03日
    浏览(41)
  • 微信小程序授权登录

    登录流程时序 说明: 1.小程序端调用  wx.login()  获取临时登录凭证code ,并回传到开发者服务器。 2.服务器调用  code2Session  接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。 之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互

    2024年02月07日
    浏览(49)
  • 微信小程序——授权登录

    在微信小程序中,授权登录通常是指用户允许小程序获取其微信用户信息(如昵称、头像等)的过程。以下是微信小程序授权登录的基本步骤以及相关API的使用: 步骤一:获取用户授权 在小程序中,你需要创建一个按钮或其他用户触发的UI元素,以触发授权登录操作。 创建

    2024年02月04日
    浏览(38)
  • 微信小程序授权流程

    小程序中的部分接口,比如地理位置、录音、摄像头、用户信息等,需要用户授权后,才可以调用。把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。 此类接口调用时: 如果用户未接受或拒绝

    2024年02月09日
    浏览(32)
  • 微信小程序之微信授权登入及授权的流程讲解

    目录 一、流程讲解 1. 图解 2. 讲解 二、官方登入 wxLogin wx.getUserProfile 代码 三、数据交互授权登入 1. 前端 2. 后端代码 这张图片是关于微信小程序授权登录的流程图。流程图展示了使用微信官方提供的登录能力来获取用户身份标识的过程。下面是对流程图中的一些关键步骤的

    2024年02月05日
    浏览(33)
  • 微信小程序授权登录流程

    我是IT果果日记,微信公众号请搜索 IT果果日记 一个普通的技术宅,定期分享技术文章,欢迎点赞、关注和转发,请多关照。 首先, 我们要了解什么是微信小程序登录?它的作用是什么? 微信小程序登录是为了让开发者的服务器获取用户的openId以及session_key的令牌。 请不要

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包