前言

Wordpress是世界上最大的博客类框架，理论上你可以用它实现任何功能（略有一些夸张），而uni-app也是刚火的可以生成ios端、小程序、安卓等一种手机app开发框架。接下来的文章我会写一系列的教程搭建一个完整的app，大概的页面大多使用原型工具构建/在构建中，这里放一个首页外观。

今天第一部分我们通过轮播图就来实现这个首页的图片获取！

你需要知道哪些问题

1. 第一步我们可以看出首页的整体布局：搜索框+各类标题+图标按钮+文章推荐，我们会在其他页面设计轮播图，如果你们感兴趣也可以将各类标题换成轮播图（我试了不是很美观）
2. 底部状态栏的问题：这里的底部状态栏并非我们想要设计的状态栏，实际开发之中我们设计的为首页+菜谱分类+菜友圈+个人中心的形式。
3. 重点说明：如果你是小白，完全不懂编程的话我建议你先简单的入门PHP、html和js，如果你是大神的话我想这片文章就是在班门弄斧了。我写这文章的意义是结合自己学习经历给那些同样还在摸索的一些朋友一点意见和思考方式，因此可能会存在不足。
4. 外观样式引入colorUI库修改，你们也可以使用其他的，但是我个人觉得其更nice

正文开始

1. 为什么要写Wordpress接口：在这里你可能会不太明白，为什么要写接口。其实我们开发的app数据都是存储在Wordpress的网站之中（那为什么要存储在网站中呢？），准确的说是存储在网站所在的服务器之中。因为wp有着太多的功能以及优秀的主题，完全可以简单的设计后就实现用户的注册、文章的修改撰写、图片的存储以及其他文件的存储（别问我图片资源不在oss中，我说的是一部分特殊图片）。 关于服务器的相关问题可以持续关注，我会写一些文章说明现在小企业或者一些初创科技公司是如何进行线上app运营原理。
2. 使用hbuilder设计轮播图：我们使用的开发工具是hbuilder(不知道这是什么的可以去下载，还是很强大)，新建->项目->uni-app项目，然后会看到这个目录结构。

3. 找到index.vue文件打开首先需要配置首页文件，这个比较简单不多解释。代码如下：

<code>{
\t"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
\t\t{
\t\t\t"path": "pages/index/index",//首页文件路径
\t\t\t"style": {
\t\t\t\t"navigationBarTitleText": "首页"//首页头部标题
\t\t\t}
\t\t}
\t],
\t"globalStyle": {
\t\t"navigationBarTextStyle": "white",//导航栏标题颜色（仅支持 black/white）
\t\t"navigationBarTitleText": "WPApp",//导航栏默认标题
\t\t"navigationBarBackgroundColor": "#000000;",//导航栏背景颜色，此处为黑色
\t\t"backgroundColor": "#F8F8F8"//页面背景颜色
\t}
}/<code>

4. 依次打开目录pages>index>index.vue，而在index.vue中创建项目的时候已经有一部分代码了，这部分代码对于我们来说没什么用，所以我们先删除这些原有的代码。在首页（index.vue）添加幻灯片，我们这里需要用到uni-app官方的组件swiper，运行结果如下：

5. 利用Wordpress编写API：我们实现的是一个简单的原理，对于文章作者、时间、头像等获取原理近乎相同，为了简化流程我们使用轮播图获取wp网站中置顶文章的特色图片。（啊，如果你还不知道怎么置顶文章和设置特色图片？这个很简单，用心找一下就能发现）我先放代码，如果你不想看可以直接复制过去，但是记得修改require（''）中的路径（这个根据你放置接口的位置）。

<code>header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
//引入WP加载文件，引入之后就可以使用WP的所有函数 
require( '../wp-load.php' );//这里需要根据你自己的相对位置修改路径地址
 
//定义返回数组，默认先为空
$data=[];
 
// 使用wp的查询文章函数查询出三篇幻灯片文章
// 1、定义查询条件
$args = array( 
\t'post_type'=>'post',  //查询文章类型
\t'post_status'=>'publish', //查询文章状态
\t'post__in' => get_option('sticky_posts'),//确定调用的是置顶文章列表
\t'caller_get_posts' => 1 

);
// 2、开始查询文章
query_posts($args);
if (have_posts()){ //如果查询出来了文章
\t// 定义接收文章数据的数组
\t$posts=[];
\t// 循环文章数据
\twhile ( have_posts() ) : the_post();
\t\t// 获取文章id
\t\t$post_id=get_the_ID();
\t\t// 定义单条文章所需要的数据
\t\t$list=[
\t\t\t"id"=>$post_id,  //文章id
\t\t\t"title"=>get_the_title(), //文章标题
\t\t\t"img"=>get_the_post_thumbnail_url() //文章缩略图
\t\t];
\t\t// 将每一条数据分别添加进$posts
\t\tarray_push($posts,$list);
\tendwhile;
\t// 定义返回值
\t$data['code']=200;
\t$data['msg']="查询数据成功！";
\t$data['post']=$posts;
}else {
\t// 如果没有文章
\t$data['code']=404;
\t$data['msg']="没有相关文章";
\t$data['post']=[];
}
// 输入json数据格式
print_r(json_encode($data));
?>/<code>

6. 在uni-app中请求接口：app想要与服务端进行交互，就需要向服务端的接口发起请求，在uni-app中是用uni.request的方法来发起请求的。在写的时候注意页面生命周期，unload、onshow这类的，更多页面生命周期函数可以查看官方文档。

<code>/<code>

7. 使用v-for渲染数据：最后，我们在视图代码中将数据渲染出来，这里用到uni的指令：v-for（这里需要强调的一点你可以直接访问你的API所在网站的地址，可以看到有没有获取到json数据）如下第一个图所示。具体的渲染代码如下：（一个简单的结构以及缺少css样式设计，你可以引用第三方colorUI库设计）

<code><template>
\t<view>
\t\t<view>
\t\t\t<view>
\t\t\t\t<view>
\t\t\t\t\t
\t\t\t\t\t
\t\t\t\t\t<swiper>\t\t\t\t\tindicator-dots="indicatorDots" 
\t\t\t\t\tautoplay="autoplay" 
\t\t\t\t\tinterval="interval" 
\t\t\t\t\tduration="duration"
\t\t\t\t\t>
\t\t\t\t\t
\t\t\t\t\t\t<swiper-item>
\t\t\t\t\t\t\t\t\t\t
\t\t\t\t\t\t\t<image>
\t\t\t\t\t\t/<swiper-item>
\t\t\t\t\t/<swiper>
\t\t\t\t/<view>
\t\t\t/<view>
\t\t/<view>
\t/<view>
/<template>/<code>

8. 最后步骤：你也可以微调一下样式得到你的网站并形成轮播图，代码如下：

<code>/<code>

结语：这里的内容十分简单，后期想要继续学习的可以关注我，我会免费把这个教程写下去分享给大家。下期出整个首页的框架设计以及实现底部导航栏。

閱讀更多 企校錦囊 的文章

關鍵字: 软件 H 安卓