|
作者(zhe)：董(dong)偉明，來(lai)自(zi)原文地址
效果圖(tu)：
PS: 本文是假設你已經(jing)看(kan)過微信(xin)小程序的官方文檔、demo甚至已經(jing)動手寫(xie)過小程序，否則(ze)建(jian)議先去翻(fan)翻(fan)再來看(kan)。
設計目錄結構
我在上一(yi)節知乎Live全文搜索之微信小程序實戰（一(yi)）/)介紹了組件化，今天(tian)就是要實施了。首先我們(men)考慮一(yi)個只有(you)index頁面的(de)小程序的(de)目(mu)錄結構是怎么樣(yang)的(de)：
1
2
3
4
5
6
7
8
9
10
|
├── app.js // 全局的腳本文件
├── app.json // 全局的配置文件
├── app.wxss // 全局的樣式文件
├── pages
│ ├── index
│ │ ├── index.js // 腳本文件
│ │ ├── index.json // 組件的配置文件
│ │ ├── index.wxml // 頁面結構文件
│ │ ├── rating.png // 還有其他的圖片..
│ │ └── index.wxss // 樣式表文件
|
pages目錄(lu)下有個index目錄(lu)，存放了名(ming)字叫(jiao)做index，后(hou)綴(zhui)為js/json/wxml/wxss的(de)四個文件。這樣做的(de)好處是：
-
index目錄下存放了頁面組件所需要的各種資源，就近維護。如果是React，還得通過使用各種loader，用import的方式來用，所以我喜歡小程序的處理方式。
-
當某天不再需要index這個頁面，或者要替換成其他的組件，直接把index目錄刪掉/替換就完事了。
接(jie)著(zhu)我們基于Live搜索，思(si)考下如果(guo)頁面變的復(fu)雜，重要元(yuan)素多的場景：
-
需要Live、User、Topic三大元素。
-
有些內容是可以重復被利用的，比如評分（就是大家熟悉的星星，5星滿分，4.5星次之…）在Live詳情頁的效果比較大，而在搜索頁由于區域小所以小了很多，但是本質上內容是一樣的，只不過樣式不同。
-
有些內容在不同頁面重復出現，比如Live，在topic詳情頁、用戶詳情頁、發現頁都有，而且一樣。
那么：
-
評分是一個獨立的區域，可以視作一個組件。
-
組件與組件之間應該可以自由組合，所以組件的粒度要細，細到一個組件就是做一件事。
-
單個評分組件拿出來是無意義的，只有和Live信息匯合起來才是一個完整頁面。
所以重新定義目錄結構吧：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
App
├── components
│ ├── hot
│ ├── live
│ ├── user
│ └── widget
├── images
│ └── rating
├── pages
│ ├── explore
│ ├── hot
│ ├── live
│ ├── search
│ ├── topic
│ └── users
└── utils
|
現在pages的每個(ge)子目錄下(xia)后綴為js的文(wen)件就是頁(ye)面邏輯(ji)。比(bi)如(ru)pages/users/users.js存放了/users/users的頁(ye)面邏輯(ji)。
我新增(zeng)了3個(ge)目錄：
-
utils。存放一些用得到的功能性的函數，如和后端通信的api.js，一會我們詳細再看。
-
images。存放公共的靜態圖片資源。
-
components。組件目錄，我們把抽象的元素都放在這里，比如評分是一個組件。組件目錄下有這些文件：
|
