微信小程序开发基础篇之工具介绍（二）

上一篇文章描述了从下载到打开的详细说明，接下来，该详细介绍一下，页面和逻辑代码方面的知识了，要不然感觉没有多少干货，很虚。

下面这张图是程序代码目录图：

我们可以看到上图主要的右边区域如下具体所示：

主要有一个Pages文件夹、utils文件夹、app.js、app.json、还有一个app.wxss文件夹

打开pages你会看到默认的两个文件夹index和logs：如下：

index和logs是两个不同的功能，也就是说我们在编写小程序的时候，不同的功能，我们在pages下面建立不同的文件夹，顺便多说一句，在建立文件夹的时候，我们最好能起一个容易识别的名字，达到识名知意的效果。打开其中的一个文件夹，我们就会看到如下的几个文件：

如上所示：我们可以看到三个文件，分别是js,wxml,wxss文件，这三个文件有这不同的功能，js文件一般是这个功能的逻辑代码，配置文件等，wxml文件相当于我们开发网页的时候html页面的代码，换言之，就是我们的布局代码，wxss文件相当于我们的css文件，就是是我们页面更加美化，调整一下页边距，背景，图片大小等。

下面来看一下详细的代码页面：稍微有点网页开发基础的伙伴基本都能看懂这个代码：

wxml界面：很熟悉吧，和HTML很像。

wxss界面：

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

Pages（开发者自行创建）目录是你的页面目录，但不是一定需要叫Pages

Utils （开发者自行创建）在本例中是工具类库目录，不是一定需要存在

在开发过程中最好遵循以上目录结构，特别Pages，没个页面独立一个文件夹，因为每个页面有自己独立的样式或者Js。未来方便管理。 但是，如果有公共样式的存在，请写在app.wxss