低成本0基礎打造app之首頁文章列表（一）

引言

本教程為

教你怎麼用WordPress開發一個屬於你自己的app（小程序）系列教程之一。

前面我們已經開發出了一個完整的首頁幻燈片（低成本0基礎打造app之渲染首頁幻燈片數據），接下來我們開始開發首頁文章列表。

開始

首先還是前端ui的製作，先看看簡易設計圖：

模板代碼（在index.vue文件中）：

	 
			
				
					
					
						文章標題
					
				
				
					
					
						文章標題
					
				
				
					
					
						文章標題
					
				
			

css代碼：

	/* 教程《用uni-app製作首頁文章列表》首頁文章列表css代碼 */
	.indexList uni-image {
 width: 100%;
 height: 130px;
 background: #eaeaea;
	}
	.indexList {
 margin-bottom: 15px;
	}
	.indexList .title {
 background: #000;
 color: #fff;
 font-size: 16px;
 line-height: 37px;
 padding: 0 10px;
	margin-top: -5px;
}

瀏覽器中打開：

結束

好了，用uni製作首頁文章列表就完了，醜是醜了點，但將就看吧，哈哈！

在下一小節中我將講解如何用WordPress開發首頁文章列表的接口。

訪問以下鏈接你可以得到代碼倉庫：
https://www.inacorner.top/388.html