九层之台起于垒土，想要完成一个小程序项目，当然要明白小程序是有哪几部分构成的，及每一部分各自所起的作用、这几部分之间的关联。弄清楚的了这些问题才能明白小程序的实现原理。
上节预热一种使用微信开发者工具新建了一个helloworld的小程序，如果你的环境还没搭建，也不知道如何建立第一个小程序项目，请参考：微信小程序预热一
1.小程序代码构成
这里创建了建了一个 QuickStart 项目，界面如下：
-
整体构成
从上图可以知道项目中生成了4种不同类型的文件，分别是：
件类型 作用 json JSON 配置文件 ，扮演静态配置角色 wxml WXML 模板文件，类似html角色 wxss WXSS 样式文件 ，类似css角色 js JS 脚本逻辑文件，类似javascript角色 小程序项目由上面4种类型的文件组成。
-
json文件
app.json：当前小程序的全局配置。包含所有页面路径、界面表现、网络超时时间、底部Tab等。 详情点这里
project.config.json：工具的个性化配置，如界面颜色、编译配置等。 详情点这里
page.json：页面配置，用来设置页面的整体样式等。详情点这里 -
WXML模板
WXML（WeiXin Markup Language）是框架设计的一套标签语言，在小程序中，类似HTML的角色，结合基础组件、事件系统，可以构建出页面的结构如下:
-
WXSS样式
WXSS具有css的大部分属性，它新增了尺寸单位，提供了全局样式和局部样式。如下：
2.小程序运行环境
-
渲染层和逻辑层
小程序运行环境分为渲染层和逻辑层。WXML模板和WXSS样式工作在渲染层，渲染层的界面使用了WebView 进行渲染。js脚本工作在逻辑层，使页面具有一些行为。逻辑层采用JsCore线程运行JS脚本。
小程序通信模型如下：
-
组件
小程序提供的丰富的组件，使用各种组件可以搭起我们的小程序。只需要在 WXML文件中 写上对应的组件标签名字就可以把该组件显示在界面上。
例如：<map></map>，就可以在界面显示地图。
组件详情 -
API
小程序官方提供了很多官方原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能、扫一扫等。
API详情
3.发布
小程序从开发到上线一般要经过如下步骤：
预览-> 上传代码 -> 提交审核 -> 发布 ->获得小程序码