微信小程式授權登入
阿新 • • 發佈:2021-10-25
網址:
https://article.itxueyuan.com/DamA20
一、建立頁面load
建立頁面load
二、需求說明
登入之前,【我的】頭像和文字顯示為預設顯示。微信授權登入成功之後,【我的】頭像和文字分別獲取微信頭像和微信名字。
三、程式碼實現(微信授權登入頁面)
1、load.wxml
1 <view class="loadType"> 2 <button type="primary" bindtap="loadByWechat">微信授權登入</button> 3 <button type="primary" plain="true" bindtap="loadByPhone">手機號碼登入</button> 4 <button type="primary" plain="true" bindtap="loadByAccount">賬號密碼登入</button> 5 </view>
2、load.wxss
1 .loadType{ 2 margin-top: 800rpx; 3 } 4 button{ 5 margin-top: 20rpx; 6 }
3、load.js
- 微信授權登入獲取使用者資訊(wx.getUserProfile函式)
- 攜帶使用者登入頭像和名字跳轉到tab頁面(wx.reLaunch函式)
- 將獲取的使用者資訊儲存到快取中(wx.setStorageSync函式)
1 Page({ 2 3 //微信授權登入 4 loadByWechat(){ 5 wx.getUserProfile({ 6 desc: '使用者完善會員資料', 7 }) 8 .then(res=>{ 9 console.log("使用者允許了微信授權登入",res.userInfo); 10 //注意:此時不能使用 wx.switchTab,不支援引數傳遞 11 wx.reLaunch({ 12 //將微信頭像和微信名稱傳遞給【我的】頁面 13 url: '/pages/me/me?nickName='+res.userInfo.nickName+'&avatarUrl='+res.userInfo.avatarUrl, 14 }) 15 //儲存使用者登入資訊到快取 16 wx.setStorageSync('userInfo', res.userInfo) 17 }) 18 .catch(err=>{ 19 console.log("使用者拒絕了微信授權登入",err); 20 }) 21 }, 22 23 //跳轉到手機號碼登入頁 24 loadByPhone(){ 25 wx.navigateTo({ 26 url: '/pages/loadByPhone/loadByPhone', 27 }) 28 }, 29 30 //跳轉到賬號密碼登入頁 31 loadByAccount(){ 32 wx.navigateTo({ 33 url: '/pages/loadByAccount/loadByAccount', 34 }) 35 }, 36 37 })
四、程式碼實現(我的頁面)
1、me.wxml
1 <!--未登入--> 2 <view class="load" wx:if="{{!loginOk}}"> 3 <image src="../../images/我的.png" bindtap="load"></image> 4 <text class="clickload" bindtap="load">點選登入</text> 5 </view> 6 <!--已登入--> 7 <view wx:else> 8 <view class="load" > 9 <image src="{{avatarUrl}}" ></image> 10 <text class="clickload" >{{nickName}}</text> 11 </view> 12 <button class="exit" bindtap="exit" type="primary">退出登入</button> 13 </view>
2、me.wxss
1 .load{ 2 background-color:#04BE02; 3 width: 100%; 4 height: 400rpx; 5 /*設定圖片和文字垂直居中對齊*/ 6 display: flex; 7 flex-direction: column; 8 justify-content: center; 9 align-items: center; 10 } 11 12 .load image{ 13 width: 200rpx; 14 height: 200rpx; 15 border-radius: 50%; 16 } 17 .load text{ 18 color:white; 19 } 20 .exit{ 21 width: 95%; 22 margin-top: 40rpx; 23 }
3、me.js
- onLoad:頁面載入的時候,獲取load頁面傳過來的微信頭像和微信名字
- onShow:根據快取資料,來控制已登入/未登入的頁面切換顯示
- 退出登入後,清空使用者資訊的快取資料
1 Page({ 2 3 /** 4 * 頁面的初始資料 5 */ 6 data: { 7 loginOk:true, 8 nickName:"", 9 avatarUrl:"", 10 }, 11 12 //頁面載入的時候,將load頁面傳過來的值獲取過來 13 onLoad: function (options) { 14 console.log("這裡的options",options); 15 this.setData({ 16 nickName:options.nickName, 17 avatarUrl:options.avatarUrl 18 }) 19 }, 20 21 //小程式宣告週期的可見性函式裡面來控制顯示 22 onShow(){ 23 let userInfo = wx.getStorageSync('userInfo') 24 console.log("我的快取資訊",userInfo); 25 if(userInfo){ 26 this.setData({ 27 loginOk:true, 28 nickName:userInfo.nickName, //從快取中拿資料 29 avatarUrl:userInfo.avatarUrl 30 }) 31 }else{ 32 this.setData({ 33 loginOk:false 34 }) 35 } 36 }, 37 38 //點選登入 39 load(){ 40 wx.navigateTo({ 41 url: '/pages/load/load', 42 }) 43 }, 44 45 //退出登入 46 exit(){ 47 wx.showModal({ 48 content:"確定退出嗎" 49 }).then(res=>{ 50 if(res.confirm){ 51 console.log("使用者點選了確定"); 52 this.setData({ 53 loginOk:false 54 }) 55 //清空登入的快取 56 wx.setStorageSync('userInfo', null) 57 }else if(res.cancel){ 58 console.log("使用者點選了取消"); 59 } 60 }) 61 }, 62 63 })