2.1 页面结构与配置
在这一章，我们在不使用云开发的情况下，会一步步开发出一个静态的小程序。为了学习和讲解的方便，大家可以重新建一个项目，在创建项目时，也可以勾选“不使用云服务”。
在了解以下知识时，大家只需要结合开发者工具的编辑器对照着介绍，一一展开文件夹、用编辑器查看文件的源代码，大致浏览一下即可。这就是实战学习的方法（和看书、看视频的学习方法不同），千万不要死记硬背哦，你以后用多了自然就记住啦~
1、小程序的文件结构
在开发者工具的编辑器里可以看到小程序源文件的根目录下有app.js、app.json和app.wxss，这是小程序必不可少的三个主体文件，下面我们来大致了解一下小程序文件结构（只需要大致了解就可以啦~不理解也没有关系）。
app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等；
app.wxss：小程序的公共样式表，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等样式；
app.js：小程序的逻辑（这个可以先放着，不用管）
pages文件夹：这里存放着小程序的所有页面，展开pages文件夹就可以看到有index和logs两个页面文件夹；
小任务：在结合开发者工具实战了解了上面的知识之后，你明白了哪个文件夹是小程序的根目录吗？
2、小程序的页面组成
在每一个页面文件夹里都有四个文件，这四个文件的名称都是一样的，它们分别为：
json文件，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；
wxml文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；
wxss文件，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；
js文件，这个是控制小程序页面的逻辑（这个可以先放着，不用管）
2.1.2 小程序的全局配置
在前面我们已经提到，app.json可以对整个小程序进行全局配置，而配置的依据就需要我们参考技术文档了。
技术文档：小程序全局配置
打开上面的小程序全局配置技术文档，里面会有很多你看不懂的名称，这是非常正常的，大家也不需要记，只需要花两三分钟时间快速浏览一下即可，后面我们会教大家如何结合技术文档来实战学习。
1、json语法
在对小程序进行配置之前，可以使用开发者工具打开app.json文件，对照着下面的json语法来进行理解：
大括号 {}保存对象 ，我们来看一下app.json，哪些地方用到了大括号{}，{}里面就是对象；
中括号 []保存数组 ，我们可以看到中括号[]里有“pages/index/index”等（这是小程序页面的路径），那这些页面路径就是数组啦；数组里的值都是平级的关系；
各个数据之间由 英文字符逗号, 隔开，注意这里的数据包括对象、数据、单条属性与值，大家可以结合app.json 仔细比对逗号,出现的位置 ，平级数据的最后一条数据不要加逗号,，也就是只有数据之间才有逗号。
字段名称（属性名）与值之间用**冒号:**隔开，字段名称在前，字段的取值在后；
字段名称用 双引号
””给包着；
注意，这里所有的标点符号都需要是英文状态下的，也就是我们经常听说的全角半角里的半角状态，不然会报错哦。很多之前没有接触过编程的童鞋经常会犯这样的错误，一定要多多注意！ 当我们要输入编程里的标点符号时，一定要先确认一下，你的输入法是汉语形态，还是字母形态，如果输的是汉字形态，一定要切换哦~
2、设置小程序窗口表现
使用开发者工具打开app.json文件，可以看到如下代码里有一个window的字段名（如前面所说，字段名要用双引号””包着），它的值是一个对象（如前面所说，{}大括号里的就是对象），可见对象可以是一组数据的集合，这个集合里包含着几条数据。
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"},
这些就是window配置项，可用于设置小程序的状态栏、导航条、标题、窗口背景色。
小任务：打开小程序全局配置查看backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle的配置描述（大致了解即可）。
使用开发者工具的编辑器将以上属性的值改成如下代码（这里的backgroundTextStyle只有在设置了下拉刷新样式时才会比较明显，以后会介绍）
"window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#1772cb", "navigationBarTitleText": "云开发技术训练营", "navigationBarTextStyle": "white" },
添加完成之后记得保存代码哦，文件修改没有保存会在标签页有一个小的绿点。可以使用快捷键（同时按）Ctrl和S来保存（Mac电脑为Command和S）。
然后点击开发者工具的编译图标，就能看到更新之后的效果啦，也可以点击预览，使用手机微信扫描生成的二维码查看实际效果。
小任务： navigationBarBackgroundColor值是 #F8F8F8， #1772cb，这是十六进制颜色值，它是一个非常基础而且用途范围极广的计算机概念，大家可以搜索了解一下：1、如何使用电脑版微信、QQ的截图工具取色（取色颜色会有一点偏差）；2、RGB颜色与十六进制颜色如何转换；
2.1.3 新建小程序页面
新建页面的方法有两种，一种是使用开发者工具在pages文件夹下新建；还有一种是通过app.json的pages配置项来新建，我们先来看第2种方法。
1、通过app.json新建页面
pages配置项是设置页面的路径，也就是我们在小程序里写的每一个页面都需要填写在这里。使用开发者工具打开app.json文件，在pages配置项里新建一个home页面（页面名称可以是任意英文名），代码如下：
"pages/home/home","pages/index/index","pages/logs/logs"
大家写的时候可以回顾一下json语法，每个页面后都记得要用逗号,隔开，如果你的文件代码写错了，开发者工具会报错。
在模拟器就能看到我们新建的这个首页了，会显示如下内容：
pages/home/home.wxml
大家再来看看小程序的文件夹结构，是不是在pages文件夹下面多了一个home的文件夹？而且这个文件夹还自动新建了四个页面文件。
我们删掉文件目录下的index和logs文件夹，然后把app.json的pages配置项修改为：
"pages": [ "pages/home/home", "pages/list/list", "pages/partner/partner", "pages/more/more"],
也就是我们删掉了index和logs页面配置项的同时，又新增了三个页面(list、partner、more，这三个页面名称大家可以根据自己需要来命名)。
小任务： 这些新建的页面文件都在电脑上的什么呢？比如在开发者工具右键点击home文件夹或者home.wxml，选择“在硬盘打开”就可以看到该文件在我们电脑的文件夹里什么的位置啦
2、小程序的首页
在pages配置项的技术文档里有这样一句：“数组的第一项代表小程序的初始页面”，是什么意思呢？
技术文档：pages配置项
使用开发者工具打开app.json，把之前建好的”pages/list/list”剪切粘贴到”pages/home/home”的前面，也就是把list页面放到了数组的第一项，再来模拟器里看一下小程序的变化。原来pages配置项的第一项就是小程序的首页啦。
小任务： 现在我们来使用新建页面的第1种方法，使用开发者工具在pages文件夹下新建页面。首先选中pages文件夹，然后点击上方的**+**号或鼠标右键，新建目录，然后输入目录名为post，然后再选中post文件夹，新建页面，页面名也为post，新建之后看看pages配置项的变化。
2.1.4 了解配置项的书写方式
在前面我们已经了解了window配置项、pages配置项，在技术文档小程序全局配置了解到window、pages这些都是全局配置项的属性，全局配置项的属性还有tabBar、networkTimeout、usingComponents、permission等，大家可以在技术文档里了解每个属性的描述，大致了解他们的功能。
这里我们来宏观了解一下配置项的书写语法，大家可以结合下面这段代码来理解app.json的写法，免得配置错误：
每个配置项比如pages、window都用**引号””**包住，**冒号:**后面是配置项的属性与值；
每个配置项之间用逗号,隔开，最后一项没有逗号，配置项是平级关系，不要把tabBar配置项写到window配置项里面了；
配置项里面的数组或对象的最后一项也没有逗号
书写时注意缩进，大括号{}、中括号[]都是成对书写，即使是嵌套时也不能有遗漏}或]；
{ "pages": [ "pages/home/home", "pages/list/list", "pages/partner/partner", "pages/more/more" ], "window": { "navigationBarTitleText": "云开发技术训练营" }, "tabBar": { "color": "#7A7E83", "selectedColor": "#13227a", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/home/home", "text": "首页" }, { "pagePath": "pages/list/list", "text": "活动" }, { "pagePath": "pages/partner/partner", "text": "伙伴" }, { "pagePath": "pages/more/more", "text": "更多" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ]}
2.1.5 配置tabBar配置项
在很多App的底部都有一个带有小图标的切换tab，比如手机微信App底部就有微信、通讯录、发现、我四个tab，这个小图标就是icon，整个呢就是tabBar，小程序也可以有，需要我们在app.json里配置tabBar配置项。
1、icon下载
在官方技术文档里我们了解到icon 大小限制为40kb，建议尺寸为81px * 81px（大一点是可以的），不懂设计icon的童鞋可以去矢量图标库去下载。（注意下载的格式要是png哦）
icon资源：iconfont阿里巴巴矢量图标库
大家可以留意下手机微信的tabBar的每一个icon其实是一组两个，也就是选中时的状态和没有选中时的状态，他们的颜色也是不一样的，而在iconfont里大家除了选择图标还可以选择不同的颜色来下载哦。比如我们要让tabBar有四个切换tab，那么我们就需要下载4个icon的两种配色共8张图片。
使用开发者工具在模板小程序的根目录下新建一个image的文件夹，把命名好的icon都放在里面，这个时候你的文件夹结构如下：
小程序的根目录 ├── image │ ├── icon-tab1.png │ ├── icon-tab1-active.png ├── pages ├── utils ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── sitemap.json
icon的配色最好是一明一暗，而且与你的小程序的整体颜色风格保持一致，这样切换起来才不会突兀；选择的这4个icon的风格最好一致，不然tabBar就不会好看啦。icon的名称最好也一致，比如home对应的icon可以为home.icon和home-active.icon。
注意：图片的名称必须是英文，不要用中文。页面也好、文件也好、文件夹的名称也好，都要使用英文，里面的标点符号也必须是英文字符。
2、配置tabBar配置项
通过tabBar配置项，可以设置tabBar的默认字体颜色、选中过的字体颜色、背景色等。
技术文档：tabBar配置项
通过技术文档，我们先大致了解color、selectedColor、backgroundColor的意思。然后使用开发者工具打开app.json在window配置项后面新建一个tabBar配置项，代码如下：
"tabBar": { "color": "#7A7E83", "selectedColor": "#13227a", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/home/home", "iconPath": "image/icon-tab1.png", "selectedIconPath": "image/icon-tab1-active.png", "text": "首页" }, { "pagePath": "pages/list/list", "iconPath": "image/icon-tab2.png", "selectedIconPath": "image/icon-tab2-active.png", "text": "活动" }, { "pagePath": "pages/partner/partner", "iconPath": "image/icon-tab3.png", "selectedIconPath": "image/icon-tab3-active.png", "text": "伙伴" }, { "pagePath": "pages/more/more", "iconPath": "image/icon-tab4.png", "selectedIconPath": "image/icon-tab4-active.png", "text": "更多" } ]}
这里有一个比较重要的属性就是list，它是一个数组，决定了tabBar上面的文字、icon、以及点击之后的跳转链接。
pagePath必须为我们在pages配置项里建好的页面
text是tab按钮上的文字
iconPath、selectedIconPath分别为没有选中时的图片路径和选中时的图片路径。
小任务： 你知道应该如何制作一个底部没有tabBar的小程序吗？要让tabBar没有icon，应该如何配置？给tabBar添加一个position属性，值为top，小程序在界面上会有什么变化？再给小程序新增几个页面（不添加到tabBar上），我们应该如何在模拟器看到页面的内容？
2.1.6 小程序的页面配置
使用打开一个页面的页面json文件，比如home的home.json，在json里面新建一些配置信息，如下所示。
技术文档：小程序页面配置
{ "usingComponents": {}, "navigationBarBackgroundColor": "#ce5a4c", "navigationBarTextStyle": "white", "navigationBarTitleText": "小程序页面", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}
配置的属性与值的含义我们可以结合实际的效果以及技术文档来了解。
小任务： 了解一下给小程序的页面配置前和配置后，页面哪些地方变动了？你是否对技术文档里“页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。”有了一定的认识？
