学小程序还不懂代码结构？——每天三分钟玩转小程序2

点击上方“编程三分钟”，马上关注，每周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秒钟抢到！

三分钟创建一个小程序-每天三分钟玩转小程序 1

我发现了一个高效学习的新方法！

如果你喜欢我的文章，就给公众号加个星标吧，方便阅读。

好文章，我 在看