首先是未登录时的界面，提示用户登录之后使用全部的功能。
用户点击登录，调用API拿到用户的信息并在页面中显示出来，同时将用户的信息保存在本地。向后端发送POST请求，拿到code，拿到token，并保存在本地，登录之后隐藏未登录的界面，显示登录后的界面。
点击退出登录之后，重置一些数据，隐藏登陆后的界面，显示未登录时的界面
WXML
<view class="backGround"></view>
<!-- 未登录时的页面 -->
<block wx:if="{{hiddenBlean1}}"><view class="container-out"><view class="faceOut"></view><view class="textout"><view class="word1"><text>未登录</text></view><view class="word2"><text>请点击登陆后使用全部功能</text></view></view></view><button bindtap="getUersProfile" class="btn">登录</button>
</block>
<!-- 登陆后的页面 -->
<block wx:if="{{hiddenBlean2}}">
<!-- 头像，用户名，招呼 --><view class="container-in"><image src="{{avatarUrl}}" class="touxiang"></image><view class="wenZi"><view class="word3">{{nickName}}</view><view class="word4">Hi</view></view></view><view class="loginOut" bindtap="loginOut"><button>退出登录</button></view>
</block>WXSS
page {background-color: #ededed;
}.backGround {width: 100%;height: 490rpx;background-color: #2b4b6b;border-radius: 0 0 25rpx 25rpx;overflow: hidden;
}.btn {width: 400rpx;height: 100rpx;margin-top: 200rpx;border-radius: 20rpx;box-shadow: 1rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, .2);background-color: #05c160;color: white;font-size: large;
}.btn:active {background-color: teal;
}.container-out {display: flex;align-items: center;margin:-100rpx auto;width: 650rpx;height: 250rpx;box-shadow: 1rpx 1rpx 19rpx 1rpx rgba(0, 0, 0, .03);border-radius: 20rpx;background-color: rgb(255, 255, 255);
}.faceOut {display: inline-block;width: 210rpx;height: 210rpx;margin-left: 20rpx;border-radius: 20rpx;background-color: rgb(235, 230, 230);
}.textout {display: inline-block;margin-left: 20rpx;width: 360rpx;height: 210rpx;/* background-color: salmon; */
}.word1 {margin-left: 20rpx;font-size: 50rpx;
}.word2 {margin-top: 20rpx;margin-left: 20rpx;font-size: 25rpx;
}.container-in {display: flex;margin:-100rpx auto;margin-bottom: 0;width: 650rpx;height: 250rpx;box-shadow: 1rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, .02); border-radius: 20rpx;background-color: rgb(255, 255, 255);
}.touxiang {display: inline-block;width: 210rpx;height: 210rpx;margin-top: 20rpx;margin-left: 20rpx;border-radius: 100rpx;border: 1rpx solidrgb(124, 121, 121)k;
}.wenZi {display: inline-block;width: 300rpx;height: 210rpx;margin-top: 20rpx;/* background-color: aqua; */margin-left: 20rpx;
}.word3 {font-size: 40rpx;margin-left: 20rpx;margin-top: 50rpx;
}.word4 {font-size: 25rpx;color: gray;line-height: 35rpx;margin-left: 20rpx;margin-top: 10rpx;
}.loginOut {margin-top: 100rpx;
}JSON
{"usingComponents": {},"navigationStyle":"custom","navigationBarTextStyle":"black","backgroundColor": "#000000"
}JS
Page({data: {hiddenBlean1:true,hiddenBlean2:false,userInfo:'',//用户信息nickName:'',//用户姓名avatarUrl:'',//用户头像地址m:0,//用户的登录状态},
//退出登录loginOut() {this.setData({userInfo:'',hiddenBlean1:true,hiddenBlean2:false,m:0})wx.request({url: '',method:'POST',header: {'Content-Type':'application/json'},success:res=> {console.log(res)}})wx.setStorageSync('user', null),wx.showToast({title: '已退出登录',})},//获取用户信息getUersProfile:function() {if(this.data.m==0) {wx.getUserProfile({desc: '登陆后使用全部功能',success:(res)=> {let user = res.userInfoconsole.log('获取成功',res)wx.setStorage({data: res.userInfo,key:'userInfo', });wx.login({//获取code向后端发送并请求tokensuccess(res) {console.log(res.code)let code = res.code wx.request({url: '' + res.code,method:'POST',header: {'Content-Type':'application/json'}, success:res=>{console.log(res)console.log(res.data.data.token)wx.setStorageSync('token', res.data.data.token)}})}}); console.log('用户信息',res.userInfo),console.log(res.userInfo.nickName),this.setData({m:1,nickName : res.userInfo.nickName,avatarUrl: res.userInfo.avatarUrl,hiddenBlean2:true,hiddenBlean1:false})wx.showToast({title: '登陆成功',})wx.hideToast()this.onShow();},fail:(res)=> {console.log('授权失败',res)}})}else {wx.showToast({title: '您已经登录了',})}
}
})效果
