微信小程序的代码构成
小程序的中的文件类型分为四种,分别为：
| 文件后缀 | 作用 |
|---|---|
| .json | 配置文件 |
| .wxml | 模板文件(类似web开发中的HTML) |
| .wxss | 样式文件(类似web开发中的CSS) |
| .js | 脚本逻辑文件，JavaScript。 |
json文件的注意事项
- JSON文件都是被包裹在一个大括号中{}，通过key-value的方式来表达数据。
- JSON的Key必须包裹在一个双引号中。
- JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
- JSON 文件中无法使用注释，试图添加注释将会引发报错。
wxml文件与html文件的区别
- 一些标签名字不同，如div在wxml中叫view，span在wxml中叫text。
- 提供了数据绑定、列表渲染、条件渲染、模板、引用等新功能
wxss相对于CSS的扩充
- 新增加了rpx的计量单位，开发者可以免去换算的烦恼。
- 提供了全局的样式和局部样式。app.wxss可以作用于所有的页面。
- 部分CSS的标签如：div，span等的选择器不在支持，转而支持微信小程序自带的一些标签，如view标签。
微信小程序的目录结构
每个微信小程序都有一致的文件结构。(类似于WPF与WinForm的开发)
主要分为全局配置，和各个页面的配置，还有新增加的sitemap配置：
整体配置
小程序的整体配置需要三个文件来进行说明，并且这三个文件必须放在项目的根目录下:
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表(类似于CSS) |
除了上面三个配置文件外，小程序项目中实际上自带了一个名为project.config.json的文件：该文件的作用为保存你在开发项目时的配置，方便在其他设备上继续开发。
页面配置
小程序的每个页面同样需要一定的文件来进行配置和运行，具体如下：
| 文件 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式 |
一般来说，为了方便，我们把小程序中文件的名字设置的和页面的名字一样。