不知你是不是見到“文件剖析”這4個大字，才點進來看一看的？如果真是的話，那我可以坦誠、真心、負責任地告訴你：你上當了，你上了賊船啦，如果你現在想跳的話，還來得及，反正茫茫大海中，鯊魚正缺搞程序的人。說你上當了，是因為我根本就剖析不了。我頂多只能做到分析。
2.1 配置文件分析
趕快打開微信開發工具，快速進到項目窗口中。展開pages，展開index，展開logs，展開utils，展開一切可以展開的。唯有如此，方能見到整個項目的全貌。
項目中，工程配置文件project.config.json，可用來配置appid、項目名稱、調試基礎庫，還有雲開發的文件夾路徑，至於其他的，幾乎不會做任何改動。
項目中，頁面索引文件sitemap.json,可配置頁面是否可被索引(搜索), action為allow表示同意，disallow表示不同意；page為*表示所有頁面，pages/index
/index指定某個頁面。
小程序項目中，除了配置文件外，還有應用文件和頁面文件。
2.2 頁面文件分析
一個小程序應用，由index，logs等多個頁面組成。一個頁面，由負責配置的json，布局的wxml，樣式的wxss和業務邏輯的js組成。
這是一個關於1+1+1+1=4的故事，故事從配置文件json開始。
2.2.1 json文件
json文件可配置窗口頂部導航欄的背景色、標題、標題顏色和引入第3方組件。第3方組件，唯有在json文件中引入，方可在wxml文件中使用。
{
"usingComponents": {
"mp-cells": "../../components/cells/cells",
"mp-cell": "../../components/cell/cell"
},
"navigationBarTitleText": "關於",
"navigationBarTextStyle": "black"
}
2.2.2 wxml文件
wxml文件，對手機界面進行布局。布局可從左到右，上到下；可從右到左，下到上；可左青龍，右白虎，上圖片，下按鈕。
上圖片，下按鈕是我要實現功能，而左青龍，右白虎是留給你的作業，記得按時完成哦。完成之后，仔細觀察一下代碼，你就會發現有個莫名其妙的container，莫名其妙地出現在那里。不要急，存在即是合理，只是還沒說到wxss文件而已。
<view class="container">
<image src="../../images/long.png" style="width: 750rpx;height: 450rpx"></image>
<button>確定</button>
</view>
2.2.3 wxss文件
wxss文件，是wxml的好基友，一直站在wxml背后，承擔着化妝師(樣式)的工作。這就是，每個成功的wxml，背后都會有一個wxss的來由。正是有了wxss的支持，wxml才可以放心、大膽地布局，大膽地布局天下。
好看的皮囊千篇一律，有趣的靈魂萬里挑一，光有布局，光有一張靚麗的外表，不足以成就大業。若想成就大業，得靠js文件來實現，實現業務邏輯。
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
2.2.4 js文件
js文件，實現業務邏輯並把結果顯示在wxml中，昭告天下。如果只是實現一個簡單任務，像計算1+1=2這種，那單個js應該是沒問題的，只是理想很豐滿，現實很骨感，一個小程序應用，往往要實現的功能遠遠不止於如此。
為了提高開發效率，可把一些通用的功能，放在一個通用的js文件里，並放置在utils下。等頁面中的js文件要使用時，用require引入便可。
既然有js可共用，那是否有wxss可供共用？有的，app.wxss文件便是。
const util = require('../../utils/util.js')
Page({
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
2.3 app.wxss文件
app.wxss文件，為整個應用的樣式配置文件。在這里配置的樣式，可供所有頁面共用，而且不用任何操作。真好，微信產品經理，總算做了一件讓程序員省心的事了。
一說到省心，你就開心，一開心，便忘乎所以，忘記還有app.js和app.json未被提及。這兩個家伙，可是很重要的角色。
app.js，是一名有着一夫當關萬夫莫開本事的土匪。若要進到頁面，得先過app.js這一關，此路是他開此樹是他栽，要想從此過，脫下褲子來。
就是說，全局的內容，全局變量和全局的業務邏輯，在這里實現。至於全局的配置，請移步到app.json文件中。
//app.js
App({
onLaunch: function () {
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
globalData: {
userInfo: null
}
})
2.4 app.json文件
app.json文件，對整個應用進行配置的配置文件。在這，可配置統一風格的窗口(window)風格，包括頁面的標題欄背景色，標題(這個不太可能)，標題顏色；
可配置且必須配置的頁面路徑(pages)；可配置全局切換標簽，可配置定位等權限聲明和授權提示信息，可引入第3方插件。
可，可，可，渴就喝水去。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"permission": {
"scope.userLocation": {
"desc": "請授予位置服務權限，以便更好的吃飯"
}
},
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#ffffff",
"color": "#1b1b1b",
"selectedColor": "#2b2b2b",
"list": [
{
"iconPath": "images/about.png",
"selectedIconPath": "images/about_p.png",
"pagePath": "pages/about/index",
"text": "關於"
},
{
"iconPath": "images/my.png",
"selectedIconPath": "images/my_p.png",
"pagePath": "pages/my/index",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap.json"
}
等等，聽我講了大半天，是不是感覺少了點什么，沒錯，少了給我發紅包了。少了講開發工具生成的源代碼了，少了懟微信產品經理了。
好吧，那我就再懟一句，微信的小程序的產品經理，你們生成的代碼，我看不懂，也不想看，下一節，我就統統把它們刪掉。