在目录树下，点击pages目录，点击index目录，点击logs目录，点击utils目录，打开一切可以打开的目录，唯有如此，方能爽爽地窥探整个目录结构的全貌，方能更好地熟悉配置文件、应用文件和页面文件的应用。
2.1 配置文件工程配置文件project.config.json，用来配置appid、项目名称、调试基础库，还有云开发的文件夹路径。如果你不想开发微信小程序了，不想在IT界混了，那你大可毫不留情地删除它，否则请保留。
索引配置文件sitemap.json，用于配置页面是否可被索引(搜索)。 action为allow表示同意索引，disallow表示不同意；page为*表示所有页面可被索引，pages/index/index则指定某个页面可被索引。
如果删除sitemap.json文件，则默认为所有页面都允许被索引。在实际开发产品时，几乎都是用默认，既aciton为allow的情况。细的规则在用到时，上网找一下就好了。
一个小程序项目，在根目录下会有3个应用文件，一个是全局业务逻辑文件app.js，一个是公共配置文件app.json，还有一个是公共样式表文件app.wxss。在这3个文件中，app.js和app.json是不可删除，是必须有的文件。
1. app.js
打开文件的那一瞬间，我才知道：人生遇到的人很多，但真正懂你的人却寥寥无几。懂你的人，即使你不说话，他也知道你的喜怒哀乐。不懂你的人呢，就给你一大堆代码，也不管你是否有了基础。如果有基础，我看这个干啥，如果没有，我看这个干啥？
清空onLaunch里面的代码，只留一个空方法就好。好看的皮囊千篇一律，有趣的灵魂万里挑一。App()必须且只能在app.js中调用一次，否则会出现无法预期的后果。
在onLaunch或其他函数中，可通过this(App实例)调用globalData全局变量。
//app.js
App({
onLaunch: function () {
let user = this.globalData.userInfo;
},
globalData: {
userInfo: null
}
})
在App()里，除了onLaunch，还有onShow、onError等函数。
备注：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
如果想在onLaunch或onShow函数中，获取相关参数内容，只要带上参数option一起飞就可以了。
//app.js
App({
/**
*启动执行的初始化方法
* 首次打开时执行，全局只触发一次
*/
onLaunch: function(options) {
console.log('page:', options.path);
},
//小程序启动或从后台进入到前台时触发
onShow: function(options) {
console.log('scene:', options.scene);
},
//全局变量
globalData: {
userInfo: null
}
})
输出结果：
page: pages/index/index
scene: 1001
options可以获取的值列表
2. app.json
全局配置文件，可配置且必须配置的页面路径；可配置窗口风格，如标题栏背景色和标题；可配置全局tab标签、网络超时时间和多tab等。常用配置项列表如下。
pages
每一项代表对应页面的路径和文件名(不用后缀)，数组的第一项为首页。小程序添加或删除页面时，必须跟pages同步。
"pages": [
"pages/index/index",
"pages/logs/logs"
]
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
类型中的HexColor为十六进制颜色值，如"#ff0000"。属性backgroundColor配置的窗口背景色，在下拉刷新或上拉加载时才能见到。如果要配置页面背景色，可到app.wxss进行全局配置或到index.wxss进行单个页面配置。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#00a24d",
"navigationBarTitleText": "导航栏标题",
"backgroundColor": "#cccccc",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true
}
tabBar
如果小程序是一个多 tab 应用，可以通过tabBar配置项指定tab栏的表现，以及 tab 切换时显示的对应页面。tab数目最少 2 个、最多 5 个。
其中 list 接受一个数组，数组中的每个项都是一个对象，属性列表。
图标大小限制为40kb，建议尺寸为 81px * 81px，当postion为top，既tab在顶部时，iconPath和selectedIconPath无效。
在项目根目录下新建images目录，上网搜索“首页”、“日志”图标。图标默认颜色为：#8b8b8b，选中时颜色为：#00a24d，大小为81*81。如果实在不想折腾，那就关注公众号半码，输入:芝麻开门，获取图标下载地址。
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#ffffff",
"color": "#8b8b8b",
"selectedColor": "#00a24d",
"list": [
{
"iconPath": "images/index.png",
"selectedIconPath": "images/index_p.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"iconPath": "images/log.png",
"selectedIconPath": "images/log_p.png",
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
networkTimeout
网络请求的超时时间，默认为60000毫秒，既1分钟，在调用wx.uploadFile上传文件，wx.downloadFile下载文件，wx.request上传/下载数据和wx.connectSocket网络通信接口时会用到。
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
requiredBackgroundModes
配置在后台运行的能力，目前只支持audio:后台播放音乐和location:后台定位两项。
"requiredBackgroundModes": [
"audio",
"location"
]
navigateToMiniProgramAppIdList
当前小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序appId 列表，最多允许填写 10 个。
navigateToMiniProgramAppIdList
当前小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序appId 列表，最多允许填写 10 个。
permission
小程序用到敏感功能,如获取地理位置时，需要弹窗询问用户，用户点击同意后才可调用接口获取相关信息，如经纬度。询问窗口上的内容，就是这里的desc值。
"permission": {
"scope.userLocation": {
"desc": "唯有授予位置权限，才好找你吹牛皮"
}
}
3. app.wxss
WXSS是一套样式语言，用于描述WXML文件里的组件样式，决定组件应该怎么显示。为了可对wxss资源进行复用，小程序对CSS进行了扩充，使其支持：通过@import语句后接外联样式表的相对路径并用;结束的方式导入样式。
app.wxss为公共样式表，不用显示引入，便可在页面文件wxml中使用。
/** common.wxss **/
.bg {
background-color: #cccccc;
}
/**app.wxss**/
@import "common.wxss";
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
} 2.3 页面文件
一个小程序应用，由index，logs等多个页面组成。一个页面，包含4个同名，不同后缀的文件，它们分别是负责配置的json，布局的wxml，样式的wxss和业务逻辑的js。其中，wxml和js是不可删除，是必须有的文件。
1. index.json
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。
以上属性的含义跟app.json里的是一模一样的，我就不重复讲了，再讲的话，怕你用时间跟我换金钱。
{
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "black"
}
我没钱，只好说下页面json文件才有的disableScroll和usingComponents属性。disableScroll默认为false，设置为true时页面不能上下滚动。usingComponents用来引入第3方组件，唯有在json文件中引入的，才可以在wxml文件中使用。这个只是示例代码，等讲到组件时，就自然明白了。
{
"usingComponents": {
"mp-cells": "../../components/cells/cells",
"mp-cell": "../../components/cell/cell"
},
"disableScroll": true
}
2. index.js
在页面js文件中，可在Page()里面指定页面的初始数据、生命周期回调、事件处理函数等；可在外面引入模块和getApp()等。
const util = require('../../utils/util.js')
const app = getApp()
Page({
data: {
motto: 'Hello World'
},
//自定义函数
bindViewTap: function() {},
//页面加载时触发
onLoad: function() {}
})
初始化数据的data，在页面第一次渲染时使用。自定义函数bindViewTap，绑定页面组件，在用户触发时调用。onLoad为生命周期函数，在页面加载时触发，可通过this调用自定义函数。有关函数的更多内容，咱骑驴看唱本，走着瞧。
3. index.wxml
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出wxml页面的结构。关于WXML的更多内容，在后面会花多点篇章、花多点时间、花多点心思进行详细的介绍。
<!—pages/index/index.wxml-->
<view class="container">
<text class="user-motto">{{motto}}</text>
</view>
4. index.wxss
在page的 wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
}
.usermotto {
margin-top: 200px;
}
能坚持看到这的人，都是能做事的码农，如果能答对我要问的问题，肯定会让他人佩服得五体投床的。那么问题就来了：仔细观察上面index.wxss里的内容，猜一猜哪一个东西在CSS是没见过的？
没错，rpx在CSS里是不曾有过的，你猜对没？--如果猜对的话，我就五体投床去了，如果没猜对的话，我就五体投床去了，因为五体投地还得洗衣服。
rpx为小程序特有的尺寸单位，可解决屏幕宽度进行自适应的问题。它以屏幕宽为750rpx为基准。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
猜对上面问题的人，给你10分钟，一边嘚瑟去吧。没猜对的人，赶紧抓紧机会，猜猜.userinfo和.usermotto用的是哪种选择器？
没错，答案就在下表中。你真聪明！
好了，项目文件就这样了，没什么要说的了。如果你还没搞懂的话，就从头到尾再多学几遍，如果你还没搞懂的话，就从头到尾再多学几遍，直到能去框架语法为止。
