一、了解MINA框架

接下来，下载并登录微信开发者工具。请注意，需要根据操作系统，下载对应的开发者工具安装包进行安装。 

接下来，我会通过一个简单的小程序，让你了解微信小程序的基础框架。下面的知识，有点难，但同学们可以先做一个粗略地浏览，我们会在使用过程中，加深对小程序的理解。

小程序开发使用的框架叫MINA框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力，快速构建应用，并具有原生App体验的服务。

整个系统分为视图层（View）和逻辑层（App Service）两部分。视图层由WXML(WeiXin Mark Language)和WXSS（WeiXin Style Sheet）组成。WXML是MINA提供的一套类似HTML标签的语言以及一系列基础组件。开发者使用WXML文件来搭建页面的基础视图结构，使用WXSS文件来控制页面的展现样式。逻辑层是MINA的服务中心，由JavaScript来编写完成。页面渲染所需的数据、页面交互处理逻辑都在逻辑层实现。MINA框架的核心是一个响应的数据绑定系统，它让数据与视图非常简单地保持同步。当作数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过开发者工具生成的微信小程序目录一般分为全局配置文件、页面文件和工具类文件三部分。

二、全局配置文件

接下来，我们将介绍小程序配置文件。

小程序全局配置页面主体部分由三个文件组成，并且必须放在项目的根目录。你不能把这三个文件，再放到其他文件中，必须放在小程序文件的根目录下面。

第一是，小程序逻辑文件（app.js）

app.js文件是必需配置文件，不仅可以定义全局函数和数据，还可以注册小程序。用户可以在App()函数里完成小程序的注册，并指定其生命周期， app.js中还可以定义一些全局的函数和数据，其他页面引用app.js文件后就可以直接使用全局函数和数据。

第二是，小程序公共配置文件（app.json）也是必需配置文件，它包含的是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

大家看图片上内容，包含了几个字段。

一是 pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

二是 window字段： 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

第三是，小程序公共样式文件（app.wxss）。

app.wxss文件是针对所有页面定义的全局样式，它可以自定义样式，对样式进行扩展。如果页面重新定义了这个类样式，则会把原有的全局样式覆盖掉，使用自定义样式。app.wxss文件可配置也可不配置。

三、页面文件

第四是，页面文件。

页面文件放在pages文件夹下，它由JS 脚本逻辑、WXML 模板、JSON 配置和WXSS 样式四个文件组成。为了方便开发者减少配置项，描述页面的这四个文件必须具有相同的路径与文件名。

我们展开讲讲。

首先是， JS 脚本逻辑文件，它的后缀为“.js”，用于页面逻辑处理。主体部分是一个函数，只有参数，没有函数体，含有很多监听函数。JS 脚本逻辑文件是必需配置文件。这个文件里的Page()函数用来注册一个页面，接收object参数，Object参数说明如表1-3所示。该文件处理页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑。

其次是，WXML 文件， WXML模板文件的后缀为“.wxml”，是微信团队自创的一种文件格式，文件功能与网页端.html对应，用来实现页面的组件和元素，.wxml中不能嵌入JavaScript代码和CSS样式。

然后是JSON 配置文件，JSON 配置文件的后缀为“.json”，用于本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。JSON 配置文件可配置也可不配置。JSON 配置文件的内容为一个 JSON 对象，它的属性值及描述如图所示。

最后是， WXSS 样式文件，它的后缀为“.wxss”，和网页中的.css对应，是一套样式语言，用于描述WXML模板的组件样式。WXSS具有CSS大部分特性，同时为了更适合开发微信小程序，微信对CSS进行了扩展。与CSS特性相比扩展的特性有：尺寸单位、样式导入。 

我们在开发小程序时，不需要自己写每一个样式，可以使用 import语句可以导入外联样式表。@import语句后为需要导入的外联样式表的相对路径，用“;”表示语句结束。代码如例所示。