小程式的專案結構設計

weixin_33763244發表於2018-12-16

簡要認識小程式開發

其中小程式的構成是由.wxml、.wxss、.js、.json四種型別構成(下文將簡稱為四類檔案)。其開發方式跟傳統網頁開發是十分類似的。

  • .wxml模板檔案對應為傳統網頁開發的.html檔案，是一個頁面(元件)的骨架。只不過它裡面採用的語法跟傳統的HTML語法有些差異, 比如標籤的名稱是微信自己在底層封裝的元件。
  • .wxss樣式檔案則對應CSS樣式檔案，具有大部分CSS的特性(比如css3的某些偽類特性就沒有，但常見的css3屬性倒是可以用)，除此之外還在此基礎上做了新的擴充套件。
  • js一直都是作為跟頁面互動角色，在小程式開發中也不例外。
    在js中，可以使用微信提供的API。如常見的Page(構造器)和Component，還有微信給出的一些特定許可權的API.
  • json則是配置檔案，一般是頁面或者元件內那一級的配置檔案。

(這裡有個小細節可以區分wxml和wxss區別，這兩者都是以wx(微信)為開頭，後面的小尾巴是區別是樣式檔案還是模板檔案)。

具體的更多細節可以去看官網文件。本文的重心還是在討論專案結構如何安排會比較整潔合理。

專案結構設計思路

每個小程式專案的根目錄會有一個project.config.json的專案配置檔案，可以設定miniprogramRoot屬性指定小程式原始碼的目錄, 預設為根目錄(/)。意思是說把原始碼放在/src/下的目錄也沒有問題，筆者採用的是原始碼在根目錄方式。

首先，小程式規定：一個小程式主體部分由三個檔案組成，同時必須放在專案的根目錄。

  • app.js 需要在裡面呼叫App()函式，註冊一個小程式。
  • app.json 小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。
  • app.wxss 全域性樣式，作用於每一個頁面。但注意的是app.wxss寫的全域性樣式不會影響元件內的樣式。
├── app.js
├── app.json
├── app.wxss
└── project.config.json

頁面

小程式是由許多頁面組成的，因此我們需要一個目錄來存放頁面, 我們通常把這個資料夾命名為/pages/。app.json的pages是一個陣列，陣列的每一項是用來指定頁面的路徑，框架會根據路徑自動去尋找相對位置的四類檔案(小程式的程式碼構成)。陣列第一項為小程式入口頁面。

每個頁面為單獨的一個目錄, 頁面的四類檔案使用統一的名稱。這裡我們跟官方同步，四類檔案跟隨目錄的名稱走:

├── pages
│   │── home
│   │   ├── home.wxml
│   │   ├── home.js
│   │   ├── home.json
│   │   └── home.wxss
│   └── user
│       ├── user.wxml
│       └── user.js
├── ...
└── project.config.json

除此之外，在開發小程式時，頁面是會分主要頁面和次要頁面(子頁)，子頁通常是一些列表頁詳情頁的東西。理論上只會有一個入口能跳的過去那種二級頁面。如果這樣的子頁一多，然後全都放在了/pages/目錄下，就會導致目錄列表變得龐大，會比較難找...

這時可以考慮換一種方式儲存，在頁面資料夾裡再加一個資料夾, 名為subpage。把子頁放在這個資料夾內，這樣層級關係就清晰了，缺點就是不適合套太深。或者說一個產品也不應該把頁面藏得太深讓使用者找不到...

├── pages
│   └── home
│       ├── subpage
│       │   └── detail
│       │       ├── index.wxml
│       │       └── ...
│       ├── home.wxml
│       └── ...
├── ...
└── project.config.json

至於專案簡單一些的話前者會好一點(子頁命名參照master-description的格式)，頁面太過複雜的話可能會比較推薦使用後者的方式。

圖片

既然有了頁面，那麼頁面必不可免會需要引用到圖片。圖片大致可以分為業務類和公共類。一些可以複用的圖片我們可以放在同一個地方統一管理。而業務類則放在對應的頁面目錄下, 命名格式推薦為dir@description:

├── iamges (公共圖片)
│   │── icon
│   │   ├── icon@download.png
│   │   └── icon@cancel.png
|   └── ...
├── pages
│   └── index
│       ├── images
│       |   └── index@bg.png
│       |   └── index@video.png
│       ├── index.wxml
│       ├── index.js
│       ├── index.json
│       └── index.wxss
├── ...
└── project.config.json

但值得注意的是，在js中使用import引入圖片時不能通過根目錄進行查詢，而wxml則沒有這種限制。

<!-- 絕對路徑 -->
<images src="/images/icon@download.png" />

<!-- 相對路徑 -->
<images src="./images/index@video.png" />
// 會報錯
import iconDownload from '/images/icon@download.png'
// 只能使用相對路徑
import iconDownload from '/../../icon@download.png'

