1. 程式人生 > >使用者授權時被拒絕的解決辦法(授權失敗場景處理)

使用者授權時被拒絕的解決辦法(授權失敗場景處理)

因為當下在做的小程式功能必須獲取使用者資訊才能操作,所以在index頁面就彈使用者授權了,此處參考了【這篇文章】。文章中提到一點開小程式就彈使用者授權多少會對使用者造成一定的心裡壓力,所以大家還是按照自己的需要來。如果有不一樣的思路歡迎交流 :)

1.被拒絕之後…

首先在首頁拒絕了授權之後呢,會拉起一個模態彈窗,這點和上邊那篇文章中一樣的。
app.js中改寫一下getUserInfo這個函式

getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof
cb == "function" && cb(this.globalData.userInfo) }else{ //呼叫登入介面 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) }, fail: function
(){
wx.showModal({ title: '使用者未授權', content: '如需正常使用小程式功能,請按確定並且在【我的】頁面中點選授權按鈕,勾選使用者資訊並點選確定。', showCancel: false, success: function (res) { if (res.confirm) { console.log('使用者點選確定') } } }) } }) } }) } }

如果使用者拒絕了授權,則會彈出:
這裡寫圖片描述

2. 引導使用者到授權按鈕

上步中已經提到,需要使用者到另一個tab中再點選一個按鈕,為什麼要這麼設定呢。主要是因為單單靠使用者點選右上角來設定這個授權有那麼一些麻煩,因為需要經以下這些步驟:

  • 使用者點選右上角【…】
  • 關於XXX(小程式的名稱)
  • 再點選右上角【…】
  • 選擇設定
  • 開啟使用者資訊

……一看到就已經想手動再見了
所以我選擇在【我的】這個tab中新增一個使用者未授權時才能看到的button,點選了這個神奇的button,就能再次選擇是否授權。
這個button暫時長這樣:
這裡寫圖片描述
先別急著吐槽按鈕醜,看碼:
我在這個頁面中首先加了一個叫做noAuthorized的變數,它的預設值是true,代表【是的,就是沒授權咋地了?】

給這個按鈕繫結的事件:

tapToAuthorize: function(){
    //再授權
    wx.openSetting({
      success: (res) => {
        /*
         * res.authSetting = {
         *   "scope.userInfo": true,
         *   "scope.userLocation": true
         * }
         */
         //因為openSetting會返回使用者當前設定,所以通過res.authSetting["scope.userInfo"]來判斷使用者是否勾選了【使用者資訊】這一項
        if (res.authSetting["scope.userInfo"]===true){
          var that = this
          app.getUserInfo(function (userInfo) {
            //更新資料
            that.setData({
              userInfo: userInfo,
              noAuthorized: false
            })
          })
        }
        else{
          wx.showModal({
            title: '使用者未授權',
            content: '如需正常使用小程式,請點選授權按鈕,勾選使用者資訊並點選確定。',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('使用者點選確定')
              }
            }
          })
        }
      }
    })
  }

如此前提到的文中所說,小程式提供了wx.openSetting(OBJECT)和wx.getSetting(OBJECT),前者可以調起客戶端小程式設定介面,返回使用者設定的操作結果,後者可以獲取使用者當前設定。由於此處已經呼叫了openSetting可以返回操作結果進行判斷,所以第二個就用不上了。

效果如下:

  1. 點選授權按鈕後,先彈出:
    這裡寫圖片描述

  2. 如果勾選了使用者資訊並點選了確定,則setdata後頁面重新整理,按鈕消失,顯示使用者頭像暱稱等資訊。

  3. 如果沒有勾選又點選了確定,則再次彈出模態彈窗,提示授權的重要性:
    這裡寫圖片描述

完成撒花

3.總結

總覺得一直在用比較暴力的手法讓使用者授權是不太好的一件事情,但是確實由於產品定位的原因,缺少了使用者的資訊什麼功能都用不了,才無奈出此下策。
不過今天也是學到了很多有關小程式的button還有setting相關的一些東西,很開星。
也希望各位看官有美好的一天嗷,大家一起學習進步 XD~