不知你是不是見到“文件剖析”這4個(gè)大字雷客，才點(diǎn)進(jìn)來看一看的芒珠？如果真是的話，那我可以坦誠(chéng)搅裙、真心皱卓、負(fù)責(zé)任地告訴你：你上當(dāng)了，你上了賊船啦部逮，如果你現(xiàn)在想跳的話娜汁，還來得及，反正茫茫大海中兄朋，鯊魚正缺搞程序的人掐禁。說你上當(dāng)了，是因?yàn)槲腋揪推饰霾涣寺汀Ｎ翼敹嘀荒茏龅椒治觥?/p>
2.1 ?配置文件分析
趕快打開微信開發(fā)工具傅事，快速進(jìn)到項(xiàng)目窗口中。展開pages峡扩，展開index蹭越，展開logs，展開utils教届，展開一切可以展開的响鹃。唯有如此，方能見到整個(gè)項(xiàng)目的全貌巍佑。
項(xiàng)目中茴迁，工程配置文件project.config.json，可用來配置appid萤衰、項(xiàng)目名稱渠啊、調(diào)試基礎(chǔ)庫(kù)荞驴，還有云開發(fā)的文件夾路徑回俐，至于其他的判导，幾乎不會(huì)做任何改動(dòng)。
項(xiàng)目中，頁(yè)面索引文件sitemap.json,可配置頁(yè)面是否可被索引(搜索), action為allow表示同意，disallow表示不同意；page為*表示所有頁(yè)面熟嫩，pages/index
/index指定某個(gè)頁(yè)面。
小程序項(xiàng)目中褐捻，除了配置文件外掸茅，還有應(yīng)用文件和頁(yè)面文件。
2.2 ?頁(yè)面文件分析
一個(gè)小程序應(yīng)用柠逞，由index昧狮，logs等多個(gè)頁(yè)面組成。一個(gè)頁(yè)面板壮，由負(fù)責(zé)配置的json逗鸣，布局的wxml，樣式的wxss和業(yè)務(wù)邏輯的js組成绰精。
這是一個(gè)關(guān)于1+1+1+1=4的故事撒璧，故事從配置文件json開始。
2.2.1 ?json文件
json文件可配置窗口頂部導(dǎo)航欄的背景色笨使、標(biāo)題卿樱、標(biāo)題顏色和引入第3方組件。第3方組件阱表，唯有在json文件中引入殿如，方可在wxml文件中使用。
{
"usingComponents": {
"mp-cells": "../../components/cells/cells",
"mp-cell": "../../components/cell/cell"
},
"navigationBarTitleText": "關(guān)于",
"navigationBarTextStyle": "black"
}
2.2.2 ?wxml文件
wxml文件最爬，對(duì)手機(jī)界面進(jìn)行布局。布局可從左到右门岔，上到下爱致；可從右到左，下到上寒随；可左青龍糠悯，右白虎，上圖片妻往，下按鈕互艾。
上圖片，下按鈕是我要實(shí)現(xiàn)功能讯泣，而左青龍纫普，右白虎是留給你的作業(yè)，記得按時(shí)完成哦好渠。完成之后昨稼，仔細(xì)觀察一下代碼节视，你就會(huì)發(fā)現(xiàn)有個(gè)莫名其妙的container，莫名其妙地出現(xiàn)在那里假栓。不要急寻行，存在即是合理，只是還沒說到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背后牙丽，承擔(dān)著化妝師(樣式)的工作简卧。這就是，每個(gè)成功的wxml剩岳，背后都會(huì)有一個(gè)wxss的來由贞滨。正是有了wxss的支持，wxml才可以放心拍棕、大膽地布局晓铆，大膽地布局天下。
好看的皮囊千篇一律绰播，有趣的靈魂萬里挑一骄噪，光有布局，光有一張靚麗的外表蠢箩，不足以成就大業(yè)链蕊。若想成就大業(yè)，得靠js文件來實(shí)現(xiàn)谬泌，實(shí)現(xiàn)業(yè)務(wù)邏輯滔韵。
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
2.2.4 ?js文件
js文件，實(shí)現(xiàn)業(yè)務(wù)邏輯并把結(jié)果顯示在wxml中掌实，昭告天下陪蜻。如果只是實(shí)現(xiàn)一個(gè)簡(jiǎn)單任務(wù)，像計(jì)算1+1=2這種贱鼻，那單個(gè)js應(yīng)該是沒問題的宴卖，只是理想很豐滿，現(xiàn)實(shí)很骨感邻悬，一個(gè)小程序應(yīng)用症昏，往往要實(shí)現(xiàn)的功能遠(yuǎn)遠(yuǎn)不止于如此。
為了提高開發(fā)效率父丰，可把一些通用的功能肝谭，放在一個(gè)通用的js文件里，并放置在utils下。等頁(yè)面中的js文件要使用時(shí)分苇，用require引入便可添诉。
既然有js可共用，那是否有wxss可供共用医寿？有的栏赴，app.wxss文件便是。
const util = require('../../utils/util.js')
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {?
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
2.3 ?app.wxss文件
app.wxss文件靖秩，為整個(gè)應(yīng)用的樣式配置文件须眷。在這里配置的樣式，可供所有頁(yè)面共用沟突，而且不用任何操作花颗。真好，微信產(chǎn)品經(jīng)理惠拭，總算做了一件讓程序員省心的事了扩劝。
一說到省心，你就開心职辅，一開心棒呛，便忘乎所以，忘記還有app.js和app.json未被提及域携。這兩個(gè)家伙簇秒，可是很重要的角色。
app.js秀鞭，是一名有著一夫當(dāng)關(guān)萬夫莫開本事的土匪趋观。若要進(jìn)到頁(yè)面，得先過app.js這一關(guān)锋边，此路是他開此樹是他栽皱坛，要想從此過，脫下褲子來豆巨。
就是說麸恍，全局的內(nèi)容，全局變量和全局的業(yè)務(wù)邏輯搀矫，在這里實(shí)現(xiàn)。至于全局的配置刻肄，請(qǐng)移步到app.json文件中瓤球。
//app.js
App({
onLaunch: function () {
// 展示本地存儲(chǔ)能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
globalData: {
userInfo: null
}
})
2.4 ?app.json文件
app.json文件，對(duì)整個(gè)應(yīng)用進(jìn)行配置的配置文件敏弃。在這卦羡，可配置統(tǒng)一風(fēng)格的窗口(window)風(fēng)格，包括頁(yè)面的標(biāo)題欄背景色，標(biāo)題(這個(gè)不太可能)绿饵，標(biāo)題顏色欠肾；
可配置且必須配置的頁(yè)面路徑(pages)；可配置全局切換標(biāo)簽拟赊，可配置定位等權(quán)限聲明和授權(quán)提示信息刺桃，可引入第3方插件。
可吸祟，可瑟慈，可，渴就喝水去屋匕。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"permission": {
"scope.userLocation": {
"desc": "請(qǐng)授予位置服務(wù)權(quán)限葛碧，以便更好的吃飯"
}
},
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#ffffff",
"color": "#1b1b1b",
"selectedColor": "#2b2b2b",
"list": [
{
"iconPath": "images/about.png",
"selectedIconPath": "images/about_p.png",
"pagePath": "pages/about/index",
"text": "關(guān)于"
},
{
"iconPath": "images/my.png",
"selectedIconPath": "images/my_p.png",
"pagePath": "pages/my/index",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap.json"
}
等等，聽我講了大半天过吻，是不是感覺少了點(diǎn)什么进泼，沒錯(cuò)，少了給我發(fā)紅包了纤虽。少了講開發(fā)工具生成的源代碼了乳绕，少了懟微信產(chǎn)品經(jīng)理了。
好吧廓推，那我就再懟一句刷袍，微信的小程序的產(chǎn)品經(jīng)理，你們生成的代碼樊展，我看不懂呻纹，也不想看，下一節(jié)专缠，我就統(tǒng)統(tǒng)把它們刪掉雷酪。
