二、页面组件划分

按微信界面展示大致划分为两个页面，首页index，聊天页chat，以及若干组件，如下图：

首页index中包含一个tab组件和四个tab分别所对应的组件message，contact，discovery，me。而且各自还包含一些子组件，如contact组件中包含alpha字母列表组件，discovery和me组件中分别包含一些list菜单列表组件。其中list组件达到了很好的复用效果。

聊天页chat中包含一个聊天面板组件chatboard和输入框组件input。

根据划分的组件，大致可以得到开发的目录结构：

src
    components
        alpha.wpy --- 联系人
        chatboard.wpy --- "聊天面板" 组件
        contact.wpy --- "联系人" 组件
        discovery.wpy --- "发现" 组件
        input.wpy --- 聊天页输入框组件
        list.wpy --- 菜单列表组件
        me.wpy --- "我" 组件
        message.wpy --- message 组件
        tab.wpy --- tab 组件
    pages
        chat.wpy --- 聊天页
        index.wpy --- 首页
    app.wpy --- 小程序入口