更多關(guān)于yii2的restful方法可以在這里學(xué)習(xí) http://nai8.me/course-book.ht...

小程序

當(dāng)點(diǎn)擊某個(gè)相冊(cè)的時(shí)候我希望每個(gè)photo記錄按照上傳時(shí)間降序排序，并且在photo記錄的列表頁(yè)也會(huì)呈現(xiàn)出圖片和視頻。

好東西要一口一口吃，我先實(shí)現(xiàn)photo列表而不考慮圖片和視頻問(wèn)題。

為此我在album文件夾內(nèi)新建了一個(gè)view的page，它由album/list點(diǎn)擊而來(lái)。獲取photo記錄的思路和之前講過(guò)的獲取相冊(cè)列表一樣。

• 首先在data里設(shè)置一個(gè)album_id并在頁(yè)面 onLoad 的時(shí)候由相冊(cè)列表頁(yè)傳遞過(guò)來(lái)id對(duì)其賦值。

• 根據(jù)album_id從服務(wù)器分頁(yè)形式獲取photo記錄集合并渲染給視圖。

我想你對(duì)上面的實(shí)現(xiàn)已經(jīng)胸有成竹了吧，我將從后臺(tái)獲取數(shù)據(jù)的代碼寫(xiě)一下（更詳細(xì)的代碼請(qǐng)從github上拉下來(lái)）

loadList: function () {
    if (hadLastPage != false) {
        wx.showToast({
            title: '到底了',
        })
        return;
    }

    var that = this;
    wx.request({
        method: 'GET',
        url: 'http://xgh.local.com/xcx/photo-items',
        data: {
            fields: 'id,name,description',
            album_id:that.data.album_id,
            page: page
        },
        header: {
            'content-type': 'application/json'
        },
        success: function (res) {
            var listData = that.data.photos;
            for (var i = 0; i < res.data.length; i++) {
                listData.push(res.data[i]);
            }

            if (res.header["X-Pagination-Page-Count"] == res.header["X-Pagination-Current-Page"]) {
                hadLastPage = res.header["X-Pagination-Current-Page"];
            } else {
                page++;
            }

            that.setData({
                photos: listData
            });
        },
    })
}

現(xiàn)在相冊(cè)的photo記錄已經(jīng)存到了view頁(yè)面的photos中，接下來(lái)放到wxml渲染出來(lái)，看下方代碼

<view class="photos">
    <block wx:for="{{photos}}" wx:key="id" wx:for-index="idx" wx:for-item="photo">
        <view class="photo">
            <view class="desc">{{photo.description}}</view>
        </view>
    </block>
</view>

看看效果圖

優(yōu)化photo列表

這樣是不夠的，我們還要進(jìn)一步進(jìn)行優(yōu)化，首先優(yōu)化圖片類photo，我希望每個(gè)photo介紹下面直接是2*2形式的圖片矩陣。

也就是說(shuō)我在獲取每個(gè)photo的同時(shí)還要順便獲取其下的photo_item。

但是photo數(shù)據(jù)表是沒(méi)有photo_item字段的，幸好我們的yii2有那個(gè)extraFields方法，開(kāi)始部署吧，首先我在小程序從后臺(tái)獲取photo記錄的請(qǐng)求data中重新設(shè)置如下

data: {
    fields: 'id,name,description,type',
    album_id:that.data.album_id,
    expand: 'photos',
    page: page
},

然后針對(duì)photo模型增加如下方法

public function extraFields() {

    return [
        'photos'
    ];
}

public function getPhotos(){
    $data = PhotoItem::find()->where(['photo_id'=>$this->id])->all();

    $return = [];
    foreach($data as $item){
        $return[] = [
            'path'=>Yii::$app->request->getHostInfo()."/static/".$item->path
        ];
    }

    return $return;
}

現(xiàn)在再看看相冊(cè)詳情頁(yè)面photo記錄的服務(wù)器響應(yīng)數(shù)據(jù)

達(dá)到目的，現(xiàn)在開(kāi)始渲染視圖，有個(gè)特別情況需要說(shuō)下，當(dāng)photo記錄的photos照片返回一個(gè)的時(shí)候,就不要2*2了，直接顯示即可。

因此我對(duì)相冊(cè)詳情的視圖進(jìn)行了如下優(yōu)化。

<view class="photos">
    <block wx:for="{{photos}}" wx:key="id" wx:for-index="idx" wx:for-item="photo">
        <view class="photo">
            <view class="desc">{{photo.description}}</view>
            <view class="items">
                <block wx:for="{{photo.photos}}" wx:if="{{photo.photos.length==1}}" wx:key="id" wx:for-index="pidx" wx:for-item="photoItem">
                    <image src="{{photoItem.path}}" style="width:10em;height:10em;"></image>
                </block>

                <block wx:for="{{photo.photos}}" wx:if="{{photo.photos.length>1}}" wx:key="id" wx:for-index="pidx" wx:for-item="photoItem">
                    <image src="{{photoItem.path}}" style="width:5em;height:5em;display:inline-block;"></image>
                </block>
            </view>
        </view>
    </block>
</view>

看看效果

我們的目的初步達(dá)到了。

遺留的問(wèn)題

聰明的你一定發(fā)現(xiàn)了一些問(wèn)題，最明顯的就是圖片尺寸問(wèn)題，應(yīng)該等比例且真實(shí)長(zhǎng)寬要適配設(shè)備，另外最好顯示壓縮圖。

這些的確是真實(shí)存在的問(wèn)題，別急，下節(jié)將為你解決。