這一章要進(jìn)行的東西還蠻多的，從小程序navigator到wx.request，再到后臺的restful進(jìn)行數據集的通訊，前后臺一起實(shí)戰，和老沙一起做一個(gè)全棧工程師吧。
一個(gè)一個(gè)來(lái)吧，先說(shuō)需求。
需求：
每個(gè)寶寶都有很多相冊，自己的、和父母的、和粉絲的、和各種奇葩物體的。這些不同的相冊將照片按照場(chǎng)景分開(kāi)，就像商品和分類(lèi)的概念一樣，每個(gè)相冊有自己的名字及生成時(shí)間，一個(gè)照片只能屬于一個(gè)相冊。
當然后期相冊還會(huì )和“去哪兒”頻道進(jìn)行結合。
在小程序的位置見(jiàn)下圖
開(kāi)始準備
數據表的結構如下：
在photo中有個(gè)字段type是多態(tài)的，當type=1代表圖片，type=2代表視頻。photo中有個(gè)外鍵就是album_id代表此圖片/視頻所屬的相冊。
小提醒：在實(shí)際開(kāi)發(fā)中北哥推薦使用migrate來(lái)維護你的數據表結構，用法可以參考《90個(gè)小時(shí)》原創(chuàng )視頻進(jìn)階篇 第1節&第2節。
準備模型
數據表建完后我們通過(guò)yii2的gii工具分別建立了Album和Photo模型，通過(guò)這些模型可以和數據表數據進(jìn)行交互。
建立先進(jìn)個(gè)restful接口
小程序的相冊列表頁(yè)面需要得到相冊名字、內含照片數量并且相冊按照更新時(shí)間進(jìn)行降序排序。
我們先來(lái)構造符合前臺需求的restful風(fēng)格的接口。
通過(guò)對上一篇的學(xué)習老沙知道首先要urlManager中的路由，如下圖
然后建立這個(gè)路由對應的restful風(fēng)格的控制器，重點(diǎn)是要繼承于A(yíng)ctiveController
如上圖所寫(xiě)，只需要繼承于A(yíng)ctiveController并且制定一個(gè)modelClass即可，到此刻位置一個(gè)restful就建立成功了，我們嘗試先給數據庫的album填寫(xiě)一些數據后訪(fǎng)問(wèn)接口 GET https://xgh.nai8.me/xcx/albums 看看效果
老沙泯然一笑，很成功。
但是這仍然不是我想要的結果，我需要的結果是
- 編號id
- 名字name
- 更新時(shí)間（格式化為0000-00-00 00:00:00）
- 相冊?xún)日掌瑪盗?/li>
也就是說(shuō)我需要讓后臺去掉幾個(gè)字段并增加幾個(gè)字段。，當然這并不難，老沙同學(xué)之前就玩過(guò)。
去掉字段也就是字段的篩選，我們可以在GET /xcx/albums的時(shí)候傳遞一個(gè)fields，注明我們需要的字段，在這里就是GET /xcx/albums?fields=id,name
事業(yè)成功一半了，接下來(lái)我們還需要 更新時(shí)間 和 相冊?xún)日掌瑪盗?/strong> ，首先說(shuō)這兩個(gè)字段在數據表中根本不存在，那么對于此類(lèi)問(wèn)題需要如何解決那？
好解決，yii2已經(jīng)提供了解決方案，就是expand
expand的視頻教學(xué)可以在PHP原創(chuàng )視頻內學(xué)到。
我們來(lái)實(shí)際操作下expand的用法
首先為接口增加 expand項 GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal
然后回到我們的模型Album，重載extraFields函數
當然我們還需要去實(shí)現formatUpdateTime和photoTotal，如下圖在模型Album中增加兩個(gè)函數即可
接下來(lái)訪(fǎng)問(wèn)接口 GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal 試試
完美解決。
小程序端
現在后臺已經(jīng)準備完畢，老沙需要布局小程序，效果圖如下
頁(yè)面并不復雜，我從后臺獲取數據后在小程序的視圖上進(jìn)行一個(gè)遍歷即可。
我建立了一個(gè)list Page。
獲取后臺數據
微信小程序已經(jīng)提供了一個(gè)和后臺進(jìn)行通訊的方法wx.request，這個(gè)和jquery的$.getJSON有點(diǎn)像，我在page頁(yè)面首先建立了一個(gè)var app = getApp() 以確保我可以使用app的一些數據。
同時(shí)在onReady函數里實(shí)現了后臺拉數據
你是否看到了很多影子，比如fields、expand、url、method等等，相信你可以理解。
看看結果（url為我本地開(kāi)發(fā)的域名）
當返回成功后我們可以在其success內使用這些數據，現在數據返回了，我們要如何使用它們那？？？
data
小程序的每個(gè)xxx.js里都有一個(gè)data屬性，這個(gè)屬性里的數據可以直接被視圖wxml使用，我們現在在data里進(jìn)行設置。
然后對wx.request的success進(jìn)行代碼編寫(xiě)，如下
要注意兩點(diǎn)：
- res.data代表你返回的數據，res中除了data還有其他比如響應頭部信息等
- 當你要賦值data中的屬性時(shí)，請用setData，不要直接賦值。
到此刻為止 我們albums里已經(jīng)有數據了，接下來(lái)在視圖上進(jìn)行循環(huán)。
小程序頁(yè)面數據渲染
還記得我們 第三篇 學(xué)的知識么，現在要用了。
此刻視圖已經(jīng)知道了albums，遍歷它。
我們使用wx:for對albums數據進(jìn)行遍歷，并設置每個(gè)遍歷項名字為wx:for-item="album"，當然出來(lái)的樣子不好看
一般來(lái)說(shuō)下一步要進(jìn)行美化，這里就不進(jìn)行文字描寫(xiě)，美化的詳細代碼我會(huì )傳到github上，你可以將小程序代碼拉下來(lái)同步學(xué)習。
最后
本篇為你講解了一個(gè)完成的小程序后臺獲取數據，yii2程序按照restful規范返回，小程序拿到數據后在視圖上進(jìn)行渲染的全過(guò)程。
我知道你還有疑問(wèn)，比如
- 拿的是所有數據么？
- yii2的接口如何分頁(yè)？
- 小程序如何分頁(yè)？
這的確是一個(gè)大問(wèn)題，別急，下一篇我將為你講解 小程序和yii2結合實(shí)現完美的下拉加載和上拉刷新功能 ，做一個(gè)更好的相冊列表頁(yè)。
