作者：董偉明，來(lái)自原文地址

效果圖：

PS: 本文是假設(shè)你已經(jīng)看過(guò)微信小程序的官方文檔、demo甚至已經(jīng)動(dòng)手寫(xiě)過(guò)小程序，否則建議先去翻翻再來(lái)看。

設(shè)計(jì)目錄結(jié)構(gòu)

我在上一節(jié)知乎Live全文搜索之微信小程序?qū)崙?zhàn)（一）/)介紹了組件化，今天就是要實(shí)施了。首先我們考慮一個(gè)只有index頁(yè)面的小程序的目錄結(jié)構(gòu)是怎么樣的：

pages目錄下有個(gè)index目錄，存放了名字叫做index，后綴為js/json/wxml/wxss的四個(gè)文件。這樣做的好處是：

1. index目錄下存放了頁(yè)面組件所需要的各種資源，就近維護(hù)。如果是React，還得通過(guò)使用各種loader，用import的方式來(lái)用，所以我喜歡小程序的處理方式。
2. 當(dāng)某天不再需要index這個(gè)頁(yè)面，或者要替換成其他的組件，直接把index目錄刪掉/替換就完事了。

接著我們基于Live搜索，思考下如果頁(yè)面變的復(fù)雜，重要元素多的場(chǎng)景：

1. 需要Live、User、Topic三大元素。
2. 有些內(nèi)容是可以重復(fù)被利用的，比如評(píng)分（就是大家熟悉的星星，5星滿分，4.5星次之…）在Live詳情頁(yè)的效果比較大，而在搜索頁(yè)由于區(qū)域小所以小了很多，但是本質(zhì)上內(nèi)容是一樣的，只不過(guò)樣式不同。
3. 有些內(nèi)容在不同頁(yè)面重復(fù)出現(xiàn)，比如Live，在topic詳情頁(yè)、用戶詳情頁(yè)、發(fā)現(xiàn)頁(yè)都有，而且一樣。

那么：

1. 評(píng)分是一個(gè)獨(dú)立的區(qū)域，可以視作一個(gè)組件。
2. 組件與組件之間應(yīng)該可以自由組合，所以組件的粒度要細(xì)，細(xì)到一個(gè)組件就是做一件事。
3. 單個(gè)評(píng)分組件拿出來(lái)是無(wú)意義的，只有和Live信息匯合起來(lái)才是一個(gè)完整頁(yè)面。

所以重新定義目錄結(jié)構(gòu)吧：

現(xiàn)在pages的每個(gè)子目錄下后綴為js的文件就是頁(yè)面邏輯。比如pages/users/users.js存放了/users/users的頁(yè)面邏輯。

我新增了3個(gè)目錄：

1. utils。存放一些用得到的功能性的函數(shù)，如和后端通信的api.js，一會(huì)我們?cè)敿?xì)再看。
2. images。存放公共的靜態(tài)圖片資源。
3. components。組件目錄，我們把抽象的元素都放在這里，比如評(píng)分是一個(gè)組件。組件目錄下有這些文件：