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

?

文章目录

    • 1、创建页面
    • 2、设置 tabBar
    • 3、设置全局配置 window
    • 4、设置页面相关配置
    • 5、自定义全局CSS样式
    • 6、自定义公共class样式
    • 7、小试牛刀,全局设置页面背景色
    • 8、结束语
    • 9、下载本期源

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

  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);

对比看看效果:

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

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

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

?

上一篇:小程序实现请求接口数据


下一篇:小程序之地址四级联动