【主要內容:】

1. 微信小程序的文件結構

2.文件目錄中每個文件的作用

3. 小程序頁面結構

一、微信小程序的文件結構

在微信小程序開發初探中講了如何創建一個微信的小程序以及微信小程序web開發工具的使用介紹。今天就來介紹一下微信小程序工程的目錄結構。下邊這張圖展示了新建的一個微信小程序工程中包含的所有文件：

二、文件目錄中每個文件的作用

每一個微信小程序工程都包含了兩個文件夾pages和utils，和三個文件app.js、app.json、app.wxss。

2.1 pages

微信小程序會有很多的頁面，每個小程序頁面都是以文件夾的形式存放在pages目錄下邊。默認的工程中包含了兩個頁面：Index和logs

2.3 utils

這個是公共的、通用的文件夾。從util.js文件的代碼中可以看出，日后這個文件中可能存放的是開發中經常用到的公共、通用部分的代碼。比如系統默認寫入的日期轉化函數。

每一個小程序工程都包含了下邊這三個文件。也就是說每個小程序主題都由這三個文件組成，而且必須放在項目的根目錄下。

2.4 app.js 

從app.js的后綴就可以看出，他的實質是JavaScript文件，用來控制小程序的邏輯。

2.5 app.json 

app.json里邊主要是工程的配置文件。在app.json中可以設置一些工程的公共設置。比如：頁面的個數、窗口的顯示設置、Tabbar設置、網絡設置等等。

2.6 app.wxss

app.wxss文件實質是CSS層疊樣式表，所以說這個文件是小程序公共的樣式表文件，可以在這個文件中做視圖層面的樣式設置。

三、小程序頁面結構

微信小程序由很多個頁面組成，每個小程序頁面都有4個文件組成：

和小程序主體部分的三個文件作用一樣，小程序頁面描述多了一個xxx.wxml文件，這個一個HTML類型的文件。所以xxx.wxml的作用是開發頁面布局功能。

為了方便減少開發配置，微信規定描述頁面的4個文件必須具有相同的路徑和文件名。