前言：

使用開發(fā)工具：小程序。在我這一篇已經詳細介紹了小程序的安裝介紹今天我給大家?guī)淼氖俏⑿诺囊绘I授權登錄，保存用戶信息，退出的功能?。?！希望看完了這篇博客能夠對你有幫助！?。?/p>

效果：

登錄獲取到用戶信息：

思路：點擊按鈕獲取到用戶信息（調用方法wx.getUserProfile）

遇到問題：頭像，昵稱顯示是初始化的狀態(tài)。

解決方法：將小程序的基礎庫版本調低。（版本問題）

  //獲取用戶信息
  getUserProfile() {
    wx.getUserProfile({
      desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
      success: (res) => {//類似javafx的em表達式
        console.log("獲取用戶信息成功", res);
        let user = res.userInfo;
        wx.setStorageSync('user', user); //保存用戶信息到本地緩存。相當于session
        this.setData({
          nickName: true,
          userInfo: user,
        })
      },
      fail: res => {
        console.log("獲取用戶信息失敗", res)
      }
    })
  }

保存用戶信息到緩存：

問題：如果我們每次進入頁面都讓用戶點擊授權，就有點太煩鎖了，其實可以在第一次授權成功獲取用戶信息的時候把數據緩存在本地緩存的。

解決方法：將獲取用戶信息設置保存（調用方法wx.setUserProfile設置用戶信息）

  // 保存緩存
  onShow(options) {
    console.log("保存緩存");
    this.getUserProfile();
    var user = wx.getStorageSync('user'); //從本地緩存去用戶信息
    if (user && user.nickName) { //如果本地緩存有信息就顯示本地緩存
      this.setData({
        nickName: true,
        userInfo: user,
      })
    }
  }

退出登錄：

思路：將獲取的用戶信息自己設置為空。

主要就是要調用方法（查看官方API文檔）

wx.getUserProfile獲取用戶信息 wx.setUserProfile設置用戶信息

wx.setStorageSync存數據到本地緩存 wx.getStorageSync取緩存數據

  // 退出
  loginOut(options) {
    this.setData({
      nickName: "",
      user: "",
    })
    // 賦予用戶信息為空
    wx.setStorageSync('user', null) //保存用戶信息到本地緩存。相當于session
    console.log("調用退出");
  }

index.wxml代碼：

<!-- html代碼 -->
<!--用戶授權了，就顯示頭像和昵稱-->
<view class="header" wx:if="{{nickName}}" bindtap='change'>
	<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
	<text class="userinfo-nickname">{{userInfo.nickName}}</text>
  <button type="default" bindtap="loginOut">退出登陸</button>
</view>
<!--如果用戶沒有授權，顯示登陸按鈕  -->
<view wx:if="{{!nickName}}" class="btn-login">
	<button type="primary" bindtap="getUserProfile">授權登陸</button>
</view>

index.wxss代碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-713011.html

page {
  /* 整個背景 */
  background: gainsboro;
}
.header {
  width: 100%;
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  align-items: center;
  background: white;
}
.btn-login {
  padding: 8%;
  background: white;
}
.userinfo-avatar {
  border-radius: 128rpx;
  width: 128rpx;
  height: 128rpx;
  margin-block-start: 10px;

}
.userinfo-nickname {
  margin-top: 20rpx;
  font-size: 38rpx;
}
}

到了這里，關于2023最新使用微信小程序完成一鍵授權登錄的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！