刷题小程序【程序猿面试宝典】开发（二）| 页面创建、页面配置、全局配置

微信公众号【C you again】持续更新所有章节，欢迎查看

下载本期源码请在公众号【C you again】回复“st-002”

在前期文章《刷题小程序【程序猿面试宝典】开发（一）| 项目概述与前期准备》中，我们已经创建完小程序，并开通了云服务。如果你未阅览或者哪里不太清除，请先移步到上期进行查看学习。

本期博主将带领各位热爱学习的靓哥靓妹们完成以下工作：

1. 创建 【首页、刷题、我的】页面
2. 设置 tabBar
3. 设置全局配置 window
4. 设置页面相关配置
5. 自定义全局CSS样式
6. 自定义公共class样式
7. 小试牛刀，全局设置页面背景色

1、创建页面

接下来就跟随博主的步伐，创建 【首页、刷题、我的】页面。

1、在创建页面之前，我们先把上期创建小程序时自动生成的页面（index、logs）删了，使结构更加清晰。

找到 pages 文件夹，删除 index、logs 页面：

删除 index 会报如下错误：

我们只需要将 app.json 中的 pages 数组中的页面路径删除即可

2、接下来，在 pages 下分别创建上述的几个页面（ pages 鼠标右击 --》 新建文件夹 --》 新建 Page）

三个页面作如下对应：

首页：index
刷题：study
我的：mine

haha，原谅我没过英语四级，名字起的有点 low。

创建完成后：

3、将这几个页面的路径添加到 app.json 的 pages 数组中，

"pages": [
    "pages/index/index",
    "pages/study/study",
    "pages/mine/mine"
  ]

注：页面创建时会自动添加，检查下路径是否正确就好，没有的话就自己加上。

2、设置 tabBar

接下来给页面配置 tabBar

关于 tabBar 的详细介绍请查看微信小程序官方文档，链接无法跳转也可以看下面截图（来自微信官方文档）。

tabBar基本属性如下：

"tabBar": {
    
    
    "color": "",  //tab 上的文字默认颜色，仅支持十六进制颜色
    "selectedColor": "",   //tab 上的文字选中时的颜色，仅支持十六进制颜色
    "list": [
      {
    
    
      "pagePath": "",  //页面路径，必须在 pages 中先定义
      "text": "",  //tab 上按钮文字
      "iconPath": "",  //图片路径
      "selectedIconPath": ""  //选中时的图片路径
    }
  ]
  }

1、在 app.json 中跟 window 配置项同级添加以下基本配置：

"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 啦。

上述配置的图标来自阿里巴巴图标库，官网：https://www.iconfont.cn/，你也可以在这里选自适合自己的图标。

4、tabBar设置完成后如下图所示：

3、设置全局配置 window

关于全局配置 window 的详细配置可查看微信小程序开发文档，也可直接看下面截图（来自微信官方）

在 app.json 中将 window 的配置修改为如下：

"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 括号内加入以下配置：

 /*  ------自定义样式开始 ------   */

  /* 
   颜色样式：
   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，如：

<view class="font-style"></view>

所以我们也给小程序设置一些公共的class，方便后期直接使用。在 app.wxss 的 page 括号外中加入以下配置：

/*  ------自定义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 括号内加入以下配置：

background-color: var(--pageColor);

对比看看效果：

而且我们发现每个页面都有相同的背景色了，是不是很方便？

8、结束语

好了，本期介绍就到这里。看看时间都花了一个上午了，更新确实不容易哈，欢迎大家一间三连。

前期先大体做下配置，后面在开发过程中再做相应的修改，开发就是这样，缝缝又补补，不可能一次性到位的。

因本人技术有限，不管是设计还是编码很多地方都有问题，欢迎各位大佬批评指正。也特别欢迎大家通过公众号【C you again】找到我，一起讨论学习。

一起期待下期内容，期待【程序猿面试宝典】小程序与大家见面。可能做的不是很好用，但我会享受从设计到开发的整个过程，一点点从零碎到完整的经历。

9、下载本期源码

本期源码已放到网盘，若有需要，请在公众号【C you again】回复“st-002”自行下载