4.1　文章列表页面元素分析及准备工作

上一章我们一起完成了Orange Can的第一个页面：welcome欢迎页。虽然简单，但它基本描述了小程序的开发模式。本章我们来构建第二页面：文章页面。该页面的设计图可参考本书彩页部分图片。

文章页面主体部分由两部分构成，上半部分是一个轮播图，下半部分是文章列表。

轮播图目前来说已经成为各大电商网站首页的标配元素，如图4-1所示。

图4-1　京东首页的banner轮播图

轮播图每隔几秒钟图片会自动更换一张。在小程序中，我们不需要自己编写代码来实现这样的轮播图效果，小程序已经提供了一个现成的组件——swiper。

下半部分是多篇文章构成的文章列表。每篇文章包含文章标题、文章头图、文章概要、评论数和阅读数。我们依然只需要使用在上一章中介绍的3个组件：view、image和text，即可实现这个文章列表。

先来创建文章列表页面的相关文件。

在pages目录下新建一个名为post的目录，然后依次在post目录下新建阅读页面所需要的4个文件post.wxml、post.wxss、post.json和post.wxss。

建议使用3.2小节中介绍的快捷创建页面目录及文件的方法，一个个地创建4个页面文件实在太麻烦。如果你是一个个地手动新建页面文件，那么请注意添加3.2小节中我们讲到的页面默认必备代码，否则小程序会报错。创建后的项目目录如图4-2所示。

现在有个问题，我们要编写阅读页面，但我们的启动页面已经设置成了welcome欢迎页面。在不编写“开启小程序之旅”这个button跳转页面功能之前，我们没办法看到文章页面。实现button跳转页面的功能，需要用到小程序事件和JavaScript代码，我们先尽可能地熟悉小程序页面骨架的编写，稍微复杂一些的事件和JavaScript代码留在后面的章节讲解。

图4-2　加入阅读页面后的目录结构

先做一个调整。在之前章节里我们提到过，小程序启动后显示的首页，由app.json文件里pages数组的第一个元素决定。我们暂时先将首页调整成post页面。

在app.json的pages数组里加入post页面路径，注意它必须是pages数组的第一个元素，位于welcome页面之前。代码清单如下：

更改完成后，现在保存或者重新编译项目，启动页面将不再是welcome页面，而变成了post页面。

在小程序的images目录下新建一个子目录post，并将阅读页面所需要的图片素材拷贝到该目录下。读者可以自行选择自己喜欢的图片素材，或者访问前言中【项目资源文件及源代码及如何阅读本书】中所提供的地址来获取素材。图片的像素大小要大于或者等于750（宽）和600（高），过小的图片会出现“留白”的情况。图4-3显示了本书所使用图片素材的目录情况，本书后续将不再一一展示图片目录，请读者朋友自行将图片路径填写正确。

图4-3　素材所在目录

完成以上准备工作后，就可以开始编写文章页面了。