跟我来学小程序（一）项目目录和项目文件介绍

大家好，我是一个爱举铁的程序员Shr。

本篇文件介绍小程序项目的目录和项目文件。

源码地址：

https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180603

一、新建项目

打开微信web开发者工具，选择小程序项目，由于没有新建过项目，打开之后是下图的界面，选择项目目录，填写注册之后获得的AppID，填写项目名称，点击确定。

然后就打开了新建的项目，如图所示。

二、文件的作用

先说一下项目中出现的文件，文件有四种，js，json，wxml，wxss。

大家熟悉的js就是用来交互的了。

json是一种数据格式，那这里放的就是数据了。

还有wxml和wxss那是干嘛用的，

千万不要以为wxml是和xml文件一样，xml文件也是用来存储数据的，但是已经有一种json文件存储数据了。

这里的wxml可以理解成html，那wxss就可以理解成css了。

三、目录结构介绍

目录结构如下图所示。

接下来了解一下各个目录的作用。

3.1 pages目录

pages目录里面放的是页面，当前的项目中有两个页面，一个是index.wxml，一个是logs.wxml，每个页面都有对应的wxss和js。

3.2 utils目录

utils目录，顾名思义，工具，这里可以放公共的wxss和js等，这样就不用在每个页面做重复的工作了。

3.3 app.json

官方文档的说法是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

来看看里面是什么。

这个文件还有很多其他的属性，我把这些属性都加上去之后的代码如下，由于JSON格式的文件不能用//或者/* */加注释，我就用这种数据格式定义key/value加注释了。

看看小程序的页面。

将tabBar中的position改成top之后，导航就到页面顶部了，但是图片就没了。

这是对全局页面的配置，也可以对单个页面建立一个JSON文件，这样就只配置app.json中的window属性。页面中配置项会覆盖app.json的window中相同的配置项。

项目的配置文件，对项目进行个性化配置，例如界面颜色、编译配置，打包配置等等。来看看默认是什么。

具体配置详情请看官方文档，我就不一一写注释了。

3.5 app.wxss

来看看里面有什么。

CSS样式，这个能看懂，WXSS有CSS大部分特性，它对CSS进行了扩充和修改。这个app.wxss是公共样式表。

3.6 app.js

来看看里面是什么。

App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。onLaunch监听小程序初始化，当小程序初始化完成时，会触发onLaunch（全局只触发一次）。

3.6.1 object参数说明

3.6.2小程序前台、后台的定义

当用户点击左上角关闭，或者按了设备Home键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

3.6.3小程序的生命周期

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

小程序销毁的情况，当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁

当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁

修改app.js

我在后面加了几个方法，然后看控制台打印的内容。

3.6.4onLaunch, onShow参数

修改onShow方法，加上参数，然后打印参数。

看看控制台。

其他的属性就看官方文档吧。

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

3.6.5注意事项

App()必须在app.js中注册，且不能注册多个。

不要在定义于App()内的函数中调用getApp()使用this就可以拿到app实例。

不要在onLaunch的时候调用getCurrentPages()，此时page还没有生成。

通过getApp()获取实例之后，不要私自调用生命周期函数。

3.6.6场景值