# 第三学期第二季课程介绍

# uniapp实战系列（一）即时通讯功能

兼容：小程序、H5、APP。

适用人群
1、初中以上学历，零基础，喜欢编程的所有从业人员，从零学起（需学完 第一学期的课程、第二学期第一季课程、第二学期第二季课程、第二学期第三季课程、第二学期第四季课程、第三学期第一季课程）；
2、想接单做网站、小程序、app、系统的人员，想学习整个项目上线流程；
3、大学生毕业设计；
4、想学习编程搞副业的人，或者转行学编程，然后找工作上班的人；

课程概述
【课程概述】
本季度课程主要通过教大家如何手写 组件、样式等等实操和知识的讲解，带领大家完成一个实战项目：即时通讯，功能类似微信，让大家的知识体系和实战能力进一步提升。

具体课程安排，请看下面的文档目录

重要说明：

关于 uni-app 项目的环境搭建、项目调试等，在上一季即： 第三学期第一季课程 已经讲过了，因此：
本季课程 章节2 : 开发前环境搭建及准备 与第三学期第一季课程 课时4-课时10内容相同，可查阅对应文档。

# 2.本季课程视频介绍

(opens new window)

# 3.查看课程文档

# 章节1.课程介绍

# 章节2.开发前环境搭建及准备

与第三学期第一季课程 课时4-课时10内容相同，可查阅对应文档。

# 章节3.项目自定义配置

# 一、nvue说明和项目配置说明

# 1. 针对nvue引入一个css样式库

# 2. 针对本项目写一个公共的样式文件

# 二、nvue页面和vue页面引入自定义图标

# 1. APP端 nvue页面引入自定义图标

# 2. H5端和小程序端 nvue页面引入自定义图标

# 三、自定义底部导航栏

# 四、globalStyle：用于设置应用的状态栏、导航条、标题、窗口背景色等

# 章节4.消息页开发

# 一、先了解一下uni-app的尺寸单位rpx

# 二、消息页顶部导航栏

# 三、消息列表开发

# 四、消息列表头像右上角消息数量提示

# 五、对消息列表做一个组件封装并理解父子组件事件传递

# 六、长按消息列表和加号等很多地方，弹出菜单并将其封装成组件

# 七、点击加号弹出菜单

# 八、完成置顶和删除聊天的静态页面效果

# 九、兼容微信小程序

# 十、消息页静态功能完整代码

# 章节5.我的和好友列表页开发

# 一、好友列表页开发

# 1. 顶部导航栏开发

# 2. 好友列表开发

# 二、我的页面开发

# 章节6.即时通讯聊天页开发

# 一、顶部导航栏开发

# 二、底部聊天输入区域和聊天内容区域开发

# 三、聊天内容区域开发：聊天气泡和封装组件

# 1. 聊天气泡样式

# 2. 提取不同样式封装成class类

# 3. 封装聊天气泡

# 4. 聊天时间处理

# 5. 聊天撤回处理

# 四、聊天内容区域开发：底部发送内容区域

# 一、解决输入内容时键盘弹起，页面整体上移

# 二、聊天页底部发送信息功能（发送普通文字）功能

# 三、底部输入区域加号扩展菜单功能

# 四、加号和键盘切换问题（主要针对app端）

# 五、表情包开发及发送表情包

# 六、调整在H5端让页面和微信更好的融合

# 七、【选修】调整表情包排布（把emoji表情放在第一页，emoji和文字一起发送）

# 五、加号扩展菜单功能（发图片）

# 一、发图片功能

# 二、发多张图片及预览

# 三、【选修】发图片自适应宽高显示

# 六、加号扩展菜单功能（语音播放）

# 一、语音播放

# 二、解决一个bug：发图片在小程序上不兼容的问题

# 三、播放语音有动画提示并将语音播放封装成组件

# 四、语音播放根据时长显示长度

# 五、语音播放页面和组件完整代码

# 七、加号扩展菜单功能（发语音）

# 一、发语音界面开发

# 二、关于播放语音、发语音各页面组件完整代码

# 八、加号扩展菜单功能（播放视频及发视频）

# 一、消息页视频播放封面开发

# 二、视频播放页开发

# 三、相册选择视频发送

# 四、通过相机进行发图片、发视频

# 章节7.用户中心

# 关于用户中心用到的接口