樣式

寫完頁面後自然需要給頁面潤色, 我們可以通過在頁面的.wxss來寫區域性樣式，這沒問題。但在我們完成一個又一個頁面後，這時你可能會發現有些頁面的樣式重複性太高了。

因為一個成熟的設計師，在設計每一個產品時，大多會有一套設計風格或者稱之為主題的東西。這些元素大量重複在各個頁面中，我們重複寫這些樣式實際上程式碼是有點冗餘的。

{% asset_img button.png 主題按鈕 %}

這時有經驗的開發者很自然就會想到將重複性的程式碼抽出來，所幸微信提供了@import語句可以匯入外聯樣式表。而這些通用的樣式可以放在/style/目錄下

├── style
│   ├── button.wxss
│   └── ...
├── ...
└── project.config.json

直接在.wxss的頂層引入即可複用。

@improt '/style/button.wxss';

/* other code */

至於是為何不在app.json中設定全域性樣式而單獨抽出來的原因也是前文所提及的問題————元件中預設情況下不受全域性樣式影響的，理論上元件也不該受到外部樣式的”無意“的影響。
但app.json中的樣式只需要載入一次就全域性可用，外部樣式就不一定了(因為沒有實際的調研過)，而且還需要額外的去做引入的那一步。具體用哪一種方式還是要看具體情況來自己斟酌啦~

還有一些方法，比如使用scss、less之類的預處理之類的方案，也是可以，只不過超出了本文的討論範圍，不展開講。

元件

元件對於熟悉模組化開發的同學自然不陌生，小程式基礎庫版本 1.6.3 就開始支援自定義元件了，至今為止也不用擔心相容性的問題了。從筆者角度來看看法，小程式的元件可以分為全域性元件和區域性元件。

全域性性是指那種封裝了登入、彈框、動畫元件等等之類的元件，區域性的大多是減輕一個頁面內的複雜度，通過模組"搭積木"的方式來組成一個頁面。即使某個功能砍了也能對頁面減少牽連。

我們習慣於將全域性性的東西放在原始碼的根目錄上，因此會在根目錄上建立/components資料夾，裡面存放全域性性的元件。
其中全域性性的元件有不少會有同等型別的元件，因為可以再進一步的分類，如動畫類元件存放為一個資料夾內。
再利用編輯器的檔名排序的特性，可以加上@提前元件集合。

元件下的四類檔案按照componment/index的方式命名與page區分。

├── componments (公共元件)
│   │── anima
│   │   ├── coin
│   |   |   ├── index.js
│   |   |   └── ...
│   │   └── liquid
│   |       └── ...
|   └── ...
├── pages
│   └── home
│       ├── componments
│       |   └── goods
│       |     ├── index.wxml
│       |     └── ...
│       ├── home.wxml
│       ├── home.js
│       ├── home.json
│       └── home.wxss
├── ...
└── project.config.json

utils

在原生小程式開發中，一般在原始碼的根目錄下，都會有一個utils資料夾，專門來幹雜七雜八的髒話累活。其中包含工具類函式、API的管理、配置資訊等。

├── utils (工具集)
│   │── api
│   │   └── ...
|   ├── ... (其他工具類)
|   ├── config.js
|   └── local.config.js (本地配置，git忽略)
├── ...
└── project.config.json

分包

當小程式的資源大小超過了2M時，進行預覽除錯時就會報檔案過大的錯誤，這時你可能就需要進行分包，將資源分開載入。小程式文件給出的目錄結構是:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── user
└── utils

但經過我們在專案中嘗試，我們發現通過編輯器的字串排序後，會破壞目錄結構的清晰度，所以推薦將分包放置到一個資料夾內。

├── subpackages (分包)
│   │── news
│   │   └── ...
|   └── store
│       └── ...
├── ...
└── project.config.json

結束

最後的一個小程式專案主體結構大致是：

├── components (公共元件目錄)
│   ├── @anima (動畫元件)
│   └── ...
├── images（公共圖片）
│   └── icon
│      ├── icon@download.png
│      └── icon@cancel.png
├── pages（主包目錄）
│   └── home (app.json 設定的入口頁)
│       ├── home.wxml
│       ├── home.js
│       ├── home.json
│       └── home.wxss
├── style（公用樣式目錄）
├── subpackages（分包目錄）
│   │── news
|   └── store
├── utils（公共模組，工具類）
│   ├── config.js（專案配置）
│   └── local.config.js (本地配置，git忽略)
├── .editorconfig
├── .gitignore
├── app.js
├── app.json
├── app.wxss
├── project.config.json
└── README.md

以上是從原生小程式開發的角度來對專案結構的設計進行一個思路總結，沒有過多的講更深入的東西。下一期想整理一下關於API封裝和管理，歡迎指導~

相關文章