【主要內(nèi)容:】

1. 微信小程序的文件結(jié)構

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

3. 小程序頁面結(jié)構

一、微信小程序的文件結(jié)構

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

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

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

2.1 pages

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

2.3 utils

這個是公共的、通用的文件夾。從util.js文件的代碼中可以看出，日后這個文件中可能存放的是開發(fā)中經(jīng)常用到的公共、通用部分的代碼。比如系統(tǒng)默認寫入的日期轉(zhuǎn)化函數(shù)。

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

2.4 app.js 

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

2.5 app.json 

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

2.6 app.wxss

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

三、小程序頁面結(jié)構

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

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

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