# 一、注册登录页面

# 1. 创建页面并打开页面

# 2. 登录注册页面代码

# 二、关于注册登录功能实现的重要说明

# 三、注册登录功能实现

# 1. 注册功能接口文档

# 2. 登录功能接口文档

# 3. 注册登录前后端交互

# 四、注册登录成功后续处理

# 五、即时通讯用户退出登录

# 六、[重要亮点]关于游客（未登录用户）使用即时通讯的说明和处理

# I. 需求场景说明

# II. 给游客（未登录用户）一个身份标识

# III. 系统给游客用户注册身份便于游客和客服进行即时通讯

# Ⅳ、游客用户正式注册和登录身份

# 七、搜索用户

# 1. 搜索用户接口文档

# 2. 搜索用户界面开发

# 八、查看用户信息

# 1. 查看用户资料接口文档

# 2. 查看用户资料界面开发

# 九、申请添加好友

# 1. 申请添加好友接口文档

# 2. 申请添加好友代码

# 十、查看好友申请列表（获取别人申请我为好友的列表数据）

# 1. 申请添加好友接口文档

# 2. 好友申请信息可以在初始化的时候获取

# 3. 显示在页面上做提示

# 4. 新建查看好友申请列表页面

# 5. 从 /pages/friendsList/friendsList 朋友列表页面进入

# 6. 查看好友申请列表页面代码

# 7. 上拉刷新数据及下拉加载更多数据

# 十一、处理好友申请

# 1. 查看处理好友申请接口文档

# 2. 从好友申请列表页面进入处理

# 3. 处理好友申请

# 十二、好友列表（通讯录）展示

# 1. 获取好友列表数据

# 2. 页面展示

# 十三、用户详情设置（当前主要开发的是聊天设置）

# 1. 新建设置详情页面 /pages/setpageInfo/setpageInfo.vue

# 2. 从设置页进入

# 3. 设置详情页面代码

# 十四. 发消息前解决几个小问题

# 1. 聊天设置信息提交数据完善

# 2. 发消息按钮的两种情况判断

# ① 查询一下对方是否是我的好友

# 3. 处理完用户申请返回好友列表（通讯录）更新好友列表

# 章节8.聊天通讯

# 一、连接即时通讯websocket

# 1. 在初始化登录的时候链接

# 2. 调用类的形式执行websocket

# 1. 新建js类文件： /common/js/chatClass.js

# 2. 在vuex中调用

# 二、通讯录好友列表进入聊天页

# 1. 聊天类扩展几个方法

# 2. vuex中调用

# 3. 先从我的好友列表（通讯录）进入聊天

# 4. 聊天页面初始判断

# 三、创建和销毁聊天对象消息及给服务器发消息测试

# 1. 重新处理用户信息昵称显示

# 2. 聊天类创建聊天对象及发消息到服务器

# 3.在聊天页创建和销毁聊天对象信息

# 4. 给服务器发消息（单聊）（发送消息给对方）测试

# 四、完善聊天页发消息的界面展示

# 1. 先解决几个小问题

# 2. 完善聊天页发消息的界面展示

# ① 聊天页清空模拟数据

# ② 发消息的数据要跟服务器的数据格式一致

# ③ 完成发送消息的页面逻辑

# 五、消息发送状态的处理

# ① 新增消息发送状态的样式

# ② 发消息中处理状态

# 六、发消息前把消息添加到本地历史记录，消息页的聊天列表更新一下，发完之后更新一下本地历史记录

# 七、消息页整个聊天列表数据获取及展示

# 1. 消息页整个聊天列表数据获取

# 2. 在消息页读取数据并展示

# 八、聊天页接收消息及展示

# 1. 处理接收到的消息

# 2. 进入聊天页，将消息页当前聊天用户的未读数清零

# 3. 消息页监听接收消息（处理未读数等变化）

# 4. 聊天页头像处理

# 5. 聊天页接收消息及展示

# 九、聊天页设置界面开发和数据渲染

# 1. 聊天页设置相关信息获取

# 2. 进入设置页面

# 3. 设置页面开发

# 十、添加好友到群聊

# 1. 新增进入聊天页设置的功能入口

# 2. 聊天页设置点击加号进入添加好友到群聊

# 3. 添加好友到群聊页面布局开发

# 十一、创建群聊

