获取上一步url_Wordpress+uni-app开发菜谱软件：第二讲文章列表上-CSDN博客

前言

昨天我们说了关于图片获取来实现轮播图，大家如果仔细看可以发现，返回的json数据中有文章标题及title(啊，我哪看得清，看得清也不知道title是标题啊)。这个并不重要，重要的是其实现的原理都是一样的。话不多说，看看今天做出来的效果如何，我的教程只针对小白，而且是一步步来实现。所以你看到图片缩放问题和美化等都不是问题所在。

这篇文章能让你学会什么？

本篇文章会简单的介绍一下api接口的编写(如果我们直接利用Wordpress rest api也许会方便很多，但是我们是要明白这个原理所以自己写的api)、ColorUI的引用以及文章视图设计。从这三个方面我们可以模仿出生活中常见的app是如何展示文章的，对于文章的下拉加载更多和上拉刷新我们会在下篇文章介绍，大家可以持续关注我。

正文开始

API接口的简单编写：我们在上一篇文章中介绍了轮播图的图片接口，那里只是放了代码并没有分析。现在我们要写文章列表的API接口，并对其简单介绍分析。我注释写了很多，可以认真看看。

<?php // 接口名：首页文章列表// 可传参数：page(页数)header('Access-Control-Allow-Headers:*'); //引入WP加载文件，引入之后就可以使用WP的所有函数 require( '../wp-load.php' );// 这里为了方便后期的下拉加载更多，我们可以定义一个页码参数$page=@$_GET['$page'];//定义返回数组，默认先为空$data=[];// 使用wp的查询文章函数查询最新文章列表// 1、定义查询条件$args = array( 'post_type'=>'post',  //查询文章类型'post_status'=>'publish', //查询文章状态'posts_per_page'=>6,  //一页显示6篇文章'paged'=>$page,  //第几页，默认为1'orderby'=>'date',  //按照时间排序'order'=>'DESC');//获取文章作者头像urlfunction get_user_avatar_url(){//获取文章用户id$user_id=get_the_author_meta('ID');//获取用户头像url$user_gravatar_url = 'https://www.goware.cn/wp-content/uploads/ultimatemember/'.$user_id.'/profile_photo-190x190.png';return $user_gravatar_url;};// 2、开始查询文章query_posts($args);if (have_posts()){ //如果查询出来了文章// 定义接收文章数据的数组$posts=[];// 循环文章数据while ( have_posts() ) : the_post();// 获取文章id$post_id=get_the_ID();// 定义单条文章所需要的数据$list=["id"=>$post_id,  //文章id"avatar_user"=>get_user_avatar_url(),"title"=>get_the_title(), //文章标题"excerpt"=>_get_excerpt(),"img"=>get_the_post_thumbnail_url(),//文章缩略图];// 将每一条数据分别添加进$postsarray_push($posts,$list);endwhile;// 定义返回值$data['code']=200;$data['msg']="查询数据成功！";$data['post']=$posts;$data['args']=$args;}else {// 如果没有文章$data['code']=404;$data['msg']="没有相关文章";$data['post']=[];}// 输入json数据格式print_r(json_encode($data));?>

我相信一部分小白还是不太容易看的懂的，对于其中的_get_excert()、get_the_title()等并不知道具体的函数在什么地方写了。其实在代码一开始引入WP加载文件，引入之后就可以使用WP的所有函数。所以如果你想开发更多接口功能可以查查WP的函数或者也可以自己在接口页面或者function.php中去写。但实际我们的目的就是依靠wordpress的强大的后台来为我们app做后端的吗？并且是以一种十分简单的模式去让小白明白。

这里插一句就是很多人觉得原生的可能更好，或者学习java的看不起学习php的。但是我个人认为编程的入门不久后需要的不是多么难的项目或者是把一门语言研究的十分透彻，而是培养自己的编程爱好以及做程序/项目的自信心。简单的框架和少量的代码设计不仅可以减少bug，还能让小白找回自信心。

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

对于上面这步是在uni-app中写的请求这个接口，同时要在default中写如下内容：

return {  homePosts:[],//教程 uni-app:渲染app的首页文章数据第一步:定义一个值来接收文章列表}},onLoad() {this.getHomePosts();//使页面一加载的时候就获取文章列表},

请求的json数据

这个流程和轮播图的几乎一模一样，我们获取之后需要对文章进行绑定渲染。方法和昨日也相同，但是如果你请求了url地址，然后通过拆分URL更改其中变量获取变化地址，那样传递过来会被异常解析而无法正常显示。因此我使用了函数最后输出这个变量就解决了这个问题，特别说明wp中没有直接获取文章用户头像的url地址，我们在后期出教程单独说WP的各种API使用和编写。

colorUI库使用：看到这里我觉得你可能是有点蒙的，好像我们没有设置什么样式怎么会这么好看呢？对于文章的样式还可以有很多，下面也是其中一种。对于学习uni-app开发的我猜没人会不知道colorUI的存在吧。因此我浅谈一下这个开挂一般的存在是如何引入或者被你使用的。

第一步：去colorui官网下载colorui压缩包，解压后把下图中的文件复制出来，粘贴到你的项目目录下。(不去下在hbuilder中新建项目也可以看到colorUI的模版)

第二步：把colorUI中的colorui目录下所有文件复制到你的项目中，在app.vue引入css:

@import "colorui/main.css";@import "colorui/icon.css";

第三步：在main.js引入cu-custom组件

import cuCustom from 'colorui/components/cu-custom.vue'Vue.config.productionTip = false

这时候你就可以找到你想要的样式，使用就可以了。

文章视图的结构：

{{item.title}} {{item.excerpt}}正义天使史诗

这里使用的是colorUI的结构，我们可以看到其中包含title-文章标题、img-文章缩略图、text-content及文章简介和各类标签等。方便简化各位看我没有加入作者信息、标签以及发布时间等，下一章我会继续介绍并添加这个功能。

总结

未来的时代设计软件可能已经不是程序员的专利了，很多新型的框架出现似乎都让设计变得如此简单。我们出的专题就是想让小白甚至不会编程的人能够搭建一个网站+app这样的框架出来实现自己的一些想法。但过程也并不可能那么的简单，尤其对于新手来说，你是需要不断的去百度去搜索各种名词的意义和作用。这对入学者来说可能就不是那么简单了。

但是千里之行始于足下，每一个成功的背后都是不断日益积累的结果。我相信关注我的粉丝也一定会跟随我的文章作出属于自己的一款app，网站的设计较为简单，我们会在app框架搭建完出一期网站的教程提供给大家学习。最后欢迎大家关注我：企校锦囊，我将持续为大家讲解uni-app和wordpress的各种问题以及设计方案