小程序开发系列------三、项目分析

上一篇文章中我们新建了一个小程序项目，项目结构如下图：

这篇文章我们来对项目结构进行下分析：

两大目录：

目录	功能
pages	小程序项目的页面目录
utils	小程序公共脚本目录

五大配置文件：

文件	功能
app.js	小程序的逻辑文件
app.json	小程序的配置文件
app.wxss	小程序的公共样式文件
project.config.json	小程序项目配置文件
sitemap.json	小程序是否允许微信索引

pages目录

新项目中的pages目录结构如下：
pages下有两个子目录：index和logs，这两个子目录就是两个页面。
子目录里面包含了后缀分别为：wxml、js、wxss和json的四个文件 (为了便于理解，可以把pages下同一子目录中的不同后缀文件看成一个整体，这就是一个页面)：

文件	功能
.wxml	文件类似于前端开发中的HTML文件，用来写页面元素
.js	文件类似于前端开发中的js文件，用来写页面各种事件
.wxss	文件类似于前端开发中的css文件，用来写页面各种样式
.json	配置文件，可以定义一些数据供页面使用

小程序运行流程 画的比较粗糙，但是很用心：

总结：
小程序启动后分别从app.js和app.wxml文件中加载了部分逻辑和样式，然后从app.json读取了pages中放在第一个且作为启动页的页面，并加载渲染了这个页面，当我们点击启动页面中的头像时，触发了绑定在头像元素上的事件，然后跳转到了logs页面。