【前言】
上节课中，我们讲解了响应式长度单位rpx，也初步设置了一个新的页面：weekly页（每周推荐页面），接下来，我们将在这个新的页面中讲解更多东西。
【全局导航样式栏】
在上一节课中，我们输入完最后的代码，编译后出现了一个新的页面——每周推荐页，但我们发现了一个问题：之前的about页的导航栏是白底黑字的，而此时的每周推荐的导航栏则是黑底白字的，我们如果要统一风格，该怎么办呢？
大家最容易想到的方法应该是把配置about页面的样式复制一份，再配置到每周推荐的json文件上进行配置，的确，这是个可行的方法，但是我们要考虑这样一个问题，如果我们有几十个页面，难道每个页面都要像这样复制一遍吗？如果我想修改每个页面的字体大小、背景颜色等等，是不是得改几十次呢？
其实，我们有更加方便的方法：在全局设置中进行配置：
app.json：
{"pages":["pages/weekly/weekly","pages/about/about"],"window":{"navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black"}}
此处，我们app.json中的window属性中进行白底黑字的配置，编译后我们发现weekly页面的导航栏也变成白底黑字了，说明我们的配置是有效的。
当然，如果说我们想把某个页面的导航栏的字体变大，那么我们可以单独对那个页面进行设置，也就是说，如果某个页面的那个属性拥有自己单独的配置，它将不再使用全局变量中对其的配置。
【举个例子：】
app.json：（我们在window属性中加入标题“电影周周看”）
"window":{"navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black","navigationBarTitleText":"电影周周看"}编译后我们发现weekly页面的标题并没有变化，仍为“每周推荐”，而当我们把weekly.json中的标题属性删去，编译后我们发现，weekly页面的标题变为了“电影周周看”。
好，全局导航样式栏的介绍就到这里，接下里我们对每周推荐的页面进行具体的配置。（此处先把刚刚删去的weekly页中的标题补回去）
weekly.json：
{"navigationBarTitleText": "每周推荐"}【weekly页面配置】
weekly.wxml：
<view class='container'><text>本周推荐</text><image src='https://qidian.qpic.cn/qdbimg/349573/1115277/180' ></image><text>斗罗大陆</text><text>心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！</text></view>weekly.wxss：（注意，此处的container我们虽然在about.wxss中配置过，但因为一个wxss对应一个wxml，about页的wxss没办法对应weekly的wxml，所以我们必须将about.wxss中的container拷贝过来。）
.container{background-color:#eee; /*设置背景颜色*/height:100vh; /*设置该容器的高度为页面的100%*/display: flex; /*将该容器变成flex-container*/flex-direction: column; /*将页面布局从横向(默认)改为纵向*/justify-content: space-around;/*使容器内各部分均等分割*/align-items: center; /*设置水平居中*/}
编译后，效果如上图。
【tabBar】
前面我们讲过在app.json中直接修改pages属性中的第一个路径，来暂时性地显示我们要的每周推荐页面，但实际应用中，我们总需要在页面下方加一个底部导航方便主页面间进行跳转。
效果图如下：
这里呢，我们需要先自行搜索一些合适的图标，在文章末尾我也会把所用图标贴出来。
【代码】
app.json：（注意，此处新增的tabBar是与pages和window并列的）
{"pages":["pages/about/about","pages/weekly/weekly"],"tabBar":{"list":[{"text": "每周推荐","pagePath": "pages/weekly/weekly","iconPath": "images/icons/read.png","selectedIconPath": "images/icons/read_active.png"},{"text": "关于","pagePath": "pages/about/about","iconPath": "images/icons/people.png","selectedIconPath": "images/icons/people_active.png"}],"color":"#000","selectedColor":"green"},"window":{"navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black","navigationBarTitleText":"电影周周看"}}代码详解：
我们只看tabBar部分，list中，每个{}内为一个底部导航，我们这里总共设置了两个，一个跳转到关于页面，一个跳转到每周推荐页面。
对于list中的一个{
text为文字；pagePath为页面路径；iconPath为图标路径；这里要注意，selectedIconPath是被选中后的图片，而
iconPath是选中前的图片。
}
下方与list并列的“color”是选中前的颜色，我们设置为了黑色，而选中后的字体颜色“selectedColor”我们则设置为了绿色。
此处我们要将准备好的四个图标命好名字，然后打开硬盘拷贝到images文件夹的icons文件夹中（要自己新建这个文件夹）。
图标下载地址：
链接：https://pan.baidu.com/s/1PuF2m4m_pZVo4HwnPwBWWQ 密码：3wxo