小程序代码构成

在通过开发者工具快速创建项目之后，发现项目里有不同类型的文件：

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

JSON 配置

在小程序中，JSON 扮演的是静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

• 小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

我们简单说一下这个配置各个项的含义:

1. pages 字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window 字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

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

• 页面配置 page.json
  这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

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

WXML 模版

WXML 充当的就是类似 HTML 的角色。
WXML 与 HTML 的区别：

1. 标签名字不太一样：
   小程序的 WXML 用的标签是 view, button, text 等等
2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

JS 逻辑交互

可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

参考链接

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html