uni-app渲染用户中心数据

本教程为《用WordPress与uni-app开发,包含所有源代码》系列教程之一。

说明

在上一小节中我们实现了uni登录token和用户中心的存储，在本小节中我将带领大家用后台返回的这些数据实现一个简单用户中心。

开始

页面布局

首先我们打开user.vue文件：

在页面布局块中布局代码如下：

<template>
	<view class="userPage">
		<view class="userHeader">
			<text class="userName">用户名</text>
			<view class="userInfo">
				<text class="regdate">注册时间</text>.
				<text class="email">邮箱</text>
			</view>
		</view>
	</view>
</template>

css：

<style>
	.userHeader {
	    background: #fff;
		padding: 30rpx;
	}
	.userHeader .userName{
		color: #795647;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	.userHeader .userInfo{
		margin-top: 20rpx;
		font-size: 12rpx;
	}
</style>

总结构如图：

在浏览器中打开，如下：

渲染数据

首先我们在js的代码块中定义一个数据变量：

之后我们改写一个我们判断token存在的代码，加一个获取用户数据并且传值给变量的代码：

//uni生命周期函数，页面显示就执行，这意味着如果一打开这个页面，如果没登录将永远跳转到登录页面
	onShow() {
		/****************************************************用户是否登录代码开始:https://www.clearnull.com/963.html*****/
		var the = this;
		//uni获取本地数据API
		uni.getStorage({
			key: 'token', //数据key值，也就是你存储数据时的名称
			success: function(res) {
				//数据成功获取，用户已登录，此刻我们再获取用户信息
				uni.getStorage({
					key: 'user', 
					success: function(res) {
						//数据成功获取
						the.userData = res.data;
					},
					fail: function(res) {
						//数据未获取成功，等同于用户没有登录，这里我们直接跳转到登录页面
						uni.navigateTo({
							url: '../login/login',
						});
					}
				});
			},
			fail: function(res) {
				//数据未获取成功，用户没有登录，这里我们直接跳转到登录页面
				uni.navigateTo({
					url: '../login/login',
				});
			}
		});
		/*************************************用户是否登录代码结束**********************/

最后在模板中渲染：

<template>
	<view class="userPage">
		<view class="userHeader">
			<text class="userName">{{userData.user_name}}</text>
			<view class="userInfo">
				<text class="regdate">注册时间：{{userData.user_registered}}</text> | 
				<text class="email">邮箱：{{userData.user_email}}</text>
			</view>
		</view>
	</view>
</template>

运行效果如下：