行業動態

通常來說，一套軟件的應用架構包括數據層、業務邏輯層、服務層、控制層、展示層、用戶等多個層次。

從本質上來說，微信小程序只是一套系統的展示層（即常說的前端程序），主要用來展示系統的信息。通常還需要有數據層、業務邏輯層、服務層、控制層等這些通 常說的后端程序為微信小程序提供支持。隨著前端程序開發的進一步發展，近幾年前端程序開發也有了層次的細分，微信小程序就是這樣的前端開發框架，提供了前端的邏輯層、視圖層的分層結構。

1、目錄結構

在HTML開發中，開發一個HTML頁面并不只是編寫一個擴展名為html（或htin ） 的文件即可，通常還需要調用一些擴展名為js的JavaScript文件來實現頁面邏輯，使 用擴展名為css的樣式表文件來美化樣式。在微信小程序中，也采用了類似方式，即 一個微信小程序頁面由一個頁面描述文件、一個頁面邏輯文件、一個樣式表文件來進行描述。

有了這些概念，再打開微信小程序開發工具，查看下圖所示的目錄結構可看到， 在項目的主目錄下有2個子目錄，5個文件。

在主目錄中的3個以app開頭的文件就是微信小程序框架的主描述文件，project.config.json和sitemap.json文件是開發者工具配置文件，這5個文件不屬于任何頁面。

pages目錄下又有2個子目錄，分別是index和logs,每個子目錄中保存著一個頁 面的相關文件，通常一個頁面包含4種不同擴展名的文件，分別表示頁面中的邏輯文件、頁面結構文件、樣式表文件、配置文件。為了方便開發者減少配置項，框架特別 約定描述頁面的這4個文件必須具有相同的路徑與文件名。

2、主體文件

一個微信小程序的主體部分由3個文件組成，這3個文件必須放在項目的主目錄中，3個文件的名稱也是固定的，文件名和作用如下：

? app.js,這是微信小程序的主邏輯文件，在項目中不能缺少。這個文件主要用 來注冊小程序。

? app.json,這是微信小程序的主配置文件，在項目中不能缺少。這個文件用來 對微信小程序進行全局配置。

? app.wxss,這是微信小程序的主樣式表文件，在項目中可以不要。這個文件和 HTML的css樣式表文件作用相同。主樣式表文件中設置的樣式，在其他頁 面文件中也可以共享。

3、頁面文件

微信小程序通常需要由多個頁面來組成，每個頁面由4個文件構成，這4個文件 的主文件名必須，通過4種不同擴展名來區分，擴展名的含義如下：

? js,頁面的邏輯文件，在里面編寫JavaScript代碼控制頁面邏輯，每個頁面中 必須有這個文件。

? wxml,這是頁面的描述文件（類似HTML頁面中擴展名為html或htm的描 述文件），用來設計頁面的布局，進行數據綁定等。每個頁面中必須有這個 文件。

? wxss,這是頁面的樣式表文件，用來定義本頁面使用到的各類樣式表。同時， 頁面還可使用app.wxss中定義的樣式。當然，也可以使用內聯樣式，如果當 前頁面也有相同的樣式描述，由使用層疊樣式的規則來決定最終的樣式。如 果頁面使用的樣式都在app.wxss中定義了，這個文件也可以省略。

? json,這是頁面配置文件。如果頁面沒有特殊配置，可以省略該文件，只使用 app.json中的配置即可。

4、其他文件

在微信小程序中，除了使用上面介紹的文件之外，一般還會使用到圖片、音頻、 視頻、通用js模塊等文件，這些文件可放置在項目中的任何位置，在調用時指定相對目錄即可。如上圖所示的目錄結構中utils目錄的util.js就是一個公用js庫，其中默認包含了一個日期格式轉換的函數，在某個頁面中如果需要用到該函數，在頁面的js 文件中將其引入后就可直接使用。類似的，像圖片、音頻、視頻等資源類的文件也可單獨創建子目錄來存放。當然， 一般在微信小程序中也只需要保存界面所使用的一些靜態圖片就可以，而音頻、視頻 這些大文件放在后端網站即可。