簡要認識小程序開發

其中小程序的構成是由.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封裝和管理，歡迎指導~

總結

以上是生活随笔為你收集整理的小程序的项目结构设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。