4-4 构建新闻列表 （上）

知识点1、关于新闻列表页导航栏颜色问题

              由于之前在app.json中设置的window配置的

window":{"navigationBarBackgroundColor":"#b3d4db"}

app.json是一个全局的配置，所以在其他的页面也就默认这个颜色了。我们可以在新闻列表页给新闻列表专门新建一个post.json，在这个里面设置它独有的颜色就可以了。如果是在全局配置的app.json里面改成“深蓝色”话，那么welcome页面也是会变成“深蓝色”。所以我们通过全局设置一种基本颜色，再在每个具体页面对应的“配置文件”（注意不是wxss）中设置单独的window的navigationBarBackgroundColoe颜色。

知识点2、新闻列表页面的json不能为空问题

但是新建post.json后，轮播图消失了，而且不报错，为此在post.json里面写一个大括号就可以了。腾讯的bug，不用管。(2017.10.27写 现在已经修复了这个bug，如果没有写大括号会报错)

知识点3、app.json配置项问题，window书写位置。

在app.json里面写了window":{"navigationBarBackgroundColor":"#b3d4db"}，然后在post.json 写window":{"navigationBarBackgroundColor":"其他颜色"}，这样并不可以。大概因为window是“设置默认页面的窗口表现”，所以新闻列表不算默认网页？在新闻列表里直接设置"navigationBarBackgroundColor":"其他颜色" 就可以了。

官方解释：

page.json每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：

{ "navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "微信接口功能演示",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light" }

其他属性如下：看第三个，可以设置导航栏标题文字内容：“文章与汉字”。注意添加的位置，是post.json。如果在app.json添加，那么所有的页面都会被添加的。其他如标题颜色，自己尝试修改。

知识点4、构建静态样式时，整体来构建

构建静态样式要有大局观，不能只看一个元素，就开始构建。其实个人理解就是，从整体到细微。先整体看，能划分成哪些部分，这些部分再细化。这样框架感就出来了。如果从小到大，会很乱，这是一个编程习惯。断裂式的非常不好哦。

下面就来分析一下文章列表有哪些元素构成：

作者头像image，文章发表时间text。文章导图image，文章概要text，收藏图像image，收藏数text，评论图image，评论数text。

垂直布局，四行分布。然后在编辑区里开始写。一个大的view作为容器。根据以上分析，写出基本骨架如下：

开始填充内容。相关的头像，图片，文字。图片的路径使用绝对路径或相对路径。

知识点5、布局方式，垂直布局

布局的方式要垂直布局

知识点6、绝对路径和相对路径

概念不解释了，只说一下怎么写绝对路径和相对路径

绝对路径直接如/image/post/pic1.jpg，是从根目录直接开始的

相对路径是以当前文件做参照标准，如../../post/pic1.jpg 每个../表示往上返回一级目录。两个点

小技巧，点击图片，然后下面会出现路径，直接复制就好了。既简单又防止出错。