一、聊天界面功能

1、下拉拉取消息（静态）

下拉时会触发自定义函数nextPage进行拉取，该函数有两个步骤，展示刷新动画并拉取消息。

刷新动画通过setInterval 方法按照指定周期重复执行，在此同时调用获取新消息的函数。

其中，需满足nowpage>=0,当拉取完所有消息后，该值计为-1，即拉取所有消息后不再运行剩余代码；以及beginloading为真，准备加载状态下可以运行剩余代码，开始运行函数后，设置为false表示正在运行，防止重复运行。

//拉取nextPage: function(){if(this.nowpage>=0 && this.beginloading){this.isloading=false;this.beginloading=false;var animation=uni.createAnimation({duration:1000,timingFunction:'step-start',})this.animation=animation//this.animationData=animation.export()let i=1;this.loading=setInterval(function(){animation.rotate(i*30).step()this.animationData=animation.export()i++;if(i>20){this.getMsg(this.nowpage);}}.bind(this),100)}},

二、聊天界面样式

消息的展示主要在考虑消息发送者（自己、其他人）以及消息类型。

根据消息发送者不同分别设计了左聊天框和右聊天框不同样式组件（主要是位置不同，通过flex-direction样式属性设置从左到右和从右到左的顺序排列，左为row，右为row-reverse；一些间距的左右对称不同）：

.msg-left{flex-direction: row;.msg-text{margin-left: 16rpx;background-color: #fff;border-radius: 0rpx 20rpx 20rpx 20rpx;}.msg-img{margin-left: 16rpx;.playvideo{width:30rpx;height: 30rpx;}}.playvideo{.playvideo-img{float:right;width:120rpx;height:120rpx;margin-top: -140rpx;padding-right: 20rpx;}}.msg-map{margin-left: 16rpx;border-radius: 0rpx 20rpx 20rpx 20rpx;}.voice{text-align: right;}.voice-img{float: left;padding-bottom: 4rpx;transform: rotate(180deg);width: 36rpx;height: 36rpx;}}.msg-right{flex-direction: row-reverse;.msg-text{margin-right: 16rpx;background-color: #fff260;border-radius: 20rpx 0rpx 20rpx 20rpx;}.msg-img{margin-right: 16rpx;}.playvideo{.playvideo-img{float:right;width:120rpx;height:120rpx;margin-top: -140rpx;padding-right: 20rpx;}}.msg-map{margin-right: 16rpx;border-radius: 20rpx 0rpx 20rpx 20rpx;}.voice{text-align: left;}.voice-img{float: right;padding-top: 4rpx;width: 36rpx;height: 36rpx;}}

通过消息信息里的type属性判断属性类型，根据不同类型制定了相应聊天框展示样式，图片、视频等通过使用uni-app组件，语音通过自带函数进行播放，视频则通过点击跳转到另外的页面调用组件播放：

<view class="message" v-if="item.type == 'TIMTextElem'"><view class="msg-text">{{item.payload.text}}</view>
</view>
<view class="message" v-if="item.type == 'TIMImageElem'"><image class="msg-img" :src="item.payload.imageInfoArray[0].imageUrl" mode="widthFix" @tap="previewImg(item.message)"></image>
</view>
<view class="message" v-if="item.type == 'TIMVideoFileElem'" @tap="playVideo(item.payload.remoteVideoUrl)"><!-- <video class="msg-img" :src="item.payload.remoteVideoUrl" controls></video> --><image class="msg-img" :src="item.payload.remoteVideoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"><view class="playvideo"><image class="playvideo-img" src="../../static/images/submit/playvideo.png"></image></view></image>
</view>
<view class="message" v-if="item.type == 'TIMFileElem'"><image class="msg-img" src="../../static/images/submit/fileShow.png" mode="widthFix" @tap="saveFile(item.payload.fileUrl)"></image><view class="msg-text" style="text-align: center;">{{item.payload.fileName}}</view>
</view>
<view class="message" v-if="item.type == 'TIMSoundElem'"><view class="msg-text voice" :style="{width:30 * 4 + 'px'}" @tap="playVoice(item.payload.url)"><image class="voice-img" src="../../static/images/common/voice.png"></image><!-- {{changeTime(item.payload.second * 1000)}}" -->点击播放</view>
</view>
<view class="message" v-if="item.type == 'TIMLocationElem'"><view class="msg-map" @tap="openLocation(item.payload)"><view class="map-name">{{item.payload.description}}</view><view class="map-address">{{item.payload.description}}</view><image src="../../static/images/common/map.png" mode="aspectFit" class="map-img"></image><!-- <map class="map" :latitude="item.message.latitude" :longitude="item.message.longitude" :markers="covers(item.message)"></map> --></view>
</view>

▲新增群聊页面显示他人昵称（优先群昵称，然后是用户昵称，最后是用户id）。

效果如下：

创新实训——飞讯（八）相关推荐

山东大学软件学院创新实训——飞讯（八）
目录一.目标概述二.功能设计与实现搜索好友 (1)界面设计 (2)功能实现消息发送组件 (1)发送消息界面概览 (2)功能实现三.总结一.目标概述经过前面对uniapp的学习和飞讯项目的 ...
山东大学软件学院创新实训——飞讯（四）
目录一.目标概述二.腾讯云im第三方回调二.回调分类三.回调示例 1.请求url 2.请求包示例 3.应答包示例四.回调的保存 1.分析 2.实体类 3.controller层 4.serv ...
山东大学软件学院创新实训——飞讯（一）
目录一.项目介绍二.docker的安装 1.服务器的配置 2.安装需要的包 3.添加GPG密匙,并添加Docker-ce软件源 4.安装Docker-ce 5.测试运行 6.添加当前用户到 doc ...
山东大学软件学院创新实训——飞讯（六）
目录一.突如起来的变化及内部调整二.uni-app的学习三.uni-app的搭建登录界面 (1)界面设计 (2)核心代码注册界面 (1)界面设计 (2)核心代码四.总结一.突如起来的变化 ...
山东大学软件学院创新实训——飞讯（十二）
目录一.目标概述二.功能设计与实现问卷首页 (1)界面设计 (2)功能实现问卷详情页 (1)界面设计 (2)功能实现问卷二维码 (1)界面设计 (2)功能实现回答详情 (1)界面设计 (2 ...
创新实训——飞讯（一）
一.项目简介飞讯是一款为使小型团队作业更加便捷而设计的软件,包括单聊.群聊等功能.本人负责Windows端的开发. 二.第一周工作采用QT开发,故第一周学习QT相关UI知识,包括可视化UI设计.代 ...
创新实训——飞讯（二）
因计划调整缘故,可直接从(五)看起. 目录一.设计登录.注册界面二.实现登录注册功能一.设计登录.注册界面利用所学的QT知识,利用可视化设计了一个基础的界面: 由于QT窗口自带一个较为丑陋的边 ...
创新实训——飞讯（四）
由于组内人员调动原因,组长找了一个可以实现web.小程序.Android.ios的跨平台运行的框架uni-app,考虑到便利性,移动端的制作很重要,且该框架可以实现较多运行方式,考虑到时间因素和经验因 ...
山东大学软件学院创新实训——飞讯（二）
目录一.后端框架-springboot 二.springboot项目的创建 1.启动idea,依次选择File -->> New -->> project,弹出下框编辑2 ...

创新实训——飞讯（八）

一、聊天界面功能

二、聊天界面样式

创新实训——飞讯（八）相关推荐

最新文章

热门文章