微信小程序授權(quán)登錄基本是小程序的標(biāo)配了，但是官方的demo，取消授權(quán)后，就不能再重新點(diǎn)擊登錄，除非重新加載小程序才可以，這下怎么辦？

我們可以先在首頁引導(dǎo)用戶點(diǎn)擊，然后跳轉(zhuǎn)到一個(gè)新的頁面，在新的頁面進(jìn)行授權(quán)，然后新的頁面授權(quán)成功，立馬跳回首頁，顯示用戶信息。

話不多說，直接上代碼

代碼結(jié)構(gòu)：

index是首頁
login是授權(quán)頁

首頁代碼

index.wxml

<!-- 未授權(quán)，只顯示一個(gè)授權(quán)按鈕 -->
<view wx:if="{{result==false}}">
  <button bindtap="getinfo" class="loginbtn"> 授權(quán)登錄 </button>
</view>

<!-- 授權(quán)后只顯示頭像和昵稱 -->
<view elif="{{result==true}}" class="info">
  <image src="{{head}}" class="headimg"></image>
  <text class="nickname">{{name}}</text>
</view>

index.wxss

/**index.wxss**/
.loginbtn{
  width: 150px;
  height: 45px;
  background: #06C05F;
  margin:100px auto 0;
  line-height: 45px;
  font-size: 15px;
  color: #fff;
}

.info{
  width: 80px;
  height: 100px;
  margin:50px auto 0;
}

.info .headimg{
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

.info .nickname{
  text-align: center;
}

index.js

//index.js
Page({
  data: {
    userInfo: {},
    hasUserInfo: false
  },

  //事件處理函數(shù)
  getinfo: function () {
    wx.navigateTo({
      url: '../login/index'
    })
  },

  onLoad: function (e) {
    let that = this;
    // 獲取用戶信息
    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,
                head: res.userInfo.avatarUrl,
                result: true
              })
            },
            fail(res) {
              console.log("獲取用戶信息失敗", res)
              that.setData({
                result: "取消授權(quán)"
              })
            }
          })
        } else {
          console.log("未授權(quán)")
          that.setData({
            result: false
          })
        }
      }
    })
  }
})

授權(quán)頁代碼

index.wxml

<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授權(quán)獲取用戶信息 </button>

index.js

//index.js
Page({
  data: {
    userInfo: {},
    hasUserInfo: false
  },

  getUserInfo: function (e) {
    let that = this;
    // 獲取用戶信息
    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,
                head: res.userInfo.avatarUrl
              })
              wx.reLaunch({
                url: '../index/index'
              })
            },
            fail(res) {
              console.log("獲取用戶信息失敗", res)
            }
          })
        } else {
          console.log("未授權(quán)=====")
        }
      }
    })
  }
})

不懂可以咨詢我

WeChat:face6009
Web:http:likeyunba.com
Date:2019-10-17
Author:TANKING

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.jstctz.cn/25236.html