2.2　微信小程序框架配置

本节讲讲框架配置，内容并不多，重点掌握以下两点即可：一是新生成的项目目录结构是怎么样的，每个文件都有什么作用；二是几个主要文件的配置方法。

2.2.1　目录结构

打开项目，观察项目的文件目录结构，如图2.1所示。

从图2.1中可以看出，层级结构比较分明。下面我们按照图中出现的顺序来介绍大概的用处。

pages下的为页面目录，这里有两个页面，分别为index和logs。json是页面配置文件，剩余的js、wxml、wxss是页面的逻辑、标签和样式。

utils是工具类的文件夹，也可以另外新建一些文件夹来替代它。

再来看project.config.json和sitemap.json。project.config.json是一个项目配置文件，设置是否转换ES6、显示当前使用库版本等。sitemap.json配置小程序是否允许被微信索引。默认是所有页面都可以被索引。如果要修改索引方式，方法也十分简单，我们先看一下默认的配置，代码如下：

rules是一个数组，可以设置多条规则，关键在于里面的元素。action中的allow是允许，disallow是不允许。page是目录，如果填写星号，则是所有。规则就是这么简单，我们来完成一个例子。

【示例2-1】

允许索引home页面，禁止索引其他所有页面：

内容基本就是这么多。因为这两个文件在开发中用到的并不是很多，所以暂时不用管它们。

2.2.2　app.json

app.json是一个主要的公共配置文件，我们直接看里面默认的内容。

首先是参数pages，它接收的是一个数组，里面存放着所有的页面，所有的页面都必须在这里写上路径才可以使用。如果使用第1章中微信开发者工具的新建页面功能，就可以自动在pages填充新的页面，不需要进行任何操作。

接着是参数window，从参数内容读者应该能猜到一个大概。它主要用于配置整体页面的背景色、导航栏颜色、导航栏标题等。除了它默认填写的几个参数外，还有一些其他参数，比如说tabBar参数，可以用来控制生成底部的选项卡。

【示例2-2】

这里举一个简单的例子：

通过参数名称很容易看出参数所代表的含义。比如selectedColor代表选中时的字体颜色，list是选项卡的数组，selectedIconPath、iconPath是选中、未选中时的图标，pagePath是对应文件目录，text是选项卡的标题。最后是参数sitemapLocation，用来配置前面所有的sitemap.json文件，一般来说不需要修改。

常见的配置项目基本就是这些，这部分内容会在后面的章节经常用到，所以不用担心忘记。

2.2.3　app.js

app.js可以说是程序的入口，它的最外层由一个App()构成，里面是onLaunch和globalData。其中，globalData是一个变量，写在app.js中是为了方便全局调用。下面我们主要分析onLaunch。

onLaunch是小程序启动时会加载的一个函数，代码如下：

这些代码都是由新项目自动生成的，我们逐行分析。

首先logs通过wx.getStorageSync获取了存储的数据，并添加一条当前时间，再通过wx.setStorageSync保存回去，用以统计使用时间来展示本地存储能力。

接下来是登录方法wx.login，这个方法会返回一个code，需要让服务端来换取一些用户数据，其中最重要的就是openId，这个参数一般作为用户的唯一标识。

最后就是wx.getSetting方法，这个方法用于获取用户信息，比如用户昵称、头像等。在这段代码的回调中有一层判断，如果已经授权，则直接获取保存在globalData里，方便全局调用。如果没有获取，则不执行任何操作。

2.2.4　app.wxss

app.wxss是小程序公共样式表，这里声明的样式，在其他wxml文件中都可以使用。比如在这个新项目中，app.wxss中有一个container样式，在index.wxml中就使用到了该样式，代码如下：

这个文件的主要作用就是方便复用，如果有需要重复使用的样式，可以写在这里。