小程序代码的构成

在我们根据微信官方文档给出的指南，创建一个小程序项目后，会发现小程序中有四中类型的文件：

1. .json后缀文件。
2. .wxml后缀文件。
3. .wxss后缀文件。
4. .js后缀文件。

下面做依次介绍。

JSON配置文件

JSON配置文件在小程序中用于静态配置。在小程序中，JSON配置文件大致有三种：根目录下的project.config.json、小程序根目录下的app.json和pages文件夹下每个文件夹中的page.json（可能不叫这个名字，这里简称一下），如下图所示。我们依次来说明一下它们的用途。

小程序项目文件结构（云开发版本）

小程序配置——app.json

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

app.json中的初始内容如下：

{
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/openapi/openapi",
    "pages/openapi/serverapi/serverapi",
    "pages/openapi/callback/callback",
    "pages/openapi/cloudid/cloudid",
    "pages/im/im",
    "pages/im/room/room"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

这里大概了解两项的含义即可：

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

工具配置——project.config.json

这里的工具是指开发人员的开发工具，微信的开发者们认为每一个开发者都应该有自己对于开发工具的喜好，所以，它们设置了这个project.config.json文件，当我们设置我们的微信开发工具时，我们的设置都会被写入这个文件，这样，当我们更换电脑或者重新安装开发工具后，只要导入项目，微信开发工具就会自动恢复我们之前的个性化设置。

页面配置——page.json

page.json文件是为了解决某个页面独有的配置而设计的。比如，当我们在app.json中设置了顶部颜色后，我们的小程序中的每个页面的顶部都会是蓝色。但是，如果我们需要在某个页面中将顶部定义为红色，我们就需要使用page.json文件了。

WXML模板文件

官方文档指出了WHML在小程序中充当了HTML的角色，用来描述当前页面的结构。当然，学习WXML也是通过类比HTML文件来学习的。

WXML和HTML一样，由标签语法组成，每个标签可以带有各种各样的属性。但WXML和HTML也由不同的地方：

1. 标签名称不一样。在小程序中，HTML中的标签被包装起来，形成了一套快捷的标签语法，我们可以直接通过标签获取许多基本能力，比如：地图、视频等。
2. 添加了wx:if这样的属性和{{}}这样的表达式。小程序开发学习了MVVM框架中的一些优秀的理念，并将这些理念直接包装了起来，放在了标签的属性中。

WXSS样式文件

WXSS和CSS文件一样，用来描述页面的样子。WXSS拥有大部分CSS特性，同时也对CSS做出了补充：

1. 新增了尺寸单位：rpx。rpx是物理像素单位。在移动端开发中，为了兼容更多的手机屏幕，开发者通常需要手动计算物理像素。小程序考虑到这一点，直接使用物理像素进行开发，方便了开发者。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. WXSS仅支持一部分CSS选择器。

JS逻辑脚步文件

js文件用来控制页面的行为，对用户操作做出响应等。