入門微信小程式(含實戰) [第八篇]實現完整的相簿列表邏輯(小程式端&伺服器端)

阿北哥ya發表於2017-11-02

這一章要進行的東西還蠻多的,從小程式navigator到wx.request,再到後臺的restful進行資料集的通訊,前後臺一起實戰,和老沙一起做一個全棧工程師吧。

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

需求:
每個寶寶都有很多相簿,自己的、和父母的、和粉絲的、和各種奇葩物體的。這些不同的相簿將照片按照場景分開,就像商品和分類的概念一樣,每個相簿有自己的名字及生成時間,一個照片只能屬於一個相簿。

當然後期相簿還會和“去哪兒”頻道進行結合。

在小程式的位置見下圖

點選後進入到相簿
點選後進入到相簿

開始準備

資料表的結構如下:

album相簿表
album相簿表

photo相簿視訊表
photo相簿視訊表

在photo中有個欄位type是多型的,當type=1代表圖片,type=2代表視訊。photo中有個外來鍵就是album_id代表此圖片/視訊所屬的相簿。

小提醒:在實際開發中北哥推薦使用migrate來維護你的資料表結構,用法可以參考《90個小時》原創視訊進階篇 第1節&第2節。

準備模型

資料表建完後我們通過yii2的gii工具分別建立了Album和Photo模型,通過這些模型可以和資料表資料進行互動。

模型
模型

建立第一個restful介面

小程式的相簿列表頁面需要得到相簿名字、內含照片數量並且相簿按照更新時間進行降序排序。

我們先來構造符合前臺需求的restful風格的介面。

通過對上一篇的學習老沙知道首先要urlManager中的路由,如下圖

alt
alt

然後建立這個路由對應的restful風格的控制器,重點是要繼承於ActiveController

alt
alt

如上圖所寫,只需要繼承於ActiveController並且制定一個modelClass即可,到此刻位置一個restful就建立成功了,我們嘗試先給資料庫的album填寫一些資料後訪問介面 GET xgh.nai8.me/xcx/albums 看看效果

alt
alt

老沙泯然一笑,很成功。

但是這仍然不是我想要的結果,我需要的結果是

  • 編號id
  • 名字name
  • 更新時間(格式化為0000-00-00 00:00:00)
  • 相簿內照片數量

也就是說我需要讓後臺去掉幾個欄位並增加幾個欄位。,當然這並不難,老沙同學之前就玩過。

去掉欄位 也就是欄位的篩選,我們可以在GET /xcx/albums的時候傳遞一個fields,註明我們需要的欄位,在這裡就是GET /xcx/albums?fields=id,name

果然返回了id和name
果然返回了id和name

事業成功一半了,接下來我們還需要更新時間相簿內照片數量,首先說這兩個欄位在資料表中根本不存在,那麼對於此類問題需要如何解決那?

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

expand的視訊教學可以在PHP原創視訊內學到。

我們來實際操作下expand的用法

首先為介面增加 expand項 GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal

然後回到我們的模型Album,過載extraFields函式

alt
alt

當然我們還需要去實現formatUpdateTime和photoTotal,如下圖在模型Album中增加兩個函式即可

alt
alt

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

alt
alt

完美解決。

小程式端

現在後臺已經準備完畢,老沙需要佈局小程式,效果圖如下

alt
alt

頁面並不複雜,我從後臺獲取資料後在小程式的檢視上進行一個遍歷即可。

我建立了一個list Page。

別告訴我這個你不會
別告訴我這個你不會

獲取後臺資料

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

同時在onReady函式裡實現了後臺拉資料

alt
alt

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

看看結果(url為我本地開發的域名)

alt
alt

當返回成功後我們可以在其success內使用這些資料,現在資料返回了,我們要如何使用它們那???

data
小程式的每個xxx.js裡都有一個data屬性,這個屬性裡的資料可以直接被檢視wxml使用,我們現在在data裡進行設定。

alt
alt

然後對wx.request的success進行程式碼編寫,如下

alt
alt

要注意兩點:

  • res.data代表你返回的資料,res中除了data還有其他比如響應頭部資訊等
  • 當你要賦值data中的屬性時,請用setData,不要直接賦值。

到此刻為止 我們albums裡已經有資料了,接下來在檢視上進行迴圈。

小程式頁面資料渲染

還記得我們 第三篇 學的知識麼,現在要用了。

此刻檢視已經知道了albums,遍歷它。

alt
alt

我們使用wx:for對albums資料進行遍歷,並設定每個遍歷項名字為wx:for-item="album",當然出來的樣子不好看

alt
alt

一般來說下一步要進行美化,這裡就不進行文字描寫,美化的詳細程式碼我會傳到github上,你可以將小程式程式碼拉下來同步學習。

最後

本篇為你講解了一個完成的小程式後臺獲取資料,yii2程式按照restful規範返回,小程式拿到資料後在檢視上進行渲染的全過程。

我知道你還有疑問,比如

  • 拿的是所有資料麼?
  • yii2的介面如何分頁?
  • 小程式如何分頁?

這的確是一個大問題,別急,下一篇我將為你講解 小程式和yii2結合實現完美的下拉載入和上拉重新整理功能,做一個更好的相簿列表頁。

相關文章