WordPress开发

uni-app渲染用户中心数据

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

全功能WordPress API接口工具已出

全功能WordPress API接口工具已出只为前端开发者的你设计,详情查看:Sliver Rest Wp api:全功能的WordPress api工具

说明

在上一小节中我们实现了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>

运行效果如下:

QQ交流群: 824144151

此为本站官方星球,加入此星球可以获得以下专属权利:

  1. 得到官方任何WordPress方面的问题解答(包括WordPress建站疑问、WordPress使用问题、WordPress主题或插件bug)
  2. 可以随意下载以及更新官方发布的插件、主题(如有特别说明除外)
  3. 可以得到官方人员的免费技术援助(包括但不仅限于:WordPress、UNI、IONIC、React Native 、flutter、建站)
  4. 可以查看所有官方插件、主题的使用文档
  5. 可以得到官方插件、模板的免费技术援助
  6. 免费查看官网推出的所有教程并得到技术援助
  7. 免费得到WordPress建站建议、优化建议(大数据,大存储,高并发)
  8. 更多权利待添加……

评论已经被关闭。

插入图片

推荐文章

  1. 抱歉,没有找到文章!

WordPressApp来了

快速让你的网站变成一个APP,不需要任何技术,点此查看