本節書摘來自華章出版社《微信小程式：開發入門及案例詳解》一 書中的第2章，第2.1節，作者李駿 邊思，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
架構主體檔案由app.json、app.js、app.wxss構成，這3個檔案必須放置在項目根目錄，一個小程式隻有一份，它們負責小程式整體的配置：
app.json：小程式公共設定，配置小程式全局設定。
app.js：小程式邏輯檔案，主要用于注冊小程式全局執行個體，編譯時會和其他頁面邏輯檔案打包成一份javascript檔案。
app.wxss：小程式公共樣式表，對所有頁面的布局檔案都有效。
app.json和app.js是必須存在的，app.wxss不是必須建立的，可以根據項目情況進行建立。接下來我們逐個分析每個檔案。
app.json是小程式配置檔案，編寫時要嚴格遵循json的格式規範。app.json在程式加載時加載，負責對小程式的全局配置，其配置項有：
pages：設定頁面路徑，必填項。
window：設定預設頁面的視窗表現。
tabbar：設定tab的表現。
networktimeout：設定網絡逾時時間。
debug：設定是否開啟debug模式，預設關閉。
app.json檔案内容整體結構如下：
pages負責注冊小程式頁面，必須填寫，value值為一個包含頁面路徑的數組，用來指定小程式由哪些頁面構成，每一項由頁面“路徑+檔案名”組成，如下所示：
pages數組中頁面路徑不需要填寫檔案字尾名，渲染頁面時架構會自動尋找路徑.json，.js，.wxml，.wxss四個檔案進行整合，如上文配置中<code>“mypages/index/index”</code>路徑，頁面加載時架構會自動比對尋找<code>“mypages/index/index.json”</code>、<code>“mypages/index/index.js”</code>、<code>“mypages/index/index.wxml”</code>、<code>“mypages/index/index.wxss”</code>這四個檔案，路徑中的檔案名可以和目錄名不一緻，但在項目過程中，為了便于管理，建議檔案名和目錄名保持一緻。pages配置數組第一項代表小程式的初始頁面。小程式中增加、删除頁面，都需要對pages進行修改，并且重新開機項目。
window負責設定小程式狀态欄、導覽列、标題、視窗背景色等系統級樣式。屬性有：
navigationbarbackgroundcolor：導航欄背景顔色，值為hexcolor（十六進制顔色值），如：“#ff83fa”，預設值為#000000。
navigationbartextstyle：導航欄标題顔色，僅支援black/white，預設值為white。
navigationbartitletext：導航欄标題文字内容。
backgroundcolor：視窗背景色，值為hexcolor（十六進制顔色值），如：“#ff83fa”，預設值為#ffffff。
backgroundtextstyle：下拉背景字型、loading圖的樣式，僅支援dark/light。
enablepulldownrefresh：是否開啟下拉重新整理，預設為false，開啟後，當使用者下拉時會觸發頁面onpulldownrefresh事件。
配置項目如圖2-5所示。
當程式頂部或底部需要菜單欄時，我們可以通過配置tabbar快速實作，tabbar是個非必填項目。可配置屬性如下：
color：tab上的文字預設顔色，值為hexcolor（十六進制顔色值），必填項。
selectedcolor：tab上的文字選中時的顔色，值為hexcolor（十六進制顔色值），必填項。
backgroundcolor：tab的背景色，值為hexcolor（十六進制顔色值），必填項。
borderstyle：tabbar上邊框的顔色，僅支援black/white，預設值為black。
list：tab的清單，必填項，其值為一個數組，最少2個、最多5個tab，數組中每一項是一個對象，代表一個tab的相關配置，每項的相關配置如下：
◇ pagepath：頁面路徑，必須在pages中先定義，必填項。
◇ text：tab上按鈕的文字，必填項。
◇ iconpath：tab上icon圖檔的相對路徑，icon大小限制為40kb，必填項。
◇ selectediconpath：選中時圖檔的相對路徑，icon大小限制為40kb，必填項。
◇ position：tab在頂部或底部顯示，可選值為bottom、top，預設值為bottom。
示例代碼見代碼清單2-1。
代碼清單2-1 app.json
配置後頁面效果如圖2-6所示。
小程式中各種網絡請求api的逾時時間隻能通過networktimeout統一設定，不能在api中單獨設定，具體的網絡請求api可參考後面章節，networktimeout支援的屬性有：
request：設定wx.request的逾時時間，機關毫秒。
connectsocket：設定wx.connectsocket的逾時時間，機關毫秒。
uploadfile：設定wx.uploadfile的逾時時間，機關毫秒。
downloadfile：設定wx.downloadfile的逾時時間，機關毫秒。
示例代碼如下：
此配置項控制是否開啟debug模式，預設是關閉的。開啟debug模式後，在開發者工具的控制台，調試資訊以info的形式輸出，如圖2-7所示。其中資訊有page的注冊、頁面路由、資料更新、事件觸發，可以幫助開發者快速定位一些常見問題。
以上便是app.json的5類配置項，這些配置項都是全局的，小程式中除了app.json這種全局配置檔案還有頁面配置檔案，當路由到對應頁面時，頁面配置檔案的配置項将會覆寫全局配置，頁面配置檔案将在後續内容中進行詳細介紹。
小程式中邏輯檔案分為頁面邏輯檔案和小程式邏輯檔案，app.js便是小程式邏輯檔案，在這個檔案中，我們可以通過app()函數注冊小程式生命周期函數、全局方法和全局屬性，已注冊的小程式執行個體可以在其他邏輯層代碼中通過getapp()擷取。
app()函數用于注冊一個小程式，參數為一個object對象，在這個參數對象中我們可以注冊自定義方法和屬性供全局使用，就像在quick start項目中，我們利用app()注冊了使用者登入資訊。app()函數必須在app.js中注冊，且不能注冊多個，其參數屬性如下：
onlaunch：生命周期函數，監聽小程式初始化。當小程式初始化完成時，就會觸發onlaunch，onloaunch事件全局隻會觸發一次。
onshow：生命周期函數，監聽小程式顯示。當小程式啟動，或者從背景進入前台顯示時都會觸發onshow。
onhide：生命周期函數，監聽小程式隐藏。當小程式從前台進入背景會觸發。
其他：開發者可以添加任意的函數或資料到object參數中，這些屬性會被注冊到小程式對象中，其他邏輯檔案可以通過getapp()函數擷取已注冊的小程式執行個體。
關于小程式生命周期函數的執行時機我們要特别講解一下：當啟動一個小程式時，首先會先依次觸發onlaunch和onshow方法，然後通過app.json的pages屬性注冊相應的頁面，最後根據預設路徑加載首頁；當使用者點選左上角關閉，或者按了裝置home按鈕離開微信時，小程式并沒有直接銷毀，而是進入了背景，這兩種情況都會觸發onhide方法；當再次喚醒微信（針對點選home按鈕離開微信）或再次從微信中打開小程式時，又會從背景進入前台，這時會觸發onshow方法。隻有當小程式進入背景一定時間，或者系統資源占用過高，才會被真正銷毀。
注冊小程式示例代碼如下：
注冊小程式後，在其他邏輯檔案中，可以通過全局函數getapp()擷取小程式執行個體，例如：
在app()注冊的函數中，我們可以使用this直接擷取app執行個體，而不用getapp()方法。通過getapp()擷取執行個體後，可以擷取注冊的屬性、調用注冊的方法，但不要私自調用生命周期函數（onlaunch、onshow、onhide），這樣會打亂項目邏輯，除非你已經對它們很熟悉。
app.wxss是全局樣式表，對項目中每個頁面都有效，可将一些系統級别的統一樣式風格寫入這個檔案，頁面渲染時，架構頁中的.wxss檔案樣式會覆寫app.wxss中相同的選擇器樣式。wxss是小程式基于css拓展的一套樣式語言，它實作了css大部分規則，其具體介紹請參考下一節。
小程式架構主體相關的檔案app.json、app.js、app.wxss我們已經全部介紹完成，下面為大家介紹架構頁面相關的檔案。