「2.0」一個人開發一個App，小程式從0到1，檔案剖析
不知你是不是見到“檔案剖析”這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"
}
等等，聽我講了大半天，是不是感覺少了點什麼，沒錯，少了給我發紅包了。少了講開發工具生成的原始碼了，少了懟微信產品經理了。
好吧，那我就再懟一句，微信的小程式的產品經理，你們生成的程式碼，我看不懂，也不想看，下一節，我就統統把它們刪