腾讯非常贴心地提供了一个微信小程序的Demo，展示了微信小程序组件和API调用，比较全面，本文我们利用这个Demo对微信小程序的框架建立起认识。

    Demo的源码可以在小程序管理后台的“文档”一“开发”一“简易教程”一“体验小程序”页面下载，也可以加作者微信号索取。

    文件下载后我们解压到一个文件夹里，按照上一章介绍的方法，进入微信小程序开发工具的时候选择Demo所在的文件夹就可以打开这个Demo，进行小程序的编辑和调试。

    微信官方提供的所有组件和API在Demo里都有演示，如视图容器、表单组件等。对我们深入学习和理解微信小程序的组件和API很有帮助，我们在接下来的学习过程也会用这个Demo当作实例来进行。

    我们可以在小程序的目录树里直观地了解到小程序的框架和文件结构。

    一个小程序包含一个描述整体程序的主体部分(根目录)和一组或者几组描述页面的page文件夹。

    小程序的主体部分位于源代码文件夹的根目录下面，通常由三个文件构成：app.js、app.json和app.WXSS，这三个文件是小程序的架构文件，不能改名。

    app.js是小程序的逻辑代码文件，是逻辑代码的存储容器，文件格式遵守JavaScript语言规范。

    app.json是小程序的公共配置文件，用于决定页面文件的路径、窗口内容的配置、设置网络超时时间、设置公共导航栏等。

    app.WXSS是小程序的公共样式表文件，兼容W3C的CSS语法规范。

    一个小程序的页面分别由四个文件组成：[pageName].js、[pageName].json、[pageName].wxml、[pageName].WXSS。同一个页面，这四个文件的路径和文件名必须相同，否则小程序在调用和处理文件时会无法识别。

    ·[pageName].js是页面的逻辑文件，负责页面逻辑内容的处理，采用JavaScript语言    框架。

    ·[pageName].json是页面的配置文件，用来设置页面的窗口内容，遵守JSON语法规范。

    ·[pageName].wxml是页面的结构文件，用于页面可视化组件的组织和描述，语法结构类似于xml，与html格式有比较大的差别。

    ·[pageName].WXSS是页面的样式表文件，兼容CSS语法规范。