作為一名後端開發人員，我希望能從後端語言的某些模式來理解小程式，讓我快速的入門。

今天我們依然模擬一個女專案經理和後端工程師的博弈，為你逐步展開小程式的面紗。

角色定位

• 女一號 大櫻桃：女專案經理，30歲，未婚。
• 男一號 老沙：帥氣的後端工程師，30歲，已婚。

App

當聽到大櫻桃這樣說自己的時候，老沙明白的確是自己的問題，小程式工具為我們生成了一個基礎的框架，但是這個框架裡的檔案都是做什麼用，每個檔案如何去操作他並不知道，這的確是一個問題。

於是老沙決定用30分鐘的時候先研究下其中的 app.js / app.json / app.wxss / project.config.json

app.js

從微信小程式官方文件我們知道：“小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。”，而app的構建、維護以及配置就是由上面4個檔案管理的。

@@nai8@@

當我們開啟一個小程式的時候，伴隨著生成一個小程式的例項，這個很像yii中入口對application的生成邏輯。

同時提供了一個叫做App()的函式用來接收小程式例項完成最後的註冊，這個函式存在於app.js中，而所謂的註冊，裡面可以包含我們自己的邏輯，比如啟動後你想做什麼？遇到錯誤你想做什麼，這些都可以在註冊小程式的時候實現。

開啟你的app.js，你發現有4+個函式，4個內建函式和你可以自己定義的N個函式。

名詞解釋

• onLanuch 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
• onShow 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
• onHide 當小程式從前臺進入後臺，會觸發 onHide
• onError 當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊

這裡有一個疑問我想大家也會遇到，就是前後臺的概念，簡單的說就是當你在左上角關閉小程式後（或按home鍵退出微信），這個小程式並不會真正的銷燬而是進入後臺模式執行，當再次開啟進入前臺執行而非重新啟動。

最明顯的一個現象就是你在小程式某個特定頁面關閉小程式，再次開啟會直接進入這個特定頁面而非啟動頁。

globalData
這個欄位也很有用。用來存放一些全域性的東西，比如統一的遠端介面地址等，這裡設定的值是有辦法在其他page頁面使用的。

比如某個小程式的globalData如下圖

N個函式

我們都知道除了內建的函式，我們也可以在app.js裡寫其他函式，那麼問題來了？什麼函式要寫到app.js裡那？

回答這個問題之前我們要先知道一個事情，那就是在小程式的其他頁面可以通過getApp函式獲取到app物件，進而可以呼叫app.js裡的東西，也就是說你在app.js裡定義的那些N個函式可以被其他頁面獲取並使用。

這樣你明白了吧？比如登入函式、獲取使用者資訊、彈出框等用於整個app的高頻函式都可以寫到app.js中。

研究到此，老沙欣慰的一笑，先來杯咖啡。

onLaunch

接下來老沙決定研究一下onLaunch函式，首先要說的是onLaunch的引數options裡都有什麼？很簡單，在onLaunch函式內寫下了console.log(options)將它列印到控制檯。

在今後的日子裡，如果你不清楚一個物件或引數什麼的，記住使用console.log列印到控制檯，很方便。

當然，onLaunch可以獲取很多引數，比如path代表開啟小程式的路徑，當你分享小程式某個頁面A到微信群，別人通過A開啟了小程式，則path就是A頁面的路徑。

關於引數的詳細介紹可以看下圖

path、query、scene是常規的引數，在特定情況下會出現其他引數，比如當你要捕獲群分享後的資料時shareTicket引數會出現等等。

一般來說當一個小程式啟動後就需要做的事情可以寫到onLaunch函式，比如登入。

而onShow接收的引數和onLanuch是一致的。

注意點

官方給了一些注意點，基本就是所有了，列下方便大家學習。

• App() 必須在 app.js 中註冊，且不能註冊多個。
• 不要在定義於 App() 內的函式中呼叫 getApp() ，使用 this 就可以拿到 app 例項。
• 不要在 onLaunch 的時候呼叫 getCurrentPages()，此時 page 還沒有生成。
• 通過 getApp() 獲取例項之後，不要私自呼叫生命週期函式。

對於上面的getApp你可能還不瞭解，接下來研究下。

getApp

這是一個函式，主要目的是在其他頁面獲取app例項，比如接下來的程式碼

獲取後你就可以在頁面函式體內直接呼叫app.js的函式和資料，比如app.xxx()或app.globalData這樣。

這裡要重複下上面的注意事項：不要在定義於 App() 內的函式中呼叫 getApp()

app.json

一頓研究後，老沙對app.js已經基本瞭解，接下來攻克app.json這個檔案。微信官方是這樣說的：“app.json檔案用來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。”

接下來用老百姓的話為大家解釋下：

• 將頁面註冊到小程式如何配置？找app.json
• 如何設定導航欄顏色？找app.json
• 如何制定視窗背景顏色？找app.json
• 如何啟動下拉功能？找app.json
• 如何設定小程式底部tab切換頁面？找app.json
• 如何設定網路超時時間？找app.json

一句話，和小程式自身相關的配置，去app.json裡找。

關於app.json裡的詳細配合可以參考官方地址 mp.weixin.qq.com/debug/wxado…

app.wxss

最好理解的就是它了，上篇大家已經知道wxss是樣式檔案，app.wxss則是小程式的全域性樣式，它可以應用到所有page頁面。

wxss是微信小程式自己定義的樣式語言，它支援內聯、匯入等等。同時具有css大部分的特性，所以你可以像寫css一樣寫它們。

關於使用方法可以參考 mp.weixin.qq.com/debug/wxado…

project.config.json

這是一個專案配置檔案，比如專案的名字，appid等等。

如果你還不懂，可以看下開發工具的詳情，那裡面的設定和project.config.json是一樣的，一個配置檔案，一個視覺化的，目的是一樣的。

小結

30分鐘過去了，老沙基本搞明白了入口的邏輯，趕緊給大櫻桃看看去。

.......

10分鐘過去了

.......

老沙低著腦袋回來了，為何？下回給你說。