入門微信小程序(含實戰) [第八篇]實現完整的相冊列表邏輯（小程序端&服務器端）

這一章要進行的東西還蠻多的，從小程序navigator到wx.request，再到後臺的restful進行數據集的通信，先後臺一塊兒實戰，和老沙一塊兒作一個全棧工程師吧。

一個一個來吧，先說需求。

需求：
每一個寶寶都有不少相冊，本身的、和父母的、和粉絲的、和各類奇葩物體的。這些不一樣的相冊將照片按照場景分開，就像商品和分類的概念同樣，每一個相冊有本身的名字及生成時間，一個照片只能屬於一個相冊。

固然後期相冊還會和「去哪兒」頻道進行結合。

在小程序的位置見下圖

點擊後進入到相冊

開始準備

數據表的結構以下：

album相冊表

photo相冊視頻表

在photo中有個字段type是多態的，當type=1表明圖片，type=2表明視頻。photo中有個外鍵就是album_id表明此圖片/視頻所屬的相冊。

小提醒：在實際開發中北哥推薦使用migrate來維護你的數據表結構，用法能夠參考《90個小時》原創視頻進階篇 第1節&第2節。

準備模型

數據表建完後咱們經過yii2的gii工具分別創建了Album和Photo模型，經過這些模型能夠和數據表數據進行交互。

模型

創建第一個restful接口

小程序的相冊列表頁面須要獲得相冊名字、內含照片數量而且相冊按照更新時間進行降序排序。

咱們先來構造符合前臺需求的restful風格的接口。

經過對上一篇的學習老沙知道首先要urlManager中的路由，以下圖

alt

而後創建這個路由對應的restful風格的控制器，重點是要繼承於ActiveController

alt

如上圖所寫，只須要繼承於ActiveController而且制定一個modelClass便可，到此刻位置一個restful就創建成功了，咱們嘗試先給數據庫的album填寫一些數據後訪問接口 GET xgh.nai8.me/xcx/albums 看看效果

alt

老沙泯然一笑，很成功。

可是這仍然不是我想要的結果，我須要的結果是

• 編號id
• 名字name
• 更新時間（格式化爲0000-00-00 00:00:00）
• 相冊內照片數量

也就是說我須要讓後臺去掉幾個字段並增長几個字段。，固然這並不難，老沙同窗以前就玩過。

去掉字段 也就是字段的篩選，咱們能夠在GET /xcx/albums的時候傳遞一個fields，註明咱們須要的字段，在這裏就是GET /xcx/albums?fields=id,name

果真返回了id和name

事業成功一半了，接下來咱們還須要更新時間和相冊內照片數量，首先說這兩個字段在數據表中根本不存在，那麼對於此類問題須要如何解決那？

好解決，yii2已經提供瞭解決方案，就是expand

expand的視頻教學能夠在PHP原創視頻內學到。

咱們來實際操做下expand的用法

首先爲接口增長 expand項 GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal

而後回到咱們的模型Album，重載extraFields函數

alt

固然咱們還須要去實現formatUpdateTime和photoTotal，以下圖在模型Album中增長兩個函數便可

alt

接下來訪問接口 GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal 試試

alt

完美解決。

小程序端

如今後臺已經準備完畢，老沙須要佈局小程序，效果圖以下

alt

頁面並不複雜，我從後臺獲取數據後在小程序的視圖上進行一個遍歷便可。

我創建了一個list Page。

別告訴我這個你不會

獲取後臺數據

微信小程序已經提供了一個和後臺進行通信的方法wx.request，這個和jquery的$.getJSON有點像，我在page頁面首先創建了一個var app = getApp() 以確保我可使用app的一些數據。

同時在onReady函數裏實現了後臺拉數據

alt

你是否看到了不少影子，好比fields、expand、url、method等等，相信你能夠理解。

看看結果（url爲我本地開發的域名）

alt

當返回成功後咱們能夠在其success內使用這些數據，如今數據返回了，咱們要如何使用它們那？？？

data
小程序的每一個xxx.js裏都有一個data屬性，這個屬性裏的數據能夠直接被視圖wxml使用，咱們如今在data裏進行設置。

alt

而後對wx.request的success進行代碼編寫，以下

alt

要注意兩點：

• res.data表明你返回的數據，res中除了data還有其餘好比響應頭部信息等
• 當你要賦值data中的屬性時，請用setData，不要直接賦值。

到此刻爲止 咱們albums裏已經有數據了，接下來在視圖上進行循環。

小程序頁面數據渲染

還記得咱們 第三篇 學的知識麼，如今要用了。

此刻視圖已經知道了albums，遍歷它。

alt

咱們使用wx:for對albums數據進行遍歷，並設置每一個遍歷項名字爲wx:for-item="album"，固然出來的樣子很差看

alt

通常來講下一步要進行美化，這裏就不進行文字描寫，美化的詳細代碼我會傳到github上，你能夠將小程序代碼拉下來同步學習。

最後

本篇爲你講解了一個完成的小程序後臺獲取數據，yii2程序按照restful規範返回，小程序拿到數據後在視圖上進行渲染的全過程。

我知道你還有疑問，好比

• 拿的是全部數據麼？
• yii2的接口如何分頁？
• 小程序如何分頁？

這的確是一個大問題，別急，下一篇我將爲你講解 小程序和yii2結合實現完美的下拉加載和上拉刷新功能，作一個更好的相冊列表頁。