小程序文件上传返回 json_04. 教你零基础搭建小程序（认识全局配置文件）

上篇文章我们认识了小程序的基本结构目录讲道，一个小程序会包括两种配置文件：

1、全局配置文件 app.json
2、页面自身的配置文件 page.json

本篇文章，我们一起来深入探究app.json（全局配置文件）的相关内容，主要有以下三部分：

（一）app.json（全局配置文件）的基本布局

（二）初识 app.json中的 pages 字段

（三）app.json中的”实际操练“

1、如何在小程序中新增“demo01”页面

2、如何在小程序中新增“demo02”等页面

3、如何实现打开小程序后，直接显示某一特定页面

（一）app.json（全局配置文件）的基本布局

点击下方链接，直接移步微信小程序官网，了解小程序配置文件。

小程序配置 | 微信开放文档​developers.weixin.qq.com

打开链接后的你，一定是这个亚子~

哈哈，小朋友，你是否有很多问号？？

所以，你还是乖乖看我下面的讲解，看完之后，你会是这个亚子

废话不再多说，直接上干货安排~~

ps:本篇文章以及以后，会涉及很多代码（code），为了让大家加深印象和区分，我会用斜体显示。

首先，app.json文件里面长这样：

上图中，

pages 字段（图2）：用来说明当前小程序的所有页面路径，让微信app知道小程序页面定义在哪个目录；

图2

window 字段（图3）：定义小程序所有页面的顶部背景颜色，文字颜色等

图3

完整的配置信息请点击如下网址（学霸专用，学渣乖乖往下看讲解扒~）

全局配置 | 微信开放文档​developers.weixin.qq.com

（二）初识 app.json中的 pages 字段

pages 字段包括2个字段

index l ogs

说大白话就是，pages 字段有2个子页面。

这跟资源管理器中 pages文件夹 所包括的内容一致，如下图。

敲黑板：

index 和 logs 后面不要加任何后缀名，保持她们的“素颜状态”，否则“程序猿”就不认识她们了（小程序本身识别不了）~~

（三）app.json配置文件中的”实际操练“

初步认识全局配置文件的内容和结构后，让我们一起在app.json中兴风作浪（实际操作）起来吧~~做一只快乐的程序猿~~

1、如何在小程序中新增“demo01”页面

有童鞋看到“demo”, 两手一摊，很多问号

何为“demo”？这里看看网友们通俗易懂的解释吧~~

demo，即 demonstration , 程序猿世界里指的是 程序功能的示例代码，可以理解为学小学造句中的“例句”。

那我们想在小程序中新增“demo01”页面，方法有两种：

方法一：

这是没看我专栏的小朋友的做法。

（1）右键“pages”文件夹--点击“新建文件”--输入名称“demo01”-出现“demo01”文件夹
（2）右键“demo01”文件夹--依次新建 "demo01.js”、“demo01.json”、"demo01.wxml”、"demo01.wxss”四个文件

方法二：

这是学习了我专栏的大神的做法。

将原先pages 字段的代码

"pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],

修改为以下代码

"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/demo01/demo01"
 ],

快捷键”ctrl+s“保存一下，就会出现如下神奇的画面：

这样是不是就一箭5雕啦? 妈妈再也不用担心的我的学（zhi）习 ( shang) 啦~~~

解读具体的步骤：

（1）" pages/logs/logs" 后添加 “，”
（2）增加 "pages/demo01/demo01" 这行代码，
（3）按下快捷键“ctrl+s”保存一下

碎碎念（拿出小本本儿记下来！）：

（1） “，”一定是货真价实的英文逗号，中文逗号程序猿不认~
（2）每次修改后的代码一定要 保存（ctrl+s ），
不然你就是在自嗨，小程序界面完全没有改变~

2、如何在小程序中新增“demo02”等页面

一生二，二生三，三生万物……

我们有了“demo01”，就肯定还想要“demo02”，“demo03”，“demo04”……

怎么操作呢？继续往下看~~

将代码由这样

变成介样儿

解读具体的步骤：

（1）删除" pages/demo01/demo01" 后的 “，”
（2）添加 "pages/demo02/demo02 “
（3）按下快捷键“ctrl+s”保存一下
（4）最终界面如下图。

"demo03"等，就复制粘贴以上步骤就好了~~

3、如何实现打开小程序后，直接显示某一特定页面

成功新建“demo01”和她的小伙伴们后，
如果想实现一打开小程序，就直接显示“demo01”界面的话， 应该作何改变呢？ 这里， 只需一步，轻松搞定！

将代码由介样儿

变成介样

咳咳，不好意思，上面2张图过于雷同， 但是，其实就变化了2个地方， 请看下图：

解读具体的步骤：

（1）删除" pages/logs/logs" 后的 “，”
（2）复制粘贴 "pages/demo01/demo01" 这行代码至最前面，添加“，”
（3）按下快捷键“ctrl+s”保存一下
（4）最终界面如下图。

深度解读（继续记笔记）：

说白了，“demo01”想要c位，那就要排在最前面！
而且，学习了这么久（3min）, 大家有没有发现，
只要你不是最后一行的code, 一行结束后，就需要添加英文逗号“，”
就像写作文一样，只要主人公这句话没说完，中间的停顿就全是逗号

本篇文章就先讲到这里啦，再来复习一下主要内容

（一）app.json（全局配置文件）的基本布局

（二）初识 app.json中的 pages 字段

pages 字段包括2个字段 ：index 和 logs

（三）app.json中的实操

1、如何在小程序中新增“demo01”页面

2、如何在小程序中新增“demo02”等页面

3、如何实现打开小程序后，直接显示某一特定页面

ending~~~~