小程序受權

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

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

【小程序受權】

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與你們一塊兒討論交流