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

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

2.文件目錄中每個(gè)文件的作用

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

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

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

二、文件目錄中每個(gè)文件的作用

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

2.1 pages

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

2.3 utils

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

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

2.4 app.js 

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

2.5 app.json 

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

2.6 app.wxss

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

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

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

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

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