8.聊天信息设置页开发
1、新建页面chat-set.nuve
2、给chat.nvue中的free-icon-button组件绑定点击事件让其跳转到chat-set.nvue页面中。
3、编写chat-set.nvue页面的导航栏。
期间对导航栏组件做了下面优化。
新增showRightprops属性用于控制是否显示导航栏右侧图标以及弹出菜单
具体代码改动参考commits。
3、编写聊天成员列表。
4、剩余部分编写。
期间优化了用到的几个组件，具体代码细节直接看commits。
5、补充群聊部分的结构和样式。
参考commits。
9.个人设置页(个人名片页)开发1、首先思考如何设计点击用户头像跳转到个人名片页。
如果直接在引用了free-avatar的组件上绑定@click势必会造成非常严重的代码冗余，为什么？因为整个应用有非常多的地方需要跳转到个人名片页，例如：
通讯录页面的左侧用户头像
朋友圈中的用户头像
聊天设置页面中的用户头像
那么如何设计才能不那么冗余呢？其实很简单，直接看代码。
在free-avatar组件中的props中增加一个新的属性，该属性用于控制用户点击头像的行为。
给image组件绑定点击事件。
如果用户传入的clickType属性的值为navigate则说明要跳转到名片页了。
在调用free-avatar组件时传入属性即可。
free-chat-item.vue
<free-avatar size="70" :src="item.avatar" v-if="!isSelf" clickType="navigate"/>写代码之前要多思考，考虑维护性，考虑代码冗余性，例如多个页面要调用同一个组件，对这个组件都要有点击行为，你是分散性的写逻辑呢？例如a.vue写一遍，b.vue写一遍，还是直接在组件中集中处理，通过props传属性 + switch...case方式做判断。明显后者的代码更优于前者。
2、页面布局编写。
比较简单，直接参考commit。
3、操作菜单部分开发
点击导航栏右上角的图标按钮显示操作菜单。
4、操作菜单-设置备注页开发。
都是一些布局代码，比较简单。
5、标签设置页开发。
主要有下面几个功能
添加标签
点击所有标签列表中的标签快速添加标签
点击标签列表中的标签提示用户删除标签
完成操作
具体代码直接参考commit。
nvue页面的text标签之间不要换行，不然样式会有问题，这个细节坑死我了，APP没法审查元素调试，只能看代码猜，排查了1个多小时，能把我给气死