快捷導(dǎo)航

微信小程序用戶授權(quán)彈窗拒絕時(shí)引導(dǎo)用戶重新授權(quán)實(shí)現(xiàn)

更新時(shí)間：2019年07月29日 16:48:17 作者：編程小石頭

我們?cè)陂_(kāi)發(fā)小程序時(shí)，如果想獲取用戶信息，就需要獲取用的授權(quán)，如果用戶誤點(diǎn)了拒絕授權(quán)，我們?cè)趺礃尤フ_的引導(dǎo)用戶重新授權(quán)呢。今天就來(lái)給大家講講如果正確的引導(dǎo)用戶授權(quán),需要的朋友可以參考下

前言

我們?cè)陂_(kāi)發(fā)小程序時(shí)，如果想獲取用戶信息，就需要獲取用的授權(quán)，如果用戶誤點(diǎn)了拒絕授權(quán)，我們?cè)趺礃尤フ_的引導(dǎo)用戶重新授權(quán)呢。今天就來(lái)給大家講講如果正確的引導(dǎo)用戶授權(quán)。

老規(guī)矩，先看效果圖

從上圖可以看出，我們?cè)谟脩酎c(diǎn)擊拒絕授權(quán)時(shí)，我們會(huì)彈出一個(gè)提示框，提示用戶去設(shè)置頁(yè)重新授權(quán)，當(dāng)用戶去授權(quán)頁(yè)重新授權(quán)以后，我們?cè)倩氐绞醉?yè)，點(diǎn)擊獲取用戶信息時(shí)，就可以成功的獲取到用戶信息了。
如下圖藍(lán)色框里，就是我們成功的獲取的用戶信息。

一，我們獲取用戶信息的時(shí)候需要用戶授權(quán)

我們點(diǎn)擊獲取用戶信息時(shí)，通常會(huì)彈出如下提示框，如果用戶點(diǎn)擊了取消，就再也沒(méi)有辦法通過(guò)點(diǎn)擊授權(quán)按鈕獲取用戶信息了。

所以接下來(lái)我們要做的就是在用戶拒絕了授權(quán)時(shí)，引導(dǎo)用戶去設(shè)置頁(yè)重新授權(quán)。
把獲取用戶授權(quán)的代碼先貼給大家

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授權(quán)獲取頭像昵稱 </button>

二，檢測(cè)用戶是否授權(quán)

我們?cè)谟脩酎c(diǎn)擊了上面定義的button按鈕后，做權(quán)限檢測(cè)。代碼如下。

 getUserInfo: function(e) {
  let that = this;
  // console.log(e)
  // 獲取用戶信息
  wx.getSetting({
   success(res) {
    // console.log("res", res)
    if (res.authSetting['scope.userInfo']) {
     console.log("已授權(quán)=====")
     // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
     wx.getUserInfo({
      success(res) {
       console.log("獲取用戶信息成功", res)
       that.setData({
        name: res.userInfo.nickName
       })
      },
      fail(res) {
       console.log("獲取用戶信息失敗", res)
      }
     })
    } else {
     console.log("未授權(quán)=====")
     that.showSettingToast("請(qǐng)授權(quán)")
    }
   }
  })
 },

給大家簡(jiǎn)單解析下。

wx.getSetting ：用來(lái)獲取用戶授權(quán)列表

if (res.authSetting['scope.userInfo']) 代碼用戶授權(quán)成功，如果用戶沒(méi)有授權(quán)，就代表授權(quán)失敗。

在授權(quán)失敗時(shí)，我們調(diào)用that.showSettingToast()方法

三，showSettingToast方法如下

 // 打開(kāi)權(quán)限設(shè)置頁(yè)提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設(shè)置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 }

這方法做的就是引導(dǎo)用戶去設(shè)置頁(yè)。

四，我們的設(shè)置頁(yè)

我們的設(shè)置頁(yè)其實(shí)很簡(jiǎn)單，只有上圖這么一段代碼。

五，去系統(tǒng)設(shè)置頁(yè)

我們上面第四步的button按鈕，點(diǎn)擊以后，就會(huì)去系統(tǒng)設(shè)置頁(yè)。

可以看到系統(tǒng)設(shè)置頁(yè)，有一個(gè)開(kāi)關(guān)，當(dāng)用戶點(diǎn)擊開(kāi)關(guān)時(shí)，就可以重新授權(quán)啦。

重新授權(quán)成功以后，我們回到首頁(yè)，就可以成功的獲取到用戶信息了。

到這里我們就成功的實(shí)現(xiàn)了引導(dǎo)用戶授權(quán)的功能了。

把index.wxml和index.js代碼貼出來(lái)給大家

index.wxml

<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授權(quán)獲取頭像昵稱 </button>
<text>{{name}}</text>

index.js

//index.js
Page({
 getUserInfo: function(e) {
  let that = this;
  // console.log(e)
  // 獲取用戶信息
  wx.getSetting({
   success(res) {
    // console.log("res", res)
    if (res.authSetting['scope.userInfo']) {
     console.log("已授權(quán)=====")
     // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
     wx.getUserInfo({
      success(res) {
       console.log("獲取用戶信息成功", res)
       that.setData({
        name: res.userInfo.nickName
       })
      },
      fail(res) {
       console.log("獲取用戶信息失敗", res)
      }
     })
    } else {
     console.log("未授權(quán)=====")
     that.showSettingToast("請(qǐng)授權(quán)")
    }
   }
  })
 },

 // 打開(kāi)權(quán)限設(shè)置頁(yè)提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去設(shè)置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
})

有任何關(guān)于小程序的問(wèn)題可以加我微信：2501902696（備注小程序）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: