个人中心页面实现

（补充前面的取消按钮逻辑）

个人中心用户信息动态显示实现

index.wxml

<view class="user_info"><!-- 用户背景信息开始 --><view class="user_info_bg"><view class="user_info_wrap"><image class="user_icon" src="{{userInfo.avatarUrl}}"></image><view class="user_name">{{userInfo.nickName}}</view></view></view><!-- 用户背景信息结束 --><!-- 用户操作菜单开始 --><view class="user_menu"></view><!-- 用户操作菜单结束 --></view>

index.less

page{background-color: #F6F6F4;
}.user_info{.user_info_bg{position: relative;height: 40vh;background-color: var(--themeColor);.user_info_wrap{position: relative;top: 30%;text-align: center;.user_icon{width: 150rpx;height: 150rpx;border-radius: 50%;}.user_name{color: #fff;}}}
}

index.js

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 判断缓存中是否有tokenconst token=wx.getStorageSync('token');if(!token){wx.showModal({title:'友情提示',content:'微信授权登录后，才可进入个人中心',success:(res)=>{Promise.all([getWxLogin(),getUserProfile()]).then((res)=>{console.log(res[0].code)console.log(res[1].userInfo.nickName,res[1].userInfo.avatarUrl)let loginParam={code:res[0].code,nickName:res[1].userInfo.nickName,avatarUrl:res[1].userInfo.avatarUrl}console.log(loginParam)// 把用户信息放到缓存中wx.setStorageSync('userInfo', res[1].userInfo);this.wxlogin(loginParam);this.setData({userInfo:res[1].userInfo})})}})}else{console.log("token存在"+token);const userInfo=wx.getStorageSync('userInfo');this.setData({userInfo})}},/*** 请求后端获取用户token* @param {} loginParam */async wxlogin(loginParam){// 发送请求 获取用户的tokenconst result=await requestUtil({url:"/user/wxlogin",data:loginParam,method:"post"});let token=result.token;if(result.code==0){// 存储token到缓存wx.setStorageSync('token', token);}},