微信小程序?qū)崿F(xiàn)授權(quán)登錄之怎么獲取用戶信息

這篇文章主要講解了“微信小程序?qū)崿F(xiàn)授權(quán)登錄之怎么獲取用戶信息”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“微信小程序?qū)崿F(xiàn)授權(quán)登錄之怎么獲取用戶信息”吧！

小程序登錄

小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識，快速建立小程序內(nèi)的用戶體系。

登錄流程時序

效果展示：

功能實現(xiàn)：

新建一個login頁面

login.js：

wx.getUserProfile用于獲取用戶信息

wx.getStorageSync（）用于獲取緩存，進入小程序時調(diào)用

wx.setStorageSync（）用于保存緩存，保存登錄信息，下次進入小程序自動登錄

Page({
  data:{
    userInfo:'',
  
  },
  onLoad(){
     let user=wx.getStorageSync('user')
     this.setData({
       userInfo:user
     })
  },
  login(){
    
    console.log('點擊事件執(zhí)行了')
    wx.getUserProfile({
      desc: '必須授權(quán)才能使用',
      success:res=>{
        let user=res.userInfo
        wx.setStorageSync('user', user)
  console.log('成功',res)
  this.setData({
    userInfo:user
  })
  },
      fall:res=>{
        console.log('失敗',res)
      }
    })
  
  },
  nologin(){
   this.setData({
     userInfo:''
   })
   wx.setStorageSync('user', null)
  }
})

login.wxml:

<!--登錄-->
  <button  wx:if="{{!userInfo}}" bindtap="login">登錄</button>
  <view wx:else class="root">
    <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
    <text class="nicheng">{{userInfo.nickName}}</text>
  </view>
<!--退出登錄-->
<view  wx:if="{{userInfo}}">
        <button bindtap="nologin" >
            <text>退出登錄</text>
        </button>
</view>

login.wxss:

.touxiang {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  margin-left: 40%;
}
.nicheng{
  color:white;
}

json文件無需更改。

感謝各位的閱讀，以上就是“微信小程序?qū)崿F(xiàn)授權(quán)登錄之怎么獲取用戶信息”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對微信小程序?qū)崿F(xiàn)授權(quán)登錄之怎么獲取用戶信息這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！