微信小程序笔记（1）：小程序的代码构成和目录文件结构

微信小程序的代码构成

小程序的中的文件类型分为四种,分别为：

文件后缀	作用
.json	配置文件
.wxml	模板文件(类似web开发中的HTML)
.wxss	样式文件(类似web开发中的CSS)
.js	脚本逻辑文件，JavaScript。

json文件的注意事项

1. JSON文件都是被包裹在一个大括号中{}，通过key-value的方式来表达数据。
2. JSON的Key必须包裹在一个双引号中。
3. JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
   • 数字，包含浮点数和整数
   • 字符串，需要包裹在双引号中
   • Bool值，true 或者 false
   • 数组，需要包裹在方括号中 []
   • 对象，需要包裹在大括号中 {}
   • Null
4. JSON 文件中无法使用注释，试图添加注释将会引发报错。

wxml文件与html文件的区别

1. 一些标签名字不同，如div在wxml中叫view，span在wxml中叫text。
2. 提供了数据绑定、列表渲染、条件渲染、模板、引用等新功能

wxss相对于CSS的扩充

1. 新增加了rpx的计量单位，开发者可以免去换算的烦恼。
2. 提供了全局的样式和局部样式。app.wxss可以作用于所有的页面。
3. 部分CSS的标签如：div，span等的选择器不在支持，转而支持微信小程序自带的一些标签，如view标签。

微信小程序的目录结构

每个微信小程序都有一致的文件结构。(类似于WPF与WinForm的开发)
主要分为全局配置，和各个页面的配置，还有新增加的sitemap配置：

整体配置

小程序的整体配置需要三个文件来进行说明，并且这三个文件必须放在项目的根目录下:

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表(类似于CSS)

除了上面三个配置文件外，小程序项目中实际上自带了一个名为project.config.json的文件：该文件的作用为保存你在开发项目时的配置，方便在其他设备上继续开发。

页面配置

小程序的每个页面同样需要一定的文件来进行配置和运行，具体如下：

文件	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式

一般来说，为了方便，我们把小程序中文件的名字设置的和页面的名字一样。