教女朋友微信小程序（三）

本章内容

小程序的配置文件以及一些基本配置的介绍

前言

学习本章的时候默认大家都了解什么是JSON，JSON是一种数据格式，并不是编程语言，如果还不知道的话可以看看这篇文章：JSON的浅谈和基本介绍。

由于不可能将所有内容都讲解完，所以只会挑一些本人觉得重要的来讲，其他没有涉及到的内容可以自行查阅官方文档。

小程序的配置文件

一个小程序会包括最基本的两种配置文件，一种是全局的app.json和页面自己的page.json。

全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界面表现、网络超时时间、底部 tab 等。我们一开始新建好的项目里的app.json是长这个样子的：

我们来看看这些字段都是什么意思：

• pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。在上一章我们也讲过：pages数组里的第一个元素代表的就是首页的页面路径，在这里的页面路径不用加后缀名的，请注意！
• window字段：定义小程序所有页面的顶部背景颜色，文字颜色定义等。在以后如果想改一改每个页面的导航条、标题和窗口主题颜色的话，来这里配置就对了。不仅如此，开启全局的下拉刷新也是在这里配置的。
• style字段：由于微信客户端从 7.0 开始，UI 界面进行了大改版，小程序也进行了基础组件的样式升级，app.json 中配置 "style": "v2"可表明启用新版的组件样式。如果把这一行去掉就会使用旧版组件样式。 还是新版的好看一丢丢~~
• sitemapLocation字段：指明 sitemap.json 的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件。至于sitemap.json文件用来干嘛的，稍后介绍。

app.json文件里的window配置项

接下来我们来看看window字段里可以配置些啥，建议大家多去尝试去看着官方文档改一改配置，自己瞎改都成，试得越多，见识越多，懂得的也就越多。

navigationBarBackgroundColor

这个属性描述的是导航栏的背景颜色。哪里是导航栏？我不知道，咱们改一下试一下不就知道了吗？他一开始的值是#fff也就是白色，然后我们给它来个“男人的颜色”：

编译成功后查看模拟器，会发现，原来所谓的导航栏指的就是上面那部分：

注意： 这里的值必须是16进制颜色码，不能是“red”、“white”、“black”等。
在这里笔者推荐一个网站：Color Hunt，它里面有很多很漂亮酷炫的配色方案，在设计UI界面的时候可以参考一下里面的配色方案，可能会让你的界面更好看哦~~

navigationBarTextStyle

这个属性描述的是导航栏标题颜色。一开始它的值是"black"也就是黑色，那让我们把他改成白色"white"试一下，然后就发现标题的字体颜色变成了白色：

注意： 这里的属性值仅支持 black 和 white ，也就是说你写别的什么“red”、“green”是不行的。

navigationBarTitleText

刚刚我们改了标题的颜色，那么可不可以更改标题的文字内容呢？当然可以，只要把这个属性的值改成你想要的就行了。

backgroundColor

一开始看这个命名还以为是下面页面部分的背景颜色，结果怎么改都没反应，其实这个属性指的是下拉窗口的背景颜色。为了演示这一属性，我们需要先加入一条属性：enablePullDownRefresh，让它的值为true：

这一个属性表示：是否开启全局的下拉刷新。给了他true就是表示开启的意思，它的默认值是false。这时我们可以在模拟器试一下，下拉刷新：

这时我们再加入我们的backgroundColor，给它来个“姨妈红”，编译、模拟器下拉刷新，然后我们就知道这个属性描述的是哪里的背景颜色了：

同样滴，这里的颜色值也只能是16进制颜色码

backgroundTextStyle

在看完上一个属性之后，这个属性也可以来搞一搞，它表示的是下拉loading的样式，我们发现它一开始的值是light，那我就把它改成dark看看效果：

注意： 这个属性仅仅支持dark 和 light。

pageOrientation

这个属性是屏幕选转设置，它有三个值：auto（自动的）、portrait（竖向的，默认值）、landscape（横向的）。我们在加入这个属性并使它为auto之后会发现模拟器右上角多了一个屏幕旋转的按钮：

点击该按钮，模拟器就会模拟手机屏幕横屏的情况：

