小程序综合案例

按照第4.5综合案例课程编码步骤来编写了以下内容

先开始做最上边的幻灯片，用swiper组件，可以在微信小程序文档官网中查找到代码。（indicator-dots是设置幻灯片的小点，autoplay是设置是否自动播放）

然后在index.js中加入图片，可以在网上找到图片链接直接复制过来就好了。

然后重启项目就可以看见设置好的幻灯片了。

然后加上三个个view定义一个样式好控制页面，再将页面分成三个部分：第一个部分幻灯片，第二个部分是视频推荐，第三个部分是热门评论。
每个部分都分割开来，我们设置一灰色的分隔条。

然后开始设置视频推荐部分，在index.wxss中编写header的样式，设置左边字旁边的绿线。

再将“视频推荐”和“全部视频”设置在左右两边，用flex布局并且居中对齐。

因为图片中还有文字，所以在设置一个view并且定义为，其中又有四个子view再定义他们为，再编写content-item的样式，用flex-wrap: wrap来设置换行

再设置图片大小、间距并且在水平方向居中对齐并。

在项目文件夹中建一个images的文件夹，将图片放进去。注：是png格式。设置图片的大小。

然后在图片上加上文字用，这时候涉及到了两个view重叠的情况，我们需要用绝对布局的方法。
首先要将item进行了定位，然后文字会参照其进行定位。
下面的图片是设置的文字的样式

这时候我们可以把后面三个view删除并且设置一个wx:for="{{contentItems}}"循环，然后再定义一下他的数组一共是有4个图片contentItems:[’’,’’,’’,’’]。
第二个部分就设置好了

第三部分的头部和前面的一样，直接复制就可以用了，然后编写第三部分的图片文字样式。

这里也设置了一个循环然后有7个listItems:[’’,’’,’’,’’,’’,’’,’’]

需要在这部分再加上一个小的头像和内容，下面我们来加上头像的图片并且设置它的样式。
因为头像要覆盖在另一张图片上面，所以是绝对定位。

最后就是编写第三部分标题和内容，标题字体大，内容字体小，文字距离顶部底部要有间隔，这样看起来更美观好看一些。

这样最后我们的页面就完成了。

总结
小程序的课程已经学习了一半，终于可以做成一个像样的页面了。这个实例的知识点都是前半部分老师已经讲过的内容，所以这个实例也是考察我们知识掌握的情况。这次我是一步步跟着老师做下来的，我希望之后我会充分利用好这些知识，做一个完全由是自己设计并且编写的页面。