簡要認(rèn)識(shí)小程序開發(fā)

其中小程序的構(gòu)成是由.wxml、.wxss、.js、.json四種類型構(gòu)成(下文將簡稱為四類文件)。其開發(fā)方式跟傳統(tǒng)網(wǎng)頁開發(fā)是十分類似的。

• .wxml模板文件對(duì)應(yīng)為傳統(tǒng)網(wǎng)頁開發(fā)的.html文件，是一個(gè)頁面(組件)的骨架。只不過它里面采用的語法跟傳統(tǒng)的HTML語法有些差異, 比如標(biāo)簽的名稱是微信自己在底層封裝的組件。
• .wxss樣式文件則對(duì)應(yīng)CSS樣式文件，具有大部分CSS的特性(比如css3的某些偽類特性就沒有，但常見的css3屬性倒是可以用)，除此之外還在此基礎(chǔ)上做了新的擴(kuò)展。
• js一直都是作為跟頁面交互角色，在小程序開發(fā)中也不例外。
  在js中，可以使用微信提供的API。如常見的Page(構(gòu)造器)和Component，還有微信給出的一些特定權(quán)限的API.
• json則是配置文件，一般是頁面或者組件內(nèi)那一級(jí)的配置文件。

(這里有個(gè)小細(xì)節(jié)可以區(qū)分wxml和wxss區(qū)別，這兩者都是以wx(微信)為開頭，后面的小尾巴是區(qū)別是樣式文件還是模板文件)。

具體的更多細(xì)節(jié)可以去看官網(wǎng)文檔。本文的重心還是在討論項(xiàng)目結(jié)構(gòu)如何安排會(huì)比較整潔合理。

項(xiàng)目結(jié)構(gòu)設(shè)計(jì)思路

每個(gè)小程序項(xiàng)目的根目錄會(huì)有一個(gè)project.config.json的項(xiàng)目配置文件，可以設(shè)置miniprogramRoot屬性指定小程序源碼的目錄, 默認(rèn)為根目錄(/)。意思是說把源代碼放在/src/下的目錄也沒有問題，筆者采用的是源碼在根目錄方式。

首先，小程序規(guī)定：一個(gè)小程序主體部分由三個(gè)文件組成，同時(shí)必須放在項(xiàng)目的根目錄。

• app.js 需要在里面調(diào)用App()函數(shù)，注冊(cè)一個(gè)小程序。
• app.json 小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
• app.wxss 全局樣式，作用于每一個(gè)頁面。但注意的是app.wxss寫的全局樣式不會(huì)影響組件內(nèi)的樣式。

├── app.js ├── app.json ├── app.wxss └── project.config.json

頁面

小程序是由許多頁面組成的，因此我們需要一個(gè)目錄來存放頁面, 我們通常把這個(gè)文件夾命名為/pages/。app.json的pages是一個(gè)數(shù)組，數(shù)組的每一項(xiàng)是用來指定頁面的路徑，框架會(huì)根據(jù)路徑自動(dòng)去尋找相對(duì)位置的四類文件(小程序的代碼構(gòu)成)。數(shù)組第一項(xiàng)為小程序入口頁面。

每個(gè)頁面為單獨(dú)的一個(gè)目錄, 頁面的四類文件使用統(tǒng)一的名稱。這里我們跟官方同步，四類文件跟隨目錄的名稱走:

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

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

這時(shí)可以考慮換一種方式儲(chǔ)存，在頁面文件夾里再加一個(gè)文件夾, 名為subpage。把子頁放在這個(gè)文件夾內(nèi)，這樣層級(jí)關(guān)系就清晰了，缺點(diǎn)就是不適合套太深。或者說一個(gè)產(chǎn)品也不應(yīng)該把頁面藏得太深讓用戶找不到...

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

至于項(xiàng)目簡單一些的話前者會(huì)好一點(diǎn)(子頁命名參照master-description的格式)，頁面太過復(fù)雜的話可能會(huì)比較推薦使用后者的方式。

圖片

既然有了頁面，那么頁面必不可免會(huì)需要引用到圖片。圖片大致可以分為業(yè)務(wù)類和公共類。一些可以復(fù)用的圖片我們可以放在同一個(gè)地方統(tǒng)一管理。而業(yè)務(wù)類則放在對(duì)應(yīng)的頁面目錄下, 命名格式推薦為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引入圖片時(shí)不能通過根目錄進(jìn)行查找，而wxml則沒有這種限制。

