uni-app全栈仿微信开源项目系列
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app全栈仿微信开源项目系列相关的知识，希望对你有一定的参考价值。
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个多小时，能把我给气死
以上是关于uni-app全栈仿微信开源项目系列的主要内容，如果未能解决你的问题，请参考以下文章