WP二开

uni-app渲染发现界面

银戒 · 4月21日 · 2019年 · · · · 708次已读

开始

本教程为《教你用WordPress开发app(小程序)-包含所有源代码》系列教程之一。

本教程后续更新会放在:清空网络科技工作室官网

在前面我用uni框架做出了发现界面,并且用WordPress开发出了发现界面的接口,在本小节中我将讲解如何用uni-app渲染发现界面的数据。

开始

渲染流程和前面渲染首页文章列表的流程大体类似。

<script>标签内的data方法中定义接收返回值的几个数组:

data() {
			return {
				tagsData:[],//教程uni-app渲染发现界面第一步定义值接收标签数据
				catsData:[],//教程uni-app渲染发现界面第一步定义值接收分类数据
				postsData:[],//教程uni-app渲染发现界面第一步定义值接收文章数据
			};
		},

在methods结构体中定义请求方法:

methods: {
			//教程uni-app渲染发现界面第二步定义请求方法
			getFindData(){
				var _self = this;
				var findData = [];
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/find.php',//接口地址
					success: (res) => {
						// 请求成功之后将数据赋值给findData,然后通过findData分别将值传给初始定义的几个数组
						findData=res.data;
						_self.catsData = findData.cats;
						_self.postsData = findData.posts;
						_self.tagsData = findData.tags;
					}
				});
			}
			
		}

在onLoad中调用:

onLoad() {
			//教程uni-app渲染发现界面第三步将请求方法放入onLoad:
			this.getFindData();
		},

在html代码中渲染数据:

<template>
	<view>
		<!-- 教程uni-app渲染发现界面第四步:渲染分类数据 -->
		<view class="catItem page-section">
			<view class="catList" v-for="(item , index) in catsData" :key="index">
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 教程uni-app渲染发现界面第五步:渲染文章数据 -->
		<view class="page-section postBox">
			<view class="postList" v-for="(item , index) in postsData" :key="index">
				<image mode="widthFix" :src="item.img"></image>
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 教程uni-app渲染发现界面第六步:渲染文章数据 -->
		<view class="tagItem page-section">
			<view class="tagList" v-for="(item , index) in tagsData" :key="index">
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

保存,浏览器中打开,结果如下:

全代码如下:

<template>
	<view>
		<!-- 教程uni-app渲染发现界面第四步:渲染分类数据 -->
		<view class="catItem page-section">
			<view class="catList" v-for="(item , index) in catsData" :key="index">
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 教程uni-app渲染发现界面第五步:渲染文章数据 -->
		<view class="page-section postBox">
			<view class="postList" v-for="(item , index) in postsData" :key="index">
				<image mode="widthFix" :src="item.img"></image>
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 教程uni-app渲染发现界面第六步:渲染文章数据 -->
		<view class="tagItem page-section">
			<view class="tagList" v-for="(item , index) in tagsData" :key="index">
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagsData:[],//教程uni-app渲染发现界面第一步定义值接收标签数据
				catsData:[],//教程uni-app渲染发现界面第一步定义值接收分类数据
				postsData:[],//教程uni-app渲染发现界面第一步定义值接收文章数据
			};
		},
		onLoad() {
			//教程uni-app渲染发现界面第三步将请求方法放入onLoad:
			this.getFindData();
		},
		methods: {
			//教程uni-app渲染发现界面第二步定义请求方法
			getFindData(){
				var _self = this;
				var findData = [];
				uni.request({
					url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/find.php',//接口地址
					success: (res) => {
						// 请求成功之后将数据赋值给findData,然后通过findData分别将值传给初始定义的几个数组
						findData=res.data;
						_self.catsData = findData.cats;
						_self.postsData = findData.posts;
						_self.tagsData = findData.tags;
					}
				});
			}
			
		}
	}
</script>

<style>
.catItem,.tagItem {
    display: flex;
    flex-wrap: wrap;
}
.catList,.tagList {
    flex-grow: 1;
    width: calc(98% / 3);
    text-align: center;
    line-height: 2;
    background-color: #757575;
    color: #cecece;
}
.postBox uni-image {
    width: 100%;
    height: 10rem;
    background: #eaeaea;
	}
.postList .title {
	    background: #000;
	    color: #fff;
	    font-size: 16px;
	    line-height: 37px;
	    padding: 0 10px;
		margin-top: -5px;
	}
.postList{
	margin-bottom: 1rem;
}
.postList:last-child{ 
margin-bottom: 0rem;
}
</style>

结束

基本上还是没什么难点,就是一套流程,定义接受值->定义请求方法->调用方法->渲染数据。

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

高质量技术QQ交流群,在这里,你的所有问题都会有答案:824144151(因为群里的人提倡和呼吁高调做人,低调行事,所以群名叫做中级质量技术交流群)

2 条回应
  1. jackie2019-4-24 · 21:20

    获取分类的后端api没写出来啊

    • 银戒2019-5-2 · 11:13

      写了啊,你好好看看