微信小程序开发入门教程（二）

背景

上一篇文章我们已经入门了小程序开发，申请了小程序号，也准备了开发环境，今天我们来分析一下小程序的项目结构。

项目结构

小程序的项目结构如下图所示，小程序的项目主要包含四种文件：

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件
  

配置文件

小程序项目中包含很多的配置文件从不同的层次进行一些属性进行配置。

app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等，下表展示了app.json全部的27个配置项之前建立的测试项目的app.json如下，对于初学者可以不用过于关注每一个配置项，否则可能迷失于配置的海洋里，与此同时也可以看到其中必须的配置项只有两个，很多配置都是针对特定的场景，所以现在只需要对于app.json又一个感性的认识即可，里面包含了对于小程序的全局配置。

下面则展示了我们建立的测试小程序的app.json的内容，这里面包含了必须的配置项。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages字段用于描述当前小程序所有页面路径，一个微信小程序往往包含了多个页面，页面都放在pages目录下，每一个也许都需要在app.json的pages字段下注册，否则跳转时会找不到页面。文件名不需要写文件后缀，框架会自动去寻找对应的 .json, .js, .wxml, .wxss 四个文件进行处理。例如我们测试项目的目录结构如下，包含两个页面index和log。

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

所以我们项目的app.json的pages配置如下

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

与此同时通过entryPagePath配置项配置小程序的启动页，如果没有配置则默认pages中的第一项为启动页。

window字段定义小程序所有页面的顶部背景颜色，文字颜色定义等，其具体的属性如下表所示。
与此同时每个页面也拥有自己的页面的配置文件如index.json配置页面情况，配置内容如果与window中不相同则会覆盖window中的设置。

style是指定使用升级后的weui样式，sitemapLocation是指明sitemap.json的位置，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

我们之前创建的测试项目页面很简单，在实际的项目中可能包含多个tab，其中tab的内容是靠tabBar配置项去配置的。可以通过 tabBar 配置项指定tab栏的表现，以及tab切换时显示的对应页面。其具体属性如下：

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

具体对应关系如下图所示

project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项，其具体配置项如下表：

推荐阅读

微信小程序开发入门教程（一）

最后

有兴趣可以关注公众号QStack，会不定期发布文章的和免费的学习资源。