微信小程序目录详解

最近入坑微信小程序，2017年1月9号张小龙在微信公开课Pro上发布小程序正式上线。相比之前写安卓，小程序的跨平台性以及免安装性着实让我赞叹不已，让人们使用应用变得触手可及。

接下来我将介绍一下小程序的编程语言以及对小程序项目的目录理解。希望对入门的开发者有一些启发。

小程序的前端基本上类似于H5，小程序是界面是由微信推出的WXML语言和WCSS语言组成，相比看到这两个名字，很多了解过H5的同学们可能已经知道了。的确，这两门语言和HTML、CSS很相近，很容易入门。可能有些同学会问，那么后台是通过什么编程语言呢？

最后主目录下都还会有一个JSON文件，该文件由一个JSON数组组成，其中的的pages数组中必须含有每一个页面的绝对路径，不然该页面则无法显示。

可能大家现在还一知半解，接下来我会详细说明一下目录结构，以及各个文件所承担的不同作用，构成了一个完整的小程序。

主目录

这是我们创建项目后所看到的一个目录，下面我来介绍一下主目录下的四个文件的作用。

app.js文件表示对整个小程序进行交互操作，文件中包含小程序从启动到结束的进程函数，比如onLaunch: function()便是小程序开始时所进行的函数，通过app.js文件我们可以对小程序的每一个进程进行函数监听，便于和用户进行交互。上图中通过app.js文件对小程序log进行缓存并且获取用户信息。

app.json文件表示的对小程序进行全局配置，在上文中我提到过每一个小程序的界面都要在app.json中的pages数组中进行声明，如图，我们的pages数组中包含两个页面，我们需要通过绝对路径进行声明。除此之外，在app.json中还可以对小程序的样式进行操作，比如小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

app.wcss文件类似于css文件，对小程序的整体样式进行配置，每一个页面都包含wcss文件，而app.wcss文件则是主目录里面的，相当于对所有页面的样式进行调整，类似于一个公共文件。当然了，每一个页面的wcss文件都可以覆盖app.wcss文件，好比子类继承父类的方法，但是还可以重写父类的方法。想必大家都明白了。

最后一个project.config.json文件，想必大家看名字就知道这是一个项目配置的json文件，那和app.json有什么区别呢？其实大家看里面的数组名就知道了，app.json控制每一个界面的注册，小程序的部分样式。而project.config则控制小程序的版本，appid等一些数据。

最后我们再来看一下每一个页面中的文件。我们创建新的页面都要在pages文件夹中创建，并且都要在app.json中注册，注册路径为pages/页面目录名/页面名。每当我们创建新的页面时，我们都给目录进行一个规范，即目录名和目录中的文件名保持一致，如下图。

每一个页面中可以创建四个文件，但是json文件不需要的时候可以不用创建，主要用wxml，wcss和js。其中wxml定义了每一个页面的结构，就像网站中的H5一样，不过和H5的区别在于wxml中每开启一个标签都必须有相对应的关闭标签，不然编译器会报错，而wcss文件跟css基本没区别，对wxml中的每一个标签进行添加样式，让页面更加美观流畅。

最重要的一个便是js文件，在js文件中我们可以给页面添加响应事件，让用户能够和小程序进行交互，并且还可以使用微信的API，进行扫二维码，支付，访问远程服务器等一系列操作。

文章阐述一下作者对于微信小程序目录的理解，如果读者还有什么疑问或者还需要了解深入了解，可以查看微信小程序官方文档。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html