美文网首页微信小程序
4-4 构建新闻列表 (上)

4-4 构建新闻列表 (上)

作者: 留白_汉服vs插画 | 来源:发表于2017-11-19 21:03 被阅读17次

    知识点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 每个../表示往上返回一级目录。两个点

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

    相关文章

      网友评论

        本文标题:4-4 构建新闻列表 (上)

        本文链接:https://www.haomeiwen.com/subject/hzbrpxtx.html