1.8：聊天框体实现五(好友填充框)

作者：小傅哥
博客：https://bugstack.cn (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！

一、前言

这一章节里我们需要实现的是将好友栏中四个内容；“新的朋友”、“公众号”、“群组”、“好友”，添加完善相应的功能。如下；

• 在“新的朋友”里添加好友搜索和添加的功能。因为我们实现的 PC 端微信，是没有手机端的，所以我们需要在这里添加好友搜索功能。如果你开发的是企业聊天软件，那么这里的好友就是你的企业组织关系。
• 在“公众号”里添加一个公众号的展示。因为这部分不是我们主要实现的功能，所以只做一个展示即可。
• 剩下两个“群组”、“好友”，目前我只做一个 发送消息 的按钮。像是群组中好友展示以及个人信息展示都可以完善的，但我们这里尽可能将最核心的功能代码展示给大家。

那么，接下来我们就开始从设计到编码来实现这部分功能。

二、框体分析

• 在这部分我们需要实现右侧的四个面板内容的填充，相对来说逻辑加多是第一个好友的搜索和添加。另外三个主要做简单展示和跳转。
• 除了开发 UI 界面的展示，还需要增加一部分内部的事件操作，当点击 发送消息 时候，需要跳转到聊天页，并将对话好友填充到对话栏。