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

小程序

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

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

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

• 首先在data里設(shè)置一個album_id并在頁面 onLoad 的時候由相冊列表頁傳遞過來id對其賦值。

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

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

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)在相冊的photo記錄已經(jīng)存到了view頁面的photos中，接下來放到wxml渲染出來，看下方代碼

<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，我希望每個photo介紹下面直接是2*2形式的圖片矩陣。

也就是說我在獲取每個photo的同時還要順便獲取其下的photo_item。

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

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

然后針對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)在再看看相冊詳情頁面photo記錄的服務(wù)器響應(yīng)數(shù)據(jù)

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

因此我對相冊詳情的視圖進(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á)到了。

遺留的問題

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

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