|
作者：董偉明，來自原文地址
效果圖：
PS: 本文是假設(shè)你已經(jīng)看過微信小程序的官方文檔、demo甚至已經(jīng)動手寫過小程序，否則建議先去翻翻再來看。
設(shè)計目錄結(jié)構(gòu)
我在上一節(jié)知乎Live全文搜索之微信小程序?qū)崙?zhàn)（一）/)介紹了組件化，今天就是要實施了。首先我們考慮一個只有index頁面的小程序的目錄結(jié)構(gòu)是怎么樣的：
1
2
3
4
5
6
7
8
9
10
|
├── app.js // 全局的腳本文件
├── app.json // 全局的配置文件
├── app.wxss // 全局的樣式文件
├── pages
│ ├── index
│ │ ├── index.js // 腳本文件
│ │ ├── index.json // 組件的配置文件
│ │ ├── index.wxml // 頁面結(jié)構(gòu)文件
│ │ ├── rating.png // 還有其他的圖片..
│ │ └── index.wxss // 樣式表文件
|
pages目錄下有個index目錄，存放了名字叫做index，后綴為js/json/wxml/wxss的四個文件。這樣做的好處是：
-
index目錄下存放了頁面組件所需要的各種資源，就近維護。如果是React，還得通過使用各種loader，用import的方式來用，所以我喜歡小程序的處理方式。
-
當某天不再需要index這個頁面，或者要替換成其他的組件，直接把index目錄刪掉/替換就完事了。
接著我們基于Live搜索，思考下如果頁面變的復雜，重要元素多的場景：
-
需要Live、User、Topic三大元素。
-
有些內(nèi)容是可以重復被利用的，比如評分（就是大家熟悉的星星，5星滿分，4.5星次之…）在Live詳情頁的效果比較大，而在搜索頁由于區(qū)域小所以小了很多，但是本質(zhì)上內(nèi)容是一樣的，只不過樣式不同。
-
有些內(nèi)容在不同頁面重復出現(xiàn)，比如Live，在topic詳情頁、用戶詳情頁、發(fā)現(xiàn)頁都有，而且一樣。
那么：
-
評分是一個獨立的區(qū)域，可以視作一個組件。
-
組件與組件之間應(yīng)該可以自由組合，所以組件的粒度要細，細到一個組件就是做一件事。
-
單個評分組件拿出來是無意義的，只有和Live信息匯合起來才是一個完整頁面。
所以重新定義目錄結(jié)構(gòu)吧：
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
|
現(xiàn)在pages的每個子目錄下后綴為js的文件就是頁面邏輯。比如pages/users/users.js存放了/users/users的頁面邏輯。
我新增了3個目錄：
-
utils。存放一些用得到的功能性的函數(shù)，如和后端通信的api.js，一會我們詳細再看。
-
images。存放公共的靜態(tài)圖片資源。
-
components。組件目錄，我們把抽象的元素都放在這里，比如評分是一個組件。組件目錄下有這些文件：
|