# 1. 创建群聊接口说明

# 2. 提交创建群聊

# 3. 创建群聊成功后，消息页通知信息头像、标题等处理

# 十二、进入群聊发消息及接收群聊消息

# 1. 点击群聊进入聊天页显示群聊提示

# 2. 聊天页接收消息及标题等处理

# 十三、获取离线消息（不在线的时候别人给你发的或者群里面发的消息）

# 1. 获取离线消息接口说明

# 2. 执行获取离线消息方法

# 十四、我的群聊列表

# 1. 我的群聊列表接口说明

# 2. 从好友列表和我的两个页面进入群聊列表

# 3. 我的群聊列表

# 十五、获取群资料信息进行群设置

# 1. 获取群资料信息接口说明

# 2. 获取群资料并展示群用户头像

# 十六、修改群名称

# 1. 修改群名称接口说明

# 2. 页面布局

# 3. 更新群名称完成之后返回聊天页修改导航栏群名称和页面名称

# 4. 聊天页更新群名称

# 5. 群名称修改完成之后，通知其他群成员

# 十七、修改群公告

# 1. 修改群公告接口说明

# 2. 修改群公告功能实现

# 十八、修改我在群里面的昵称

# 1. 修改我在群里面的昵称接口说明

# 2. 修改我在群里面的昵称功能实现

# 十九、删除群（解散群）或退出群聊

# 1. 修改我在群里面的昵称接口说明

# 2. 删除群（解散群）或退出群聊功能实现

# 二十、删除消息页消息记录

# 二十一、设置页(如：显示群成员昵称，置顶等处理)

# 1. 设置页进行设置

# 2. 聊天页重新获取聊天信息（对应消息列表信息，设置信息在这个里面）

# 3. 组件处理

# 二十二、生成群二维码

# 1. 生成群二维码接口说明

# 2. 生成群二维码功能实现

# 二十三、解决游客扫群二维码打开页面跳转到首页的问题

# 1. 改写游客注册登录逻辑

# 2. 游客如果token令牌错误，重新获取token并连接websocket

# 3. 用户退出登录vuex处理调整

# 二十四、清空聊天记录

# 1. 清空聊天记录功能实现

# 2. 聊天页清空聊天记录

# 章节9.聊天页发[图片视频]等功能实现

# 一、服务器通讯发表情包图片及发图片功能

# 1. 先更新聊天类完整代码

# 2. 设置上传图片等文件是服务器还是阿里云OSS

# 3. 上传图片等文件到服务器或者阿里云接口说明

# 4. 上传功能实现

# 5. 页面渲染问题：聊天页处理

# 6. 页面渲染问题：组件（/components/chat-item/chat-item.vue）

# 7. 页面渲染问题：组件（/components/chat-item-image/chat-item-image.vue）

# 8. 消息页显示问题

# 二、服务器通讯发视频功能（及发图片功能的改进）

# 1. 定义各种类型文件上传到哪里：是自己的服务器还是阿里云OSS

# 2. 聊天页

# 3. 聊天页组件

# 4. 聊天页组件: 视频组件

# 5. 聊天页组件：图片组件

# 6. 发视频发多张图片处理

# 7. 视频上传到自己的服务器获取视频封面的接口说明

# 三、服务器通讯发语音消息

# 1. 在聊天页 /pages/chat/chat.nvue

# 2. 发语音功能实现

# 四、撤回、删除消息、删除好友及修改我的头像昵称等功能

# 一、撤回消息功能实现

# 1. 页面渲染数据赋值改动

# 2. 撤回消息服务器交互

# 3. 撤回消息服务器方法

# 4. 撤回消息服务器方法接口说明

# 5. 通过websocket撤回消息的用户处理

# 6. 消息页处理

# 二、删除聊天页某条消息功能实现

# 1. 删除聊天页某条本地消息(并返回消息页对应聊天对象索引)方法

# 2. 删除聊天页本地某条聊天消息

# 3. 删除聊天页页面某条聊天消息

# 4. 调整消息页data的数据显示

# 5. 消息页页面显示

# 三、好友申请及同意添加为好友实时通知

# 1. 好友申请列表修复头像显示错误

# 2. 好友申请实时显示

# 3. 通知添加好友在消息页点击之后跳转到添加好友页面

# 4. 同意添加为好友实时通知

