小程序模板網(wǎng)

小北微信小程序教程之 -- 實現(xiàn)完整的相冊列表邏輯(小程序端&服務器端)

發(fā)布時間:2018-01-04 11:37 所屬欄目:小程序開發(fā)教程

這一章要進行的東西還蠻多的,從小程序navigator到wx.request,再到后臺的restful進行數(shù)據(jù)集的通訊,前后臺一起實戰(zhàn),和老沙一起做一個全棧工程師吧。一個一個來吧,先說需求。需求:每個寶寶都有很多相冊,自己的、 ...

 
 
 

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

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

需求:

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

當然后期相冊還會和“去哪兒”頻道進行結(jié)合。

在小程序的位置見下圖

 

開始準備

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

 

 

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

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

準備模型

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

 

建立第一個restful接口

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

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

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

 

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

 

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

 

老沙泯然一笑,很成功。

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

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

也就是說我需要讓后臺去掉幾個字段并增加幾個字段。,當然這并不難,老沙同學之前就玩過。

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

 

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

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

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

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

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

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

 

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

 

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

 

完美解決。

小程序端

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

 

頁面并不復雜,我從后臺獲取數(shù)據(jù)后在小程序的視圖上進行一個遍歷即可。

我建立了一個list Page。

 

獲取后臺數(shù)據(jù)

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

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

 

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

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

 

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

data

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

 

然后對wx.request的success進行代碼編寫,如下

 

要注意兩點:

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

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

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

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

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

 

我們使用wx:for對albums數(shù)據(jù)進行遍歷,并設置每個遍歷項名字為wx:for-item="album",當然出來的樣子不好看

 

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

最后

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

我知道你還有疑問,比如

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

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18371.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