其他两个值看意思就能猜出来有啥用了，一个竖向，一个横向。

以上属性也是可以用在页面配置文件里的，关于页面配置文件相关知识将在后文提到。

app.json文件里的tabBar配置项

小程序里内置了tabBar的功能，我们可以在全局配置文件里配置。如果你的小程序里有几个页面需要来回频繁地切换显示，使用tabBar是一个不错的选择。下图是利用当前项目里的首页和日志页面做的一个tabBar：

点击下方的不同tab可以切换显示页面。

接下来我们就来看看怎么创建一个tabBar：

首先我们在app.json文件中，新增tabBar配置项：

list属性是我们必须要配置的，表示的是tab的列表，是一个对象数组，里面存放的就是一个个的tab页面。要注意一点：tab最少2个，最多5个。也就说像我们现在代码里的只有一个tab还不行，我们干脆再复制一份，让它里边有两个tab：

接下来就要配置list里面的属性了，首先是pagePath，表示的是tab的页面路径，我们在两个tab的该属性里把页面路径分别改为我们的首页和日志页面：

text属性指的是tab的按钮文字，我们把他们改成我们想要的文字：

然后我们可以给我们的tab按钮添加图标，iconPath、selectedIconPath 两个属性就是用来指定图标的路径的，selectedIconPath 是选中时候的图标，iconPath是未选中时候的图标，我用到的图标是下面的四个，有需要的可以自行下载：

home.png
_home.png
my.png
_my.png

在当前项目根路径下新建一个icon文件夹，然后把图标都扔到这个文件夹里面。

然后在iconPath和selectedIconPath指定图标路径，编译之后tabBar创建成功：

请注意： tabBar的图标只能是本地图片，不能是网络图片，且大小限制为40kb

想把tabBar的背景颜色改成骚粉？可以，通过backgroundColor属性改就行了：

想把tabBar上的未选中和选中的文字颜色改得更花里胡哨？可以，分别通过color和selectedColor属性改就行了：

也许大家都注意到了tabBar上边是有一条黑色的边框的：

我们可以通过borderStyle属性更改，但是仅仅支持black和white。

我们还可以指定让tabBar在屏幕顶部还是底部（默认值）显示，通过position属性来配置（仅仅支持top和bottom），请注意，在顶部的tabBar是不会显示图标的：

这个在顶部显示的tabBar看上去很奇怪，没法铺满，估计是微信开发者工具更新之后的一个bug，本人之前学习的时候是会正常显示的，但是如果是真机预览或者调试的话，在手机上显示是正常铺满的。

至此，tabBar的基本使用我们已经掌握了，让我们用一张图来总结一下tabBar一些属性分别对应哪里：

全局配置文件里可以配置的内容十分的多，详情还是得去看官方文档有些属性我们开发中不常用到，等到要用的时候再去看也不迟。

页面配置

页面配置文件就是用来单独定义每个页面的属性的，页面配置文件里的一些基本配置属性和全局配置文件里window配置项里的属性一样的，会配置app.json基本就会配置页面配置文件了。请注意，在页面配置文件中的属性会覆盖全局配置文件里相同的内容，举个例子：我们刚刚在app.json中给window配置项里给导航栏设置了颜色：

"navigationBarBackgroundColor": "#32CD32"

我们可以在当前项目的pages文件夹下找到logs页面里的logs.json文件，给它设置另外一个颜色：

"navigationBarBackgroundColor": "#0094ff"

然后就会发现日志页面里的导航栏也是就是另外的颜色了：

sitemap配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。换句话说，现阶段我们只是简单了解一下这个配置文件有什么用就行了，当我们真正去发布我们的小程序的时候再去查阅官方文档也不迟。

以下这一段代表的是所有页面都会被微信索引：

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

项目配置project.config.json

项目配置文件 project.config.json是用来对项目进行配置的。其实它里面的配置信息绝大多数就是我们在微信开发者工具右上角的“详情”里看到的那些信息，并且我们往往不会直接改动这个文件去配置，我们在“详情”里面改，这个文件会自动发生变化：

这一章的小程序配置文件就讲到这里了，下一章将介绍WXML模板语法。