微信小程序开发教程（一）

【主要内容:】

1. 微信小程序的文件结构

2. 文件目录中每个文件的作用

3. 小程序页面结构

一、微信小程序的文件结构

在微信小程序开发初探中讲了如何创建一个微信的小程序以及微信小程序web开发工具的使用介绍。今天就来介绍一下微信小程序工程的目录结构。下边这张图展示了新建的一个微信小程序工程中包含的所有文件：

二、文件目录中每个文件的作用

每一个微信小程序工程都包含了两个文件夹pages和utils，和三个文件app.js、app.json、app.wxss。

2.1 pages

微信小程序会有很多的页面，每个小程序页面都是以文件夹的形式存放在pages目录下边。默认的工程中包含了两个页面：Index和logs

2.3 utils

这个是公共的、通用的文件夹。从util.js文件的代码中可以看出，日后这个文件中可能存放的是开发中经常用到的公共、通用部分的代码。比如系统默认写入的日期转化函数。

每一个小程序工程都包含了下边这三个文件。也就是说每个小程序主题都由这三个文件组成，而且必须放在项目的根目录下。

2.4 app.js 

从app.js的后缀就可以看出，他的实质是JavaScript文件，用来控制小程序的逻辑。

2.5 app.json 

app.json里边主要是工程的配置文件。在app.json中可以设置一些工程的公共设置。比如：页面的个数、窗口的显示设置、Tabbar设置、网络设置等等。

2.6 app.wxss

app.wxss文件实质是CSS层叠样式表，所以说这个文件是小程序公共的样式表文件，可以在这个文件中做视图层面的样式设置。

三、小程序页面结构

微信小程序由很多个页面组成，每个小程序页面都有4个文件组成：

和小程序主体部分的三个文件作用一样，小程序页面描述多了一个xxx.wxml文件，这个一个HTML类型的文件。所以xxx.wxml的作用是开发页面布局功能。

为了方便减少开发配置，微信规定描述页面的4个文件必须具有相同的路径和文件名。

想学web前端开发技术的朋友，可以点击这个链接：微信小程序web前端技术开发视频教程，这里有web前端开发需要的所有技术。这套视频教程讲解的非常全面，涵盖所有的web前端技术：HTML5 + CSS3 + JavaScript + DOM + JQuery + Ajax + Angular.JS + RESTful + Node.JS +项目实战。

  欢迎大家关注“芒果iOS”微信公众账号，芒果会经常为大家分享好的技术文章：