昨晚听了犀牛鸟大咖白老师和娇老师的视频授课，闲来无事，希望接下来不在断断续续学习小程序，而是静下心来用心学。发现娇老师总结的三点不错：1、要多看书；2、要总结写学习笔记；3、有一个好的导师很重要；前两者相信大家都能做到，第三者就随缘了。

一直有关注：追风少年分享的个人博客小程序，自己刚好也想写个博客小程序，他也无私地把自己的代码分享出来了：https://github.com/husanfeng/hsf_blog.git;已给他留言，解读他的源码 应该不会被投诉吧？希望能够得到他的理解和支持！

我的目的很简单，希望对自己感兴趣的小程序源码的学习，快速提高自己的技能~

下载好源码后，话不多说了，我们开始吧~

我的天呐，小程序端就有21个页面，一看到就头大；

我们先看看tabBar：

四个关键的页面，分别是：pages/home/home、pages/special/special、pages/ranking/ranking、pages/me/me；

先从pages/home/home开始：

这里用view/scroll-view/swiper组件，然后引用了article-list-compent组件；

compent引用方法在json中引进：

好的，下面我们结合小程序界面来研究下page/home/home里面的代码：

下面看两个界面，第一个是作者的，第二个是我们下载代码后的（我想应该是我们取不到数据，所以界面不一样，只是个框架）：

这个首页，我们从上往下看，貌似挺简单，上门一个轮播图，下面是作者发的博客文章标题，但是包括发布时间、评论、浏览和点赞的数量；

我们先看看这个轮播图的代码：

indicator-dots"{{indicatorDots}}"(是否显示面板指示点，是个变量) indicator-active-color"#1296db"（当前选中的指示点颜色：蓝色） circular"true" （采用衔接滑动） autoplay"{{autoplay}}"（自动切换，变量） interval"{{interval}}" （自动切换时间间隔：变量）duration"{{duration}}（滑动动画时长：变量）；

block组件循环变量：imgUrls；swiper-item：item.url;这个swiper组件有7个变量，我们进入home.js看看这些变量：

有四个变量是设好固定数值的，我们重点看看imgUrls是个数组类型，通过查找发现imgUrls出现两处，另外一处是：

那我们看看这个initSwiper函数的关键代码：db.collection('top_images').orderBy("_id", 'asc').get({

success: function(res) {

// res.data 包含该记录的数据

console.log(res.data)

_this.setData({

imgUrls: res.data

})

},

查文档说明collection.orderBy的用法：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.orderBy.html

根据文档，我对这段代码的理解是：通过云开发调用作者数据库名为“top_images”的图片，排序的文件名字段为_id,order排列顺序为：asc？asc是字母越大越靠前？

再看看这个initSwiper函数在哪里开始执行：

饿了吃饭先，下午慢慢解析，理解的不对，欢迎指正 不要喷 Thanks♪(･ω･)ﾉ