小程序模板网

小北微信小程序教程之-- 相册内容浏览

在本篇你讲学到的知识有

  • image和video组件

  • yii2中restfule的prepareDataProvider方法的使用

当然这一切还是从服务端开始

服务器

从逻辑上说就是点击一个相册后将属于这个相册的所有photo记录都拿出来,这应该是yii2中restful的index方法,但是有一个问题就是调用index方法的时候需要传递一个参数过去,album_id!

而默认情况下使用index方法的时候是无法传递参数的,好在yii2已经为我们提供了一个函数用来处理这方面需求 --- prepareDataProvider

我们首先重载下PhotoItemController的index方法,如下代码

public function actions() {
    $actions = parent::actions();
    unset($actions['create']);
    $actions['index']['prepareDataProvider'] = [$this,'prepareDataProvider'];
    return $actions;
}

yii2的restful针对于index方法内置了一个prepareDataProvider方法,用来准备数据集记录,我们通过对其重写编写来设置带有album_id的查询条件。

于是我重写了prepareDataProvider方法

public function prepareDataProvider(){
    $params = Yii::$app->request->queryParams;

    $query = Photo::find()->where(['album_id'=>$params['album_id']]);
    $provider = new ActiveDataProvider([
        'query'=>$query
    ]);

    return $provider;
}

通过Yii::$app->request->queryParams获取本次请求的get参数,将得到的$params['album_id']传递给ActiveDataProvider获取具体相册的photo记录。

看看效果图

更多关于yii2的restful方法可以在这里学习 http://nai8.me/course-book.ht...

小程序

当点击某个相册的时候我希望每个photo记录按照上传时间降序排序,并且在photo记录的列表页也会呈现出图片和视频。

好东西要一口一口吃,我先实现photo列表而不考虑图片和视频问题。

为此我在album文件夹内新建了一个view的page,它由album/list点击而来。获取photo记录的思路和之前讲过的获取相册列表一样。

  • 首先在data里设置一个album_id并在页面 onLoad 的时候由相册列表页传递过来id对其赋值。

  • 根据album_id从服务器分页形式获取photo记录集合并渲染给视图。

我想你对上面的实现已经胸有成竹了吧,我将从后台获取数据的代码写一下(更详细的代码请从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
            });
        },
    })
}

现在相册的photo记录已经存到了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>

看看效果图

优化photo列表

这样是不够的,我们还要进一步进行优化,首先优化图片类photo,我希望每个photo介绍下面直接是2*2形式的图片矩阵。

也就是说我在获取每个photo的同时还要顺便获取其下的photo_item。

但是photo数据表是没有photo_item字段的,幸好我们的yii2有那个extraFields方法,开始部署吧,首先我在小程序从后台获取photo记录的请求data中重新设置如下

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;
}

现在再看看相册详情页面photo记录的服务器响应数据

达到目的,现在开始渲染视图,有个特别情况需要说下,当photo记录的photos照片返回一个的时候,就不要2*2了,直接显示即可。

因此我对相册详情的视图进行了如下优化。

<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>

看看效果

我们的目的初步达到了。

遗留的问题

聪明的你一定发现了一些问题,最明显的就是图片尺寸问题,应该等比例且真实长宽要适配设备,另外最好显示压缩图。

这些的确是真实存在的问题,别急,下节将为你解决。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24043.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询