二、頁面組件劃分

按微信界面展示大致劃分為兩個(gè)頁面，首頁index，聊天頁chat，以及若干組件，如下圖：

首頁index中包含一個(gè)tab組件和四個(gè)tab分別所對(duì)應(yīng)的組件message，contact，discovery，me。而且各自還包含一些子組件，如contact組件中包含alpha字母列表組件，discovery和me組件中分別包含一些list菜單列表組件。其中l(wèi)ist組件達(dá)到了很好的復(fù)用效果。

聊天頁chat中包含一個(gè)聊天面板組件chatboard和輸入框組件input。

根據(jù)劃分的組件，大致可以得到開發(fā)的目錄結(jié)構(gòu)：

src
    components
        alpha.wpy --- 聯(lián)系人
        chatboard.wpy --- "聊天面板" 組件
        contact.wpy --- "聯(lián)系人" 組件
        discovery.wpy --- "發(fā)現(xiàn)" 組件
        input.wpy --- 聊天頁輸入框組件
        list.wpy --- 菜單列表組件
        me.wpy --- "我" 組件
        message.wpy --- message 組件
        tab.wpy --- tab 組件
    pages
        chat.wpy --- 聊天頁
        index.wpy --- 首頁
    app.wpy --- 小程序入口