WordPress开发

uni-app:渲染app的首页文章数据

引言

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

全功能WordPress API接口工具已出

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

前面我们已经分别用uni-app写出了首页文章列表和用WordPress写出了首页文章列表的接口,在这一节中我将讲解如何将首页文章列表渲染到app上面去。

准备工作

为了让app上面看起来有些数据,首先我们需要创建几篇文章,这里就不一一截图细讲了。这里我添加了四篇文章,加上最开始的三个幻灯片文章,这里共有七篇文章,如下:

此图像的alt属性为空;文件名为image-39.png

开始

、第一步还是先定义一个值来接收文章列表,代码如下:

data() {
			return {
				homeSlide: [] ,//教程uni-app渲染幻灯片数据第一步:定义值接收幻灯片数据
				homePosts:[],//教程 uni-app:渲染app的首页文章数据第一步:定义一个值来接收文章列表
			}
		},

二、第二步在methods结构中写一个方法获取首页文章列表接口,代码如下:

// 教程 uni-app:渲染app的首页文章数据第一步:定义方法获取首页文章列表接口getHomePosts()
			getHomePosts(){
        var _self = this;
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/indexList.php',//接口地址
					success: (res) => {
						// 请求成功之后将文章列表数据赋值给homePosts
						_self.homePosts=res.data.post;
					}
				});
			}

三、将该方法加入onLoad中,使页面一加载的时候就获取文章列表,代码如下:

onLoad() {
			//教程uni-app渲染幻灯片数据第三步:执行方法getHomeSlide()
			this.getHomeSlideFunc();
			//教程 uni-app:渲染app的首页文章数据第一步:将该方法加入onLoad中,使页面一加载的时候就获取文章列表
			this.getHomePosts();
		},

四、绑定渲染数据,代码如下:

<!-- 教程 uni-app:渲染app的首页文章数据第四步:绑定渲染数据 -->
				<view class="indexList" v-for="(item , index) in homePosts" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="title">
						{{item.title}}
					</view>
				</view>

整个index.vue代码如下:

<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<!-- 一组幻灯片代码开始,用到组件swiper -->
					<!-- indicator-dots autoplay interval……:组件相关属性,具体可以查看官网说明 -->
					<swiper class="swiper" 
					indicator-dots="indicatorDots" 
					autoplay="autoplay" 
					interval="interval" 
					duration="duration"
					>
					<!-- 教程uni-app渲染幻灯片数据第三步:渲染数据 -->
						<swiper-item v-for="(item , index) in homeSlide" :key="index">
							<!-- uni img组件 src绑定值为服务端返回的数据中的文章缩略图 -->			
							<image :src="item.img" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 教程《用uni-app制作首页文章列表》首页文章列表模板代码 -->
			<view class="page-section indexListBox">
				<!-- 教程 uni-app:渲染app的首页文章数据第四步:绑定渲染数据 -->
				<view class="indexList" v-for="(item , index) in homePosts" :key="index">
					<image :src="item.img" mode=""></image>
					<view class="title">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		//此处为该页面需要用到的数据,在项目逻辑中可以对这些数据进行改变
		data() {
			return {
				homeSlide: [] ,//教程uni-app渲染幻灯片数据第一步:定义值接收幻灯片数据
				homePosts:[],//教程 uni-app:渲染app的首页文章数据第一步:定义一个值来接收文章列表
			}
		},
		onLoad() {
			//教程uni-app渲染幻灯片数据第三步:执行方法getHomeSlide()
			this.getHomeSlideFunc();
			//教程 uni-app:渲染app的首页文章数据第一步:将该方法加入onLoad中,使页面一加载的时候就获取文章列表
			this.getHomePosts();
		},
		//此处为自定义方法
		methods: {
			//教程uni-app渲染幻灯片数据第二步:定义获取幻灯片数据的方法getHomeSlide()
			getHomeSlideFunc() {
				var _self = this;
				// 用uniapp的request发起请求
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',//接口地址
					success: (res) => {
						// 请求成功之后将幻灯片数据赋值给homeSlide
						_self.homeSlide=res.data.post;
					}
				});
			},
			// 教程 uni-app:渲染app的首页文章数据第一步:定义方法获取首页文章列表接口getHomePosts()
			getHomePosts(){
				var _self = this;
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/indexList.php',//接口地址
					success: (res) => {
						// 请求成功之后将文章列表数据赋值给homePosts
						_self.homePosts=res.data.post;
					}
				});
			}
		}
	}
</script>

<style>
	/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
	swiper-item {
		background-color: #f8f8f8;
	}
	/* 教程uni-app渲染幻灯片数据最后一步:美化 */
	swiper-item image{
		width: 100%;
	}
	/* 教程《用uni-app制作首页文章列表》首页文章列表css代码 */
	.indexList uni-image {
    width: 100%;
    height: 130px;
    background: #eaeaea;
	}
	.indexList {
    margin-bottom: 15px;
	}
	.indexList .title {
    background: #000;
    color: #fff;
    font-size: 16px;
    line-height: 37px;
    padding: 0 10px;
	margin-top: -5px;
}
   .indexListBox{
	   margin-top: 20px;
   }
</style>

最后在浏览器中打开,你会看到如下结果,样子是丑了点,将就着看吧。。。。

此图像的alt属性为空;文件名为image-40.png

结束

好了,首页文章列表功能就结束了,下一节中我们将用uni-app制作出底部tab。

代码仓库: https://github.com/sliverRing/uniApp-WPApp

用WordPress与uni-app开发,包含所有源代码 用WordPress与uni-app开发,包含所有源代码 引言 废话不多说这套系列的教程就是教你怎么将自己现有的WP网站做成一个app或者小程序 技术栈要求 需要声明的是,在这套教程之中,因为精力有限的关系,我不负责任何前端页面的设计以及开发,只讲前端... 2019-6-14 6368 0

QQ交流群: 824144151

技术援助

需要技术援助?点击这里,帮你解决你的所有问题!PS:可能你离大神之间,只差一个我们!!!!

发表评论

插入图片