3.全局配置和页面配置

3.全局配置和页面配置

1 window全局配置 window窗口全局配置用于设置小程序的状态栏、导航条、标题、窗口背景色。下图来源于官方文档，标识了导航栏，下拉刷新窗口和页面区域。

常用的window全局配置属性如下。 其中红色框为配置顶部导航栏样式的属性，蓝色框为配置下拉刷新窗口的样式。

0e2e87a7fb10046ee1906c36a7d8512c.png

1.1 配置全局顶部导航栏样式 全局设置导航栏样式如下：

  （1）顶部导航栏的背景：粉红色
  （2）导航栏标题文字设：掌上生活超市
  （3）导航栏标题文字颜色：黑色

20201105195850766.png

1.2 配置全局下拉刷新背景样式 全局设置下拉刷新窗口样式如下：

  （1）开启全局下拉刷新，开启成功后下拉才会出现下拉刷新窗口
  （2）下拉窗口背景颜色：灰白色
  （3）下拉窗口"..."加载样式颜色：黑色

20201105200207862.png

2 tabBar全局配置 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

77b15f8ca34dc5f8997f602d30b894b3.png

  tabBar常见的全局样式属性如下：

20201105202924866.png

  其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

20201105203016422.png

2.1 配置全局底部tabBar样式 我们在小程序底部创建4个tabBar，从左至右依次为：首页、分类、购物车和我的。其他样式如下：

  （1）设置tabBar的背景颜色为：灰白色
  （2）设置tabBar的字体颜色为：黑色
  （3）文字默认颜色：黑色
  （4）文字选中颜色：粉红色
  （5）新增4个tabBar，并指定文本、选中和未选中图标，并给tabBar设置选中跳转的页面。
  首先，我们需要创建除首页（home）以外的3个page页面：categroy、cart和mine。

20201105203739798.png

然后，添加4个tabBar,并设置tabBar样式。

20201105204919415.png

  上面除了tabBar的图标没有配置，我们需要在"阿里巴巴iconfont"矢量图标库中找到合适的图标，然后下载即可！

20201105213525140.png

​

  可以指定下载某种颜色的图标，和图片类型。

20201105214048740-1639552221601.png

  下载后，将图标拷贝到项目的icons目录下(该文件夹需要新建)。最后再配置4个tabBar的iconPath和selectedIconPath，编译后就可以看到小程序底部导航栏的图标啦！

20201105213833920-1639552238049.png

3 其他配置 详见官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

4 页面配置 页面配置基本上同全局配置。每一个小程序页面也可以使用 .json 文件（如：home.json）来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖全局配置app.json 的 window 中相同的配置项。页面属性配置详见官网：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html