最近因为参加hackathon，于是开始了解学习一下微信小程序的开发，说到微信小程序的，这几年也算是十分的火热了，在各种比赛、应用开发、各行各业中都可以看到它的影子，也算是腾讯这段时间来做的影响力比较大的事情。

话不多说，直接开始研究今天的主题——目录结构：

上图是一个刚建好的微信小程序的开发目录，当然我还在其中加上了一个First，并在app.json中做了配置。

一、app.js、app.json、app.wxss

1. app.js

首先我们看到整个项目下的app.js、app.json、app.wxss。这三个文件是十分重要的，在我们的微信小程序中必不可少，首先就是app.js，是的！以.js结尾，你应该能够像到什么，没错！它就是一个js文件，但是这里的js文件是整个项目中起到关键作用的，并不是像我们一般创建的js一样，它的作用是可以在其中定义整个项目的全局变量，并监听处理整个项目的生命周期。

2.app.json

这个文件同样十分的重要，你可以在其中配置各种东西，比如导航栏背景、你的跳转路径等等，可以说没有它你就无法做出一个好的小程序。

3.app.wxss

这个就是样式文件了，其实与我们做网页的css文件是一样的功能，只是因为又腾讯自己开发，所以内部的框架肯定是与css不一样的，整体语法也会有不同，他会对我们的项目整体进行布局，当然如果你项目本身页面上的wxss与这个整体app.wxss有了冲突，则页面上的wxss会覆盖这个整体的wxss文件。

二、index文件夹

这个文件夹其实可以随自己心意来命名的，只是因为小程序的初始界面就叫做index，所以该文件夹的名字就叫做index，其中有三个文件分别是index.wxml、index.wxss、index.js，这三个文件的名字做过网页的同学是不是特别熟悉哈~，没有错，这个就相当于网页中的html、css、js，只是因为又微信自己开发，所以前缀总是要加wx罢了，当然语法和框架前面也说了，肯定是不一样的。

1.index.wxml

用来进行基本的组件添加，有了他我们可以往界面上添加我们想要的东西，并适当的改变其属性，其中的组件可以与wxss进行一定的联系，然后布局，使我们的界面更加的好看。

2.index.wxss

这是一个样式文件，它可以对我们的页面进行布局，使我们的组件变的不一样起来。

3.index.js

这个文件其实就是一个脚本，它可以使我们与界面进行交互，比如点击事件、监听事件、UI反应等。

三、logs日志

这个不用多说吧，日志文件，只是要注意的是，这个日志文件中其实就是一个日志界面，可以做到与之前index一样的功能，只是调用了许些日志方法。

四、utils

这个文件夹其实看起来高大上，不过是一个使用之后我们可以将js全局在整个项目中使用的一个utils，我们只需要在自己的js里写

var util = require('../../utils/util.js');

然后在需要的时候调用

util.xxx()

util.js里面定义了函数之后，要在module.export里面添加xxx:xxx.。

特别申明：本站的主旨在于收集互联网运营相关的干货知识，给运营小伙伴提供便利。 网站所收集到的公开内容均来自于互联网或用户投稿，并不代表本站认同其观点， 也不对网站内容的真实性负责，如有侵权，请联系站长删除