昨天我们说了关于图片获取来实现轮播图，大家如果仔细看可以发现，返回的json数据中有文章标题及title(啊，我哪看得清，看得清也不知道title是标题啊)。这个并不重要，重要的是其实现的原理都是一样的。话不多说，看看今天做出来的效果如何，我的教程只针对小白，而且是一步步来实现。所以你看到图片缩放问题和美化等都不是问题所在。
本篇文章会简单的介绍一下api接口的编写(如果我们直接利用Wordpress rest api也许会方便很多，但是我们是要明白这个原理所以自己写的api)、ColorUI的引用以及文章视图设计。从这三个方面我们可以模仿出生活中常见的app是如何展示文章的，对于文章的下拉加载更多和上拉刷新我们会在下篇文章介绍，大家可以持续关注我。
- API接口的简单编写：我们在上一篇文章中介绍了轮播图的图片接口，那里只是放了代码并没有分析。现在我们要写文章列表的API接口，并对其简单介绍分析。我注释写了很多，可以认真看看。
我相信一部分小白还是不太容易看的懂的，对于其中的_get_excert()、get_the_title()等并不知道具体的函数在什么地方写了。其实在代码一开始引入WP加载文件，引入之后就可以使用WP的所有函数。所以如果你想开发更多接口功能可以查查WP的函数或者也可以自己在接口页面或者function.php中去写。但实际我们的目的就是依靠wordpress的强大的后台来为我们app做后端的吗？并且是以一种十分简单的模式去让小白明白。
这里插一句就是很多人觉得原生的可能更好，或者学习java的看不起学习php的。但是我个人认为编程的入门不久后需要的不是多么难的项目或者是把一门语言研究的十分透彻，而是培养自己的编程爱好以及做程序/项目的自信心。简单的框架和少量的代码设计不仅可以减少bug，还能让小白找回自信心。
对于上面这步是在uni-app中写的请求这个接口，同时要在default中写如下内容：
这个流程和轮播图的几乎一模一样，我们获取之后需要对文章进行绑定渲染。方法和昨日也相同，但是如果你请求了url地址，然后通过拆分URL更改其中变量获取变化地址，那样传递过来会被异常解析而无法正常显示。因此我使用了函数最后输出这个变量就解决了这个问题，特别说明wp中没有直接获取文章用户头像的url地址，我们在后期出教程单独说WP的各种API使用和编写。
- colorUI库使用：看到这里我觉得你可能是有点蒙的，好像我们没有设置什么样式怎么会这么好看呢？对于文章的样式还可以有很多，下面也是其中一种。对于学习uni-app开发的我猜没人会不知道colorUI的存在吧。因此我浅谈一下这个开挂一般的存在是如何引入或者被你使用的。
- 第一步：去colorui官网下载colorui压缩包，解压后把下图中的文件复制出来，粘贴到你的项目目录下。(不去下在hbuilder中新建项目也可以看到colorUI的模版)
- 第二步：把colorUI中的colorui目录下所有文件复制到你的项目中，在app.vue引入css:
- 第三步：在main.js引入cu-custom组件
这时候你就可以找到你想要的样式，使用就可以了。
- 文章视图的结构：
这里使用的是colorUI的结构，我们可以看到其中包含title-文章标题、img-文章缩略图、text-content及文章简介和各类标签等。方便简化各位看我没有加入作者信息、标签以及发布时间等，下一章我会继续介绍并添加这个功能。
未来的时代设计软件可能已经不是程序员的专利了，很多新型的框架出现似乎都让设计变得如此简单。我们出的专题就是想让小白甚至不会编程的人能够搭建一个网站+app这样的框架出来实现自己的一些想法。但过程也并不可能那么的简单，尤其对于新手来说，你是需要不断的去百度去搜索各种名词的意义和作用。这对入学者来说可能就不是那么简单了。