這一章要進(jìn)行的東西還蠻多的，從小程序navigator到wx.request，再到后臺(tái)的restful進(jìn)行數(shù)據(jù)集的通訊，前后臺(tái)一起實(shí)戰(zhàn)，和老沙一起做一個(gè)全棧工程師吧。

一個(gè)一個(gè)來吧，先說需求。

需求：

每個(gè)寶寶都有很多相冊(cè)，自己的、和父母的、和粉絲的、和各種奇葩物體的。這些不同的相冊(cè)將照片按照?qǐng)鼍胺珠_，就像商品和分類的概念一樣，每個(gè)相冊(cè)有自己的名字及生成時(shí)間，一個(gè)照片只能屬于一個(gè)相冊(cè)。

當(dāng)然后期相冊(cè)還會(huì)和“去哪兒”頻道進(jìn)行結(jié)合。

在小程序的位置見下圖

 

開始準(zhǔn)備

數(shù)據(jù)表的結(jié)構(gòu)如下：

 

 

在photo中有個(gè)字段type是多態(tài)的，當(dāng)type=1代表圖片，type=2代表視頻。photo中有個(gè)外鍵就是album_id代表此圖片/視頻所屬的相冊(cè)。

小提醒：在實(shí)際開發(fā)中北哥推薦使用migrate來維護(hù)你的數(shù)據(jù)表結(jié)構(gòu)，用法可以參考《90個(gè)小時(shí)》原創(chuàng)視頻進(jìn)階篇 第1節(jié)&第2節(jié)。

準(zhǔn)備模型

數(shù)據(jù)表建完后我們通過yii2的gii工具分別建立了Album和Photo模型，通過這些模型可以和數(shù)據(jù)表數(shù)據(jù)進(jìn)行交互。

 

建立第一個(gè)restful接口

小程序的相冊(cè)列表頁面需要得到相冊(cè)名字、內(nèi)含照片數(shù)量并且相冊(cè)按照更新時(shí)間進(jìn)行降序排序。

我們先來構(gòu)造符合前臺(tái)需求的restful風(fēng)格的接口。

通過對(duì)上一篇的學(xué)習(xí)老沙知道首先要urlManager中的路由，如下圖

 

然后建立這個(gè)路由對(duì)應(yīng)的restful風(fēng)格的控制器，重點(diǎn)是要繼承于ActiveController

 

如上圖所寫，只需要繼承于ActiveController并且制定一個(gè)modelClass即可，到此刻位置一個(gè)restful就建立成功了，我們嘗試先給數(shù)據(jù)庫的album填寫一些數(shù)據(jù)后訪問接口 GET https://xgh.nai8.me/xcx/albums 看看效果

 

老沙泯然一笑，很成功。

但是這仍然不是我想要的結(jié)果，我需要的結(jié)果是

• 編號(hào)id
• 名字name
• 更新時(shí)間（格式化為0000-00-00 00:00:00）
• 相冊(cè)內(nèi)照片數(shù)量

也就是說我需要讓后臺(tái)去掉幾個(gè)字段并增加幾個(gè)字段。，當(dāng)然這并不難，老沙同學(xué)之前就玩過。

去掉字段也就是字段的篩選，我們可以在GET /xcx/albums的時(shí)候傳遞一個(gè)fields，注明我們需要的字段，在這里就是GET /xcx/albums?fields=id,name

 

事業(yè)成功一半了，接下來我們還需要 更新時(shí)間 和 相冊(cè)內(nèi)照片數(shù)量 ，首先說這兩個(gè)字段在數(shù)據(jù)表中根本不存在，那么對(duì)于此類問題需要如何解決那？

好解決，yii2已經(jīng)提供了解決方案，就是expand

expand的視頻教學(xué)可以在PHP原創(chuàng)視頻內(nèi)學(xué)到。

我們來實(shí)際操作下expand的用法

首先為接口增加 expand項(xiàng) GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal

然后回到我們的模型Album，重載extraFields函數(shù)

 

當(dāng)然我們還需要去實(shí)現(xiàn)formatUpdateTime和photoTotal，如下圖在模型Album中增加兩個(gè)函數(shù)即可

 

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

 

完美解決。

小程序端

現(xiàn)在后臺(tái)已經(jīng)準(zhǔn)備完畢，老沙需要布局小程序，效果圖如下

 

頁面并不復(fù)雜，我從后臺(tái)獲取數(shù)據(jù)后在小程序的視圖上進(jìn)行一個(gè)遍歷即可。

我建立了一個(gè)list Page。

 

獲取后臺(tái)數(shù)據(jù)

微信小程序已經(jīng)提供了一個(gè)和后臺(tái)進(jìn)行通訊的方法wx.request，這個(gè)和jquery的$.getJSON有點(diǎn)像，我在page頁面首先建立了一個(gè)var app = getApp() 以確保我可以使用app的一些數(shù)據(jù)。

同時(shí)在onReady函數(shù)里實(shí)現(xiàn)了后臺(tái)拉數(shù)據(jù)

 

你是否看到了很多影子，比如fields、expand、url、method等等，相信你可以理解。

看看結(jié)果（url為我本地開發(fā)的域名）

 

當(dāng)返回成功后我們可以在其success內(nèi)使用這些數(shù)據(jù)，現(xiàn)在數(shù)據(jù)返回了，我們要如何使用它們那？？？

data

小程序的每個(gè)xxx.js里都有一個(gè)data屬性，這個(gè)屬性里的數(shù)據(jù)可以直接被視圖wxml使用，我們現(xiàn)在在data里進(jìn)行設(shè)置。

 

然后對(duì)wx.request的success進(jìn)行代碼編寫，如下

 

要注意兩點(diǎn)：

• res.data代表你返回的數(shù)據(jù)，res中除了data還有其他比如響應(yīng)頭部信息等
• 當(dāng)你要賦值data中的屬性時(shí)，請(qǐng)用setData，不要直接賦值。

到此刻為止 我們albums里已經(jīng)有數(shù)據(jù)了，接下來在視圖上進(jìn)行循環(huán)。

小程序頁面數(shù)據(jù)渲染

還記得我們 第三篇 學(xué)的知識(shí)么，現(xiàn)在要用了。

此刻視圖已經(jīng)知道了albums，遍歷它。

 

我們使用wx:for對(duì)albums數(shù)據(jù)進(jìn)行遍歷，并設(shè)置每個(gè)遍歷項(xiàng)名字為wx:for-item="album"，當(dāng)然出來的樣子不好看

 

一般來說下一步要進(jìn)行美化，這里就不進(jìn)行文字描寫，美化的詳細(xì)代碼我會(huì)傳到github上，你可以將小程序代碼拉下來同步學(xué)習(xí)。

最后

本篇為你講解了一個(gè)完成的小程序后臺(tái)獲取數(shù)據(jù)，yii2程序按照restful規(guī)范返回，小程序拿到數(shù)據(jù)后在視圖上進(jìn)行渲染的全過程。

我知道你還有疑問，比如

• 拿的是所有數(shù)據(jù)么？
• yii2的接口如何分頁？
• 小程序如何分頁？

這的確是一個(gè)大問題，別急，下一篇我將為你講解 小程序和yii2結(jié)合實(shí)現(xiàn)完美的下拉加載和上拉刷新功能 ，做一個(gè)更好的相冊(cè)列表頁。