小程序受权

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【小程序受权】

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....

用户拒绝受权CSDN：https://blog.csdn.net/qq_2818...

8.更多讨论
一、小程序如何实现双向绑定
能够先定义data，而后利用this.setData来更改data值，好比绑定到一个变量上，当变量更改，data也随着更改，实现双向绑定

二、小程序受权后可以实现的功能
好比获取当前位置信息来定位滴滴打车司机与顾客间的位置，或者是请求发票抬头，来快速生成电子发票。还能够利用微信运动步数来实现健康监控。

三、请求受权能够绑定在那些标签上
理论上均可以绑定，但最好是绑定在button上，比较直观，且方便重复点击。

 

“咱们相信人人均可以成为一个工程师，如今开始，找个师兄，带你入门，学习的路上再也不迷茫。

这里是技能树.IT修真院：http://www.jnshu.com，初学者转行到互联网行业的汇集地。"

欢迎加IT交流群565734203与你们一块儿讨论交流