前言

Wordpress是世界上最大的部落格類框架，理論上你可以用它實現任何功能（略有一些誇張），而uni-app也是剛火的可以生成ios端、小程式、安卓等一種手機app開發框架。接下來的文章我會寫一系列的教程搭建一個完整的app，大概的頁面大多使用原型工具構建/在構建中，這裡放一個首頁外觀。

今天第一部分我們通過輪播圖就來實現這個首頁的圖片獲取！

你需要知道哪些問題第一步我們可以看出首頁的整體佈局：搜尋框+各類標題+圖示按鈕+文章推薦，我們會在其他頁面設計輪播圖，如果你們感興趣也可以將各類標題換成輪播圖（我試了不是很美觀）底部狀態列的問題：這裡的底部狀態列並非我們想要設計的狀態列，實際開發之中我們設計的為首頁+菜譜分類+菜友圈+個人中心的形式。重點說明：如果你是小白，完全不懂程式設計的話我建議你先簡單的入門PHP、html和js，如果你是大神的話我想這片文章就是在班門弄斧了。我寫這文章的意義是結合自己學習經歷給那些同樣還在摸索的一些朋友一點意見和思考方式，因此可能會存在不足。外觀樣式引入colorUI庫修改，你們也可以使用其他的，但是我個人覺得其更nice正文開始為什麼要寫Wordpress介面：在這裡你可能會不太明白，為什麼要寫介面。其實我們開發的app資料都是儲存在Wordpress的網站之中（那為什麼要儲存在網站中呢？），準確的說是儲存在網站所在的伺服器之中。因為wp有著太多的功能以及優秀的主題，完全可以簡單的設計後就實現使用者的註冊、文章的修改撰寫、圖片的儲存以及其他檔案的儲存（別問我圖片資源不在oss中，我說的是一部分特殊圖片）。 關於伺服器的相關問題可以持續關注，我會寫一些文章說明現在小企業或者一些初創科技公司是如何進行線上app運營原理。使用hbuilder設計輪播圖：我們使用的開發工具是hbuilder(不知道這是什麼的可以去下載，還是很強大)，新建->專案->uni-app專案，然後會看到這個目錄結構。

利用Wordpress編寫API：我們實現的是一個簡單的原理，對於文章作者、時間、頭像等獲取原理近乎相同，為了簡化流程我們使用輪播圖獲取wp網站中置頂文章的特色圖片。（啊，如果你還不知道怎麼置頂文章和設定特色圖片？這個很簡單，用心找一下就能發現）我先放程式碼，如果你不想看可以直接複製過去，但是記得修改require（''）中的路徑（這個根據你放置介面的位置）。

<?phpheader('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));?>

在uni-app中請求介面：app想要與服務端進行互動，就需要向服務端的介面發起請求，在uni-app中是用uni.request的方法來發起請求的。在寫的時候注意頁面生命週期，unload、onshow這類的，更多頁面生命週期函式可以檢視官方文件。

<script>\texport default {\t\t//此處為該頁面需要用到的資料，在專案邏輯中可以對這些資料進行改變\t\tdata() {\t\t\treturn {\t\t\t\thomeSlide: [], //教程uni-app渲染幻燈片資料第一步：定義值接收幻燈片資料\t\t\t}\t\t},\t\tonLoad() {\t\t\t//教程uni-app渲染幻燈片資料第三步：執行方法getHomeSlide（）\t\t\tthis.getHomeSlideFunc();\t\t},\t\t//此處為自定義方法\t\tmethods: {\t\t\t//教程uni-app渲染幻燈片資料第二步：定義獲取幻燈片資料的方法getHomeSlide（）\t\t\tgetHomeSlideFunc() {\t\t\t\tvar _self = this;\t\t\t\t// 用uniapp的request發起請求\t\t\t\tuni.request({\t\t\t\t\turl: '幻燈片介面地址http://127.0.0.1/vhost/conf/img_echo.php?w=640&h=568&src=https://www.goware.cn/api/homeSlide.php',//介面地址\t\t\t\t\tsuccess: (res) => {\t\t\t\t\t\t// 請求成功之後將幻燈片資料賦值給homeSlide\t\t\t\t\t\t_self.homeSlide=res.data.post;\t\t\t\t\t}\t\t\t\t});\t\t\t}\t\t}\t}</script>

使用v-for渲染資料：最後，我們在檢視程式碼中將資料渲染出來，這裡用到uni的指令：v-for（這裡需要強調的一點你可以直接訪問你的API所在網站的地址，可以看到有沒有獲取到json資料）如下第一個圖所示。具體的渲染程式碼如下：（一個簡單的結構以及缺少css樣式設計，你可以引用第三方colorUI庫設計）