一、小程序代码构成
.json后缀的JSON文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件
JSON 配置
JSON是一种数据格式，在小程序中，起静态配置的作用。
小程序配置 app.json
app.json是当前小程序的全局配置，QuickStart项目中的app.json配置内容如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
pages字段——用于描述当前小程序所有页面路径，为了让wx客户端知道小程序页面定义在哪个目录window字段——定义小程序所有页面的顶部背景颜色，文字颜色定义等
工具配置 project.config.json
工具上做的任何配置都会写入到这个文件，重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会恢复到当时开发项目时的个性化配置，括编辑器的颜色、代码上传时自动压缩等等一系列选项。
页面配置 page.json
表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。独立定义每个页面的属性
JSON 语法
JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，JSON 文件中无法使用注释。
WXML 模板
网页编程采用 HTML + CSS + JS 的组合，其中 HTLM 描述当前页面结构，CSS描述页面样子，JS 处理页面和用户的交互。同理，WXML 充当类似 HTML 的角色
- 提供封装好的标签，如
view,button,text等 - MVVM 的开发模式，把渲染和逻辑分离
例：把一个 Hello World 的字符串显示在界面上：
<text>{{msg}}</text>
JS只需管理状态：
this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。利用 if/else, for等控制能力，以 wx:开头的属性来表达。
WXSS 样式
- 手机设备的屏幕会有不同的宽度和设备像素比，支持尺度单位
rpx，小程序底层自动换算，但存在偏差。 app.wxss作为全局样式，作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效。WXSS仅支持部分CSS选择器
JS 逻辑交互
处理用户的操作：响应用户的点击、获取用户的位置等。
还可以在 JS 中调用小程序提供的丰富的 API，可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等
二、小程序宿主环境
