微信小程序的整体架构

前言：挖掘微信小程序漏洞而学习准备的

知识点：微信小程序项目的整体架构

微信小程序项目的结构

一个正常创建完的微信小程序的整体结构为7个部分

• pages
• utils
• app.js
• app.json
• app.wxss
• project.config.json
• sitemap.json

这七个部分的作用如下图所示

小知识点：

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

四种类型的json配置文件

根目录的app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2", // 可以去除看下效果，会发现字体风格变化了
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

知识点：

其中app.json中的pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

其中app.json中的window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

根目录的project.config.json

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

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

其中project.config.json中的setting字段一一对应右边的选择栏中，如下图所示

根目录的sitemap.json

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。

注：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

此时如果在setting中将checkSiteMap的值改为false，则显示如下，可以看到就不会出现了

pages目录中对应每个目录的json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和其他pages目录下的xxx.json文件

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。