# 四、删除好友

# 1. 删除好友接口说明

# 2. 删除好友功能实现

# 五、修改我的头像昵称等信息

# 1. 修改我的头像昵称接口说明

# 2. 新增修改账号信息设置入口

# 3. 修改我的头像昵称功能实现页面部分

# 4. 修改我的头像昵称功能实现js部分

# 5. 新增更新头像（头像剪裁）处理

# ① 页面部分

# ② js部分

# 6. 关于修改我的头像昵称等信息几个文件完整代码

# ① 页面 /pages/setpageInfo/setpageInfo.vue

# ② 混入文件 /pages/setpageInfo/updateUserInfo.js

# ③ 混入文件 /pages/setpageInfo/avatarCut.js

# 章节10.辅助功能及问题修复

# 一、辅助功能(包括单聊和群的一些其它功能)

# 1. 修改头像昵称头像显示问题

# 2. 查找聊天内容（单聊或者群的聊天记录）

# ① 进入搜索聊天页面

# ② 聊天页搜索聊天内容及展示

# 二、群聊删除群成员功能

# 1. 群聊删除群成员接口说明

# 2. 群聊删除群成员界面实现

# 3. 群聊删除群成员功能实现

# 三、邀请加入群聊或者自己申请加群

# 1. 邀请加入群聊或者自己申请加群接口说明

# 2. 加入群聊界面实现

# 3. 加入群聊功能实现

# 4. 优化加好友入群（不在群里面的好友才有加群按钮）

# 四、根据群设置来进行加群处理

# 1. 进群设置接口说明

# 2. 界面部分

# 3. 当进群设置为:需群主同意，群主收到处理加群的通知

# 4. 群主处理加群申请

# 五. 接收消息给点提示音

# ① 定义一个来消息的提示音

# ② 放在接收消息的时候根据设置情况提示

# ③ 界面样式

# 六、问题修复

# 章节11.游客聊天处理

# 一、多进程处理前端调整

# 1. 针对登录用户（角色为user的用户）

# 2. 类文件 /common/js/chatClass.js 完整代码

# 3. 聊天页

# 二、游客扫码加入群聊

# 1. H5端扫码（比如用微信扫一扫、手机浏览器等）

# 三、游客界面调整

# ① 消息页页面调整

# ② 混入方法计算属性等到tool.js

# ③ 顶部导航栏处理

# ④ 我的页面调整

# 四、游客扫码加好友

# 1、完成界面部分

# 2. 关于游客:visitor 和用户:user 在消息页初始化接收消息的处理

# 3. 提交加好友申请

# ① 页面处理

# ② 逻辑处理

# ③ 聊天页显示一下发送消息失败原因

# 4. 完善申请加我为好友设置

# 1 界面完善

# 1-1. 在页面 /pages/setpage/setpage.vue

# 1-2. 在页面 /pages/setpageInfo/setpageInfo.vue

# 1-3. 在文件 /pages/setpageInfo/group.js

# 1-4. 在文件 /pages/setpageInfo/updateUserInfo.js

# 5. 根据地址是否有redirect参数来简化按钮操作

# 5-1. 在页面 /pages/setpageInfo/setpageInfo.vue

# 5-2. 在文件 /pages/setpageInfo/group.js

# 章节12.问题修复及使用场景举例

# 一、和我聊天设置（聊天条数限制）

# 1. 入口设置

# 2. 功能实现

# ① 在聊天页点击用户头像进入

# ② 新建混入文件 /pages/userinfo/sendMessage.js

# ③ 聊天设置页判断是否显示删除好友按钮

# 二、使用场景体验

# ① 将我们的即时通讯嵌入到某个项目中

# ② 配置文件

# 章节13.即时通讯选修课

# 一、数据统一在配置文件管理

# 1 消息页初始化数据清空

# 2 聊天页数据处理

# 二、搜索加好友功能优化

# 1. 在页面 /pages/chat/chat.nvue

# 2. 新建混入文件 /pages/chat/pageAction.js

# 3. 数据配置文件定义用户设置信息

# 4. 在文件 /pages/userinfo/sendMessage.js

# 5. 在组件 /components/chat-item/chat-item.vue

# 三、其它功能

← 第三学期第一季（课程学习顺序：06）第三学期第三季（课程学习顺序：08） →