在前期文章《刷题小程序【程序猿面试宝典】开发（一）| 项目概述与前期准备》中，我们已经创建完小程序，并开通了云服务。如果你未阅览或者哪里不太清除，请先移步到上期进行查看学习。
本期博主将带领各位热爱学习的靓哥靓妹们完成以下工作：
- 创建 【首页、刷题、我的】页面
- 设置 tabBar
- 设置全局配置 window
- 设置页面相关配置
- 自定义全局CSS样式
- 自定义公共class样式
- 小试牛刀，全局设置页面背景色
1、创建页面
接下来就跟随博主的步伐，创建 【首页、刷题、我的】页面。
1、在创建页面之前，我们先把上期创建小程序时自动生成的页面（index、logs）删了，使结构更加清晰。
找到 pages 文件夹，删除 index、logs 页面：
删除 index 会报如下错误：
我们只需要将 app.json 中的 pages 数组中的页面路径删除即可
2、接下来，在 pages 下分别创建上述的几个页面（ pages 鼠标右击 --》 新建文件夹 --》 新建 Page）
三个页面作如下对应：
首页：index 刷题：study 我的：mine
haha，原谅我没过英语四级，名字起的有点 low。
创建完成后：
3、将这几个页面的路径添加到 app.json 的 pages 数组中，
代码语言：javascript复制"pages": [
"pages/index/index",
"pages/study/study",
"pages/mine/mine"
]注：页面创建时会自动添加，检查下路径是否正确就好，没有的话就自己加上。
2、设置 tabBar
接下来给页面配置 tabBar
关于 tabBar 的详细介绍请查看微信小程序官方文档，链接无法跳转也可以看下面截图（来自微信官方文档）。
tabBar基本属性如下：
代码语言：javascript复制"tabBar": {
"color": "", //tab 上的文字默认颜色，仅支持十六进制颜色
"selectedColor": "", //tab 上的文字选中时的颜色，仅支持十六进制颜色
"list": [
{
"pagePath": "", //页面路径，必须在 pages 中先定义
"text": "", //tab 上按钮文字
"iconPath": "", //图片路径
"selectedIconPath": "" //选中时的图片路径
}
]
}1、在 app.json 中跟 window 配置项同级添加以下基本配置：
代码语言：javascript复制"tabBar": {
"color": "#969799",
"selectedColor": "#EC4434",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/icon/index.png",
"selectedIconPath": "images/icon/index-selected.png"
},
{
"pagePath": "pages/study/study",
"text": "刷题",
"iconPath": "images/icon/study.png",
"selectedIconPath": "images/icon/study-selected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/icon/mine.png",
"selectedIconPath": "images/icon/mine-selected.png"
}
]
}2、与 pages 同级新建 images 文件夹
3、在 images 文件夹下继续新建 icon 文件夹，将 tabBar 所需的图标放到此文件夹下，在tabBar 中的 iconPath、selectedIconPath 配置中填写路径就 OK 啦。
4、tabBar设置完成后如下图所示：
3、设置全局配置 window
关于全局配置 window 的详细配置可查看微信小程序开发文档，也可直接看下面截图（来自微信官方）
在 app.json 中将 window 的配置修改为如下：
代码语言：javascript复制"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#EC4434",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white"
}保存 --》编译 效果如下：
4、设置页面相关配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
关于页面的详细配置也可查看小程序官方文档，这里不再重复描述。
观察小程序的【首页、刷题、我的】几个页面，发现每个页面的 navigationBarTitleText 都是“首页”
因此我们需要给除了 index 页面之外的其它页面单独设置 navigationBarTitleText。
找到 pages/study/study 下的 study.json 文件添加如下配置：
“navigationBarTitleText”: “刷题”
同上，找到 pages/mine/mine 下的 mine.json 文件添加如下配置：
“navigationBarTitleText”: “我的”
到这里，每个页面的 navigationBarTitleText 就设置好了，大家可以根据自己的需求修改或添加相关配置。
5、自定义全局CSS样式
为讲求设计的美观性、便修改性，通常我们的应用都会有统一的字体、背景、边框等的样式。
我们也给小程序自定义一些常用的css样式，在 app.wxss 的 page 括号内加入以下配置：
代码语言：javascript复制 /* ------自定义样式开始 ------ */
/*
颜色样式：
1. 主题：--themeColor
2. 背景：--backgroundColor
3. 字体：--fontColor
4. 页面： --pageColor
*/
--themeColor: #EC4434;
--backgroundColor: #FFFFFF;
--fontColor1: #FFFFFF;
--fontColor2: #646566;
--pageColor: rgba(240, 243, 246, 1);
/*
边框样式：
1.边框宽度：--borderWidth
2.边框圆角：--borderRadius
*/
--borderWidth: 3rpx;
--borderRadius: 20rpx;
/*
字体大小：
1. 一级标题：--h1
2. 二级标题：--h2
3. 默认：--defaultFontSize
*/
--h1: 26rpx;
--h2: 25rpx;
--defaultFontSize: 24rpx;
/*
margin:
1. --marginTop
2. --marginLeft
*/
--marginTop: 30rpx;
--marginRight: 30rpx;
--marginLeft: 30rpx;
--marginBottom: 30rpx;
/*
padding:
1. --paddingTop
2. --paddingLeft
3. --paddingRight
4. --paddingBottom
*/
--paddingTop: 30rpx;
--paddingRight: 30rpx;
--paddingBottom: 30rpx;
--paddingLeft: 30rpx;
/*
container容器宽度
containerWidth:
*/
--containerWidth: 710rpx;
/* ------自定义样式结束 ------ */注意：是 page 括号内加入上述配置
自定义全局CSS样式暂时就添加这么多，后面有需求我们再进行添加修改样式，你也可以根据自己的实际情况添加或修改全局CSS样式。
6、自定义公共class样式
我们知道，在给小程序标签设置样式时，通常会给标签定义class，如：
代码语言：javascript复制<view class="font-style"></view>所以我们也给小程序设置一些公共的class，方便后期直接使用。在 app.wxss 的 page 括号外中加入以下配置：
代码语言：javascript复制/* ------自定义class开始 ------ */
/*
每个页面最外部样式类
*/
.container {
width: var(--containerWidth);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.common_flex {
display: flex;
flex-direction: column;
/*默认*/
justify-content: center;
align-items: center;
box-sizing: border-box;
flex-wrap: wrap;
}
/*
公众view样式
*/
.common-view {
width: 100%;
background-color: var(--backgroundColor);
border-radius: var(--borderRadius);
box-sizing: border-box;
}
.common-margin-top {
margin-top: var(--marginTop);
}
.common-margin-right {
margin-right: var(--marginRight);
}
.common-margin-left {
margin-left: var(--marginLeft);
}
.common-margin-bottom {
margin-bottom: var(--marginBottom);
}
.common-padding {
padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);
}
.common-padding-top {
padding-top: var(--paddingTop);
}
.common-padding-right {
padding-right: var(--paddingRight);
}
.common-padding-left {
padding-left: var(--paddingLeft);
}
.common-padding-bottom {
padding-bottom: var(--paddingBottom);
}
/* ------自定义class结束 ------ */注意：是 page 括号外加入上述配置
公共 class 也暂时添加这么多，后面在开发过程中有啥不合适再做相应调整。
7、小试牛刀，全局设置页面背景色
上面加了那么多全局配置，接下来看看怎么使用吧，以全局设置 page 背景色为例。
全局设置 page 背景色非常简单，只需在 app.wxss 的 page 括号内加入以下配置：
代码语言：javascript复制background-color: var(--pageColor);对比看看效果：
而且我们发现每个页面都有相同的背景色了，是不是很方便？
8、结束语
好了，本期介绍就到这里。看看时间都花了一个上午了，更新确实不容易哈，欢迎大家一间三连。
前期先大体做下配置，后面在开发过程中再做相应的修改，开发就是这样，缝缝又补补，不可能一次性到位的。
