点击上方“编程三分钟”，马上关注，每周1、3、5定时更新。
上回我们分分钟创建了一个小程序，有没有拿给心爱的女神秀一下呢？
扫这里的二维码就可以了，手机上就能看了，还等什么！
就是下面这个性感的界面，看到我骚气的微信头像了。
小程序有哪些目录？
这一会我们来了解下小程序的项目结构。
小程序目录结构非常的纯粹，根目录下就两个目录：
pages存放所有的页面utils存放工具函数，也就是公共函数，比如运算函数、获取时间等工具。下面就一个utils文件，我就不做介绍了
pages 是放页面的目录
pages 下每个目录就是一个页面，比如上图中就有两个页面，别看有个页面叫logs，他就是披着羊皮的狼就是来误导人的，他就是个页面。
每个页面一定有四个文件，他是约定好的，每个文件都有作用，创建页面的时候自动生成四个文件，他们必须具有相同的路径与文件名。
学过前端的都知道，js是写动态效果的，css写样式的，html是页面。这里也不例外，只是改了个名字。
js 是这个页面的后端
js 里，onLoad是页面加载的时候会调用的函数，data存放页面用到的数据，还有些自定义函数这个我们后面再说。
json 是微信提供的页面配置
json是页面配置，我搞一个丰富点的例子。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
比如上面这个index.json文件，记录了导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、下拉 loading 的样式。详细配置在这里有记录，我们只要知道这个文件是干嘛的就可以了。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
wxml 和 html 的功能相同
wxml 就是写标签专用的，页面展示的各种元素就在里面了。
比如上面这张图就是刚刚的页面，唯一和 html 不同的是，这里多了些微信官方提供的标签。
wxss 是写样式的
没错这就是和css一样的语法
utils 目录就是专门放公共函数的
根目录下的几个系统文件
我们刚刚了解了 pages 下每个页面的四个文件，utils 目录的作用，会发现有几个文件不在目录里。
app.js 同页面中的 js ，一个作用是配置小程序进来做哪些操作，比如获取用户登陆状态。另一个作用是保存全局变量
app.json 一样是整个小程序的配置，页面配置可以覆盖总配置，唯一不同的是要在这注册各个页面。
app.wxss 全局样式，可能被页面样式覆盖。
project.config.json 这是一个项目配置文件，比如项目的名字，appid等等,别管他具体配置了啥，全是自动的。只要这个文件在，你所有的个性化配置都会在。
sitemap.json 小程序内搜索用的，配置哪些页面允许微信的爬虫搜索。啥意思，就是在搜一搜里面搜索的时候能发现你这个页面。
以上。
实践出真知！今天的任务是，打开自己的微信开发者工具，一个一个的点开示例文件，看看里面的内容，相信你肯定能很快理解整个项目的运行流程了！
推荐阅读：
牛X，试用了下GitHub上22k Star的第一抢票神器，3秒钟抢到！
如果你喜欢我的文章，就给公众号加个星标吧，方便阅读。
好文章，我 在看