<!-- 絕對(duì)路徑 --> <images src="/images/icon@download.png" /><!-- 相對(duì)路徑 --> <images src="./images/index@video.png" /> // 會(huì)報(bào)錯(cuò) import iconDownload from '/images/icon@download.png' // 只能使用相對(duì)路徑 import iconDownload from '/../../icon@download.png'

樣式

寫完頁面后自然需要給頁面潤色, 我們可以通過在頁面的.wxss來寫局部樣式，這沒問題。但在我們完成一個(gè)又一個(gè)頁面后，這時(shí)你可能會(huì)發(fā)現(xiàn)有些頁面的樣式重復(fù)性太高了。

因?yàn)橐粋€(gè)成熟的設(shè)計(jì)師，在設(shè)計(jì)每一個(gè)產(chǎn)品時(shí)，大多會(huì)有一套設(shè)計(jì)風(fēng)格或者稱之為主題的東西。這些元素大量重復(fù)在各個(gè)頁面中，我們重復(fù)寫這些樣式實(shí)際上代碼是有點(diǎn)冗余的。

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

這時(shí)有經(jīng)驗(yàn)的開發(fā)者很自然就會(huì)想到將重復(fù)性的代碼抽出來，所幸微信提供了@import語句可以導(dǎo)入外聯(lián)樣式表。而這些通用的樣式可以放在/style/目錄下

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

直接在.wxss的頂層引入即可復(fù)用。

@improt '/style/button.wxss';/* other code */

至于是為何不在app.json中設(shè)定全局樣式而單獨(dú)抽出來的原因也是前文所提及的問題————組件中默認(rèn)情況下不受全局樣式影響的，理論上組件也不該受到外部樣式的”無意“的影響。
但app.json中的樣式只需要加載一次就全局可用，外部樣式就不一定了(因?yàn)闆]有實(shí)際的調(diào)研過)，而且還需要額外的去做引入的那一步。具體用哪一種方式還是要看具體情況來自己斟酌啦~

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

組件

組件對(duì)于熟悉模塊化開發(fā)的同學(xué)自然不陌生，小程序基礎(chǔ)庫版本 1.6.3 就開始支持自定義組件了，至今為止也不用擔(dān)心兼容性的問題了。從筆者角度來看看法，小程序的組件可以分為全局組件和局部組件。

全局性是指那種封裝了登錄、彈框、動(dòng)畫組件等等之類的組件，局部的大多是減輕一個(gè)頁面內(nèi)的復(fù)雜度，通過模塊"搭積木"的方式來組成一個(gè)頁面。即使某個(gè)功能砍了也能對(duì)頁面減少牽連。

我們習(xí)慣于將全局性的東西放在源碼的根目錄上，因此會(huì)在根目錄上創(chuàng)建/components文件夾，里面存放全局性的組件。
其中全局性的組件有不少會(huì)有同等類型的組件，因?yàn)榭梢栽龠M(jìn)一步的分類，如動(dòng)畫類組件存放為一個(gè)文件夾內(nèi)。
再利用編輯器的文件名排序的特性，可以加上@提前組件集合。

組件下的四類文件按照componment/index的方式命名與page區(qū)分。

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

utils

在原生小程序開發(fā)中，一般在源碼的根目錄下，都會(huì)有一個(gè)utils文件夾，專門來干雜七雜八的臟話累活。其中包含工具類函數(shù)、API的管理、配置信息等。

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

分包

當(dāng)小程序的資源大小超過了2M時(shí)，進(jìn)行預(yù)覽調(diào)試時(shí)就會(huì)報(bào)文件過大的錯(cuò)誤，這時(shí)你可能就需要進(jìn)行分包，將資源分開加載。小程序文檔給出的目錄結(jié)構(gòu)是:

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

但經(jīng)過我們?cè)陧?xiàng)目中嘗試，我們發(fā)現(xiàn)通過編輯器的字符串排序后，會(huì)破壞目錄結(jié)構(gòu)的清晰度，所以推薦將分包放置到一個(gè)文件夾內(nèi)。

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

結(jié)束

最后的一個(gè)小程序項(xiàng)目主體結(jié)構(gòu)大致是：

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

以上是從原生小程序開發(fā)的角度來對(duì)項(xiàng)目結(jié)構(gòu)的設(shè)計(jì)進(jìn)行一個(gè)思路總結(jié)，沒有過多的講更深入的東西。下一期想整理一下關(guān)于API封裝和管理，歡迎指導(dǎo)~

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。