【JS-task11】

小程序的授权机制

小课堂

分享人：杨星

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

说到这，我们需要先了解一下微信小程序是啥？简单说，它就是一个可以实现之前只能是原生态APP可以实现的效果和功能。比如说，一些酷炫的页面与转场，一些可以直接和手机硬件交互的功能，录音啊，拍视频啊，调用手机的重力感应啊，GPS啊等等。

从目前来讲，APP比手机网页好，手机网页比电脑网页好。手机网页在电脑上看起来还行，但需要我们输入网址域名，这在电脑上还好操作，在手机上，简单是让人抓狂。

虽然APP在体验上非常突出，但需要安装，需要消耗流量，占用手机有限的桌面空间。这种麻烦程序，甚至超出了APP的优势本身。

从这里就能看出微信小程序的好处了
1，不用安装，即开即用，用完就走。省流量，省安装时间，不占用桌面；
2，体验上虽然没法完全媲美原生APP，但综合考虑还是更优；
3，对于小程序拥有者来说，开发成本更低，他们可以更多财力，人力，精力放在如何运营好产品，做好内容本身；
4，对于用户来说，相较于各种APP，微信小程序UI和操作流程会更统一。这也会降低用户的使用难度；
5，对于小程序拥有者来说，相较于原生APP，推广更容易更简单，更省成本。

2.知识剖析

2.1 授权

部分接口需要获得用户授权同意后才能调用。此类接口调用时：

如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
如果用户已授权，可以直接调用接口；
如果用户已拒绝授权，则短期内不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

获取授权信息

开发者可以使用 wx.getSetting 获取用户当前的授权状态。

wx.getSetting(OBJECT)获取用户的当前设置。
注：返回值中只会出现小程序已经向用户请求过的权限。

Object 参数说明：
success Function 不是必要 接口调用成功的回调函数，返回内容详见返回参数说明。
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

authSetting Object 用户授权结果，其中 key 为 scope 值，value 为 Bool 值，表示用户是否允许授权，详见 scope 列表

                        
wx.getSetting({
  success: (res) => {
    /*
     * res.authSetting = {
     *   "scope.userInfo": true,
     *   "scope.userLocation": true
     * }
     */
  }
})
2.2 scope表
这里介绍8种：用户信息、地理位置、通讯地址、发票抬头、微信运动步数、录音功能、保存到相册、摄像头

用户信息

scope: scope.userInfo
对应接口 wx.getUserInfo

地理位置

scope:scope.userLocation
对应接口wx.getLocation, wx.chooseLocation

通讯地址

scope: scope.address
对应接口wx.chooseAddress

发票抬头

scope:scope.invoiceTitle
对应接口wx.chooseInvoiceTitle

微信运动步数

scope:scope.werun
对应接口wx.getWeRunData

录音功能

scope:scope.record
对应接口 wx.startRecord

保存到相册

scope.writePhotosAlbum
wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum

摄像头

scope.camera

3.常见问题

如果用户拒绝授权该怎么办？

4.解决方案

                
fail:function(){
        wx.showModal({
          title: '警告',
          content: '你点击了拒绝授权将无法显示你的位置信息，点击确定重新获取授权。',
          success: function(res){
            if(res.confirm) {
              wx.openSetting({
                success:(res) => {
                  if (res.authSetting["scope.userLocation"]){
                    wx.getLocation({
                      success: function(res) {
                        that.setData({
                          position: res
                        })
                      },
                    })
                  }
                }
              })
            }
          }
        })
      }

当用户拒绝授权时，弹出模态框来引导用户进入设置授权页面

5.编码实战

6.拓展思考

可以在什么地方安置获取授权的按钮？

比如在直播小程序中，可以设置当用户发表评论时，获取用户的头像信息和名称，然后调用发表。

7.参考文献

微信公共平台——授权：https://developers.weixin.qq.com/miniprogram/dev/api/authorize-index.html

用户拒绝授权CSDN：https://blog.csdn.net/qq_28189091/article/details/75417073

8.更多讨论

感谢大家观看

BY : 黄诚翰|杨星