当前位置：首页 > news >正文

(十一)、用户中心页面【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

news 2025/9/17 0:13:46

1,个人中心页面

1.1 新建个人中心页面

在这里插入图片描述

1.2 纯净版个人中心页面代码：

<template><view class="user"><view class="top"><view class="group"><view class="userinfo"><!-- 顶部 左侧 头像 --><view class="pic"><image src="../../static/images/user-default.jpg" mode="aspectFill"></image></view><!-- 顶部 左侧 昵称和时间 已登录 --><view class="text" v-if="true"><view class="nickname">匿名</view><view class="year"><uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>注册</view></view><!-- 顶部 左侧 昵称和时间 未登录 --><view class="text" v-else><view class="nickname">点击登录</view></view></view><!-- 顶部 右侧右箭头 --><view class="more"><text class="iconfont icon-a-10-you"></text></view></view><!-- 顶部 背景图 --><view class="bg"><image src="../../static/images/user-default.jpg" mode="aspectFill"></image></view></view><view class="main"><view class="info"><view class="item"><text>33</text>获赞</view><view class="item"><text>11</text>评论</view><view class="item"><text>5</text>发文</view></view><view class="list"><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">我的长文</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-106-xihuan"></text><text class="text">我的点赞</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-21-xiugai"></text><text class="text">评论过的</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-32-wenjian"></text><text class="text">关于</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view></view></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">.user {.top {height: 300rpx;background: #bbb;padding: 0 30rpx;padding-top: var(--status-bar-height);position: relative;display: flex;align-items: center;.group {position: relative;z-index: 10;display: flex;align-items: center;justify-content: space-between;width: 100%;color: #fff;.userinfo {display: flex;width: 100%;align-items: center;.pic {width: 120rpx;height: 120rpx;border-radius: 50%;overflow: hidden;border: 2px solid #fff;image {width: 100%;height: 100%;}}.text {padding-left: 20rpx;.nickname {font-size: 44rpx;font-weight: 600;}.year {font-size: 26rpx;opacity: 0.6;padding-top: 5rpx;}}}.more {.iconfont {font-size: 40rpx;}}}.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;image {width: 100%;height: 100%;filter: blur(20px);transform: scale(2);opacity: 0.5;}}}.main {width: 100%;min-height: 200rpx;background: #fff;border-radius: 30rpx;transform: translateY(-30rpx);padding: 30rpx 0;.info {padding: 10rpx 30rpx;display: flex;font-size: 30rpx;.item {padding-right: 20rpx;color: #888;text {font-weight: 600;color: #333;}}}.list {.group {padding: 15rpx 30rpx;border-bottom: 15rpx solid #f4f4f4;.item {display: flex;justify-content: space-between;align-items: center;padding: 25rpx 0;font-size: 36rpx;color: #555;border-bottom: 1rpx solid #f8f8f8;.left {display: flex;align-items: center;.iconfont {font-size: 38rpx;margin-right: 10rpx;}}.right {.iconfont {font-size: 26rpx;}}}.item:last-child {border: none;}}.group:last-child {border: none;}}}}
</style>

1.3 页面效果

在这里插入图片描述

2,使用uni-id-pages中的vuex状态管理

2.1 self页面中，script中引入store.js：

store.js位置：
在这里插入图片描述

  import {store,mutations} from '@/uni_modules/uni-id-pages/common/store.js'

在计算属性中定义两个方法（在当前页面拿到store中的登录用户信息和登录状态）：

    computed: {userInfo() {return store.userInfo},hasLogin() {return store.hasLogin}},

测试一下，在onload中打印输出：

    onLoad() {console.log(this.userInfo)console.log(this.hasLogin)}

结果：
在这里插入图片描述

2.2 渲染顶部self页面

          <!-- 顶部 左侧 头像 --><view class="pic"><image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"mode="aspectFill"></image><image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image></view><!-- 顶部 左侧 昵称和时间 已登录 --><view class="text" v-if="hasLogin"><view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view><view class="year"><uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>注册</view></view>

3,个人中心页面中的退出功能

3.1 修改一下store.js中的logout方法

三目运算符–修改点击退出是跳转的url页面地址
store.js

	async logout() {// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败，不能阻塞客户端if(uniCloud.getCurrentUserInfo().tokenExpired > Date.now()){try{await uniIdCo.logout()}catch(e){console.error(e);}}uni.removeStorageSync('uni_id_token');uni.setStorageSync('uni_id_token_expired', 0)uni.redirectTo({url: `/${pagesJson.uniIdRouter?.loginPage ?? 'pages/self/self'}`, //uni_modules/uni-id-pages/pages/login/login-withoutpwd});uni.$emit('uni-id-pages-logout')this.setUserInfo({},{cover:true})},

3.2 self个人中心页面中使用退出方法

      //退出登录logout() {if (this.goLoginPage()) return;uni.showModal({title: "是否确认退出?",success: res => {console.log(res);if (res.confirm) {mutations.logout()}}})},//判断是否登录的方法goLoginPage() {if (!this.hasLogin) {uni.showToast({title: "未登录",icon: "none"})return true;}return false}

4,uniidrouter路由配置限制用户登录

uniIdRouter自动路由参考链接

4.1 在pages.json中配置

  "uniIdRouter": {"loginPage": "uni_modules/uni-id-pages/pages/login/login-withpwd", // 登录页面路径"needLogin": ["pages/edit/edit", // 需要登录才可访问的页面列表，可以使用正则语法"uni_modules/uni-id-pages/pages/userinfo/userinfo"],"resToLogin": true // 自动解析云对象及clientDB的错误码，如果是客户端token不正确或token过期则自动跳转配置的登录页面，配置为false则关闭此行为，默认true}

4.2 跳转到个人资料页面

个人资料页面位置：/uni_modules/uni-id-pages/pages/userinfo/userinfo
修改页面：

<view class="group" @click="toUserInfo">

点击跳转方法：

      //跳转到编辑个人资料toUserInfo() {if (this.hasLogin) {uni.navigateTo({url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'})} else {let route = this.$mp.page.route;uni.navigateTo({url: '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=/' + route})}},

如果没有登录，就跳转到登录页面，如果登录了，点击跳转到个人资料页面。
个人资料页面：
在这里插入图片描述

4.3 设置头像区域背景

      <!-- 顶部 背景图 --><view class="bg"><image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"mode="aspectFill"></image><image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image></view>