入门微信小程序(含实战) [第八篇]实现完整的相册列表逻辑（小程序端&服务器端）...

这一章要进行的东西还蛮多的，从小程序navigator到wx.request，再到后台的restful进行数据集的通讯，前后台一起实战，和老沙一起做一个全栈工程师吧。

一个一个来吧，先说需求。

需求：
每个宝宝都有很多相册，自己的、和父母的、和粉丝的、和各种奇葩物体的。这些不同的相册将照片按照场景分开，就像商品和分类的概念一样，每个相册有自己的名字及生成时间，一个照片只能属于一个相册。

当然后期相册还会和“去哪儿”频道进行结合。

在小程序的位置见下图

点击后进入到相册

开始准备

数据表的结构如下：

album相册表

photo相册视频表

在photo中有个字段type是多态的，当type=1代表图片，type=2代表视频。photo中有个外键就是album_id代表此图片/视频所属的相册。

小提醒：在实际开发中北哥推荐使用migrate来维护你的数据表结构，用法可以参考《90个小时》原创视频进阶篇 第1节&第2节。

准备模型

数据表建完后我们通过yii2的gii工具分别建立了Album和Photo模型，通过这些模型可以和数据表数据进行交互。

模型

建立第一个restful接口

小程序的相册列表页面需要得到相册名字、内含照片数量并且相册按照更新时间进行降序排序。

我们先来构造符合前台需求的restful风格的接口。

通过对上一篇的学习老沙知道首先要urlManager中的路由，如下图

alt

然后建立这个路由对应的restful风格的控制器，重点是要继承于ActiveController

alt

如上图所写，只需要继承于ActiveController并且制定一个modelClass即可，到此刻位置一个restful就建立成功了，我们尝试先给数据库的album填写一些数据后访问接口 GET xgh.nai8.me/xcx/albums 看看效果

alt

老沙泯然一笑，很成功。

但是这仍然不是我想要的结果，我需要的结果是

• 编号id
• 名字name
• 更新时间（格式化为0000-00-00 00:00:00）
• 相册内照片数量

也就是说我需要让后台去掉几个字段并增加几个字段。，当然这并不难，老沙同学之前就玩过。

去掉字段 也就是字段的筛选，我们可以在GET /xcx/albums的时候传递一个fields，注明我们需要的字段，在这里就是GET /xcx/albums?fields=id,name

果然返回了id和name

事业成功一半了，接下来我们还需要更新时间和相册内照片数量，首先说这两个字段在数据表中根本不存在，那么对于此类问题需要如何解决那？

好解决，yii2已经提供了解决方案，就是expand

expand的视频教学可以在PHP原创视频内学到。

我们来实际操作下expand的用法

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

然后回到我们的模型Album，重载extraFields函数

alt

当然我们还需要去实现formatUpdateTime和photoTotal，如下图在模型Album中增加两个函数即可

alt

接下来访问接口 GET /xcx/albums?fields=id,name&expand=formatUpdateTime,photoTotal 试试

alt

完美解决。

小程序端

现在后台已经准备完毕，老沙需要布局小程序，效果图如下

alt

页面并不复杂，我从后台获取数据后在小程序的视图上进行一个遍历即可。

我建立了一个list Page。

别告诉我这个你不会

获取后台数据

微信小程序已经提供了一个和后台进行通讯的方法wx.request，这个和jquery的$.getJSON有点像，我在page页面首先建立了一个var app = getApp() 以确保我可以使用app的一些数据。

同时在onReady函数里实现了后台拉数据

alt

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

看看结果（url为我本地开发的域名）

alt

当返回成功后我们可以在其success内使用这些数据，现在数据返回了，我们要如何使用它们那？？？

data
小程序的每个xxx.js里都有一个data属性，这个属性里的数据可以直接被视图wxml使用，我们现在在data里进行设置。

alt

然后对wx.request的success进行代码编写，如下

alt

要注意两点：

• res.data代表你返回的数据，res中除了data还有其他比如响应头部信息等
• 当你要赋值data中的属性时，请用setData，不要直接赋值。

到此刻为止 我们albums里已经有数据了，接下来在视图上进行循环。

小程序页面数据渲染

还记得我们 第三篇 学的知识么，现在要用了。

此刻视图已经知道了albums，遍历它。

alt

我们使用wx:for对albums数据进行遍历，并设置每个遍历项名字为wx:for-item="album"，当然出来的样子不好看

alt

一般来说下一步要进行美化，这里就不进行文字描写，美化的详细代码我会传到github上，你可以将小程序代码拉下来同步学习。

最后

本篇为你讲解了一个完成的小程序后台获取数据，yii2程序按照restful规范返回，小程序拿到数据后在视图上进行渲染的全过程。

我知道你还有疑问，比如

• 拿的是所有数据么？
• yii2的接口如何分页？
• 小程序如何分页？

这的确是一个大问题，别急，下一篇我将为你讲解 小程序和yii2结合实现完美的下拉加载和上拉刷新功能，做一个更好的相册列表页。