uniapp模仿微信实现聊天界面的示例代码 uniapp模仿微信实现聊天界面的

项目演示
前言
主界面
chat.vue中引入的js文件
chat.vue中引入的组件
submit.vue中引入的组件
最后

项目演示

前言我是看B站的视频一个一个敲的，讲的还不错。可以去看看vue+node.js即时通讯聊天室APP开发前端篇

主界面 chat.vue

page {height: 100%; } .content {height: 100%; background-color: rgba(244, 244, 244, 1); } .chat {height: 100%; .chat-main {padding-left: 32rpx; padding-right: 32rpx; padding-top: 20rpx; // padding-bottom: 120rpx; //获取动态高度display: flex; flex-direction: column; }.chat-ls {.chat-time {font-size: 24rpx; color: rgba(39, 40, 50, 0.3); line-height: 34rpx; padding: 10rpx 0rpx; text-align: center; }.msg-m {display: flex; padding: 20rpx 0; .user-img {flex: none; width: 80rpx; height: 80rpx; border-radius: 20rpx; }.message {flex: none; max-width: 480rpx; }.msg-text {font-size: 32rpx; color: rgba(39, 40, 50, 1); line-height: 44rpx; padding: 18rpx 24rpx; }.msg-img {max-width: 400rpx; border-radius: 20rpx; }.msg-map {background: #fff; width: 464rpx; height: 284rpx; overflow: hidden; .map-name {font-size: 32rpx; color: rgba(39, 40, 50, 1); line-height: 44rpx; padding: 18rpx 24rpx 0 24rpx; //下面四行是单行文字的样式display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }.map-address {font-size: 24rpx; color: rgba(39, 40, 50, 0.4); padding: 0 24rpx; //下面四行是单行文字的样式display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }.map {padding-top: 8rpx; width: 464rpx; height: 190rpx; }}.voice {// width: 200rpx; min-width: 100rpx; max-width: 400rpx; }.voice-img {width: 28rpx; height: 36rpx; }}.msg-left {flex-direction: row; .msg-text {margin-left: 16rpx; background-color: #fff; border-radius: 0rpx 20rpx 20rpx 20rpx; }.ms-img {margin-left: 16rpx; }.msh-map {margin-left: 16rpx; border-radius: 0rpx 20rpx 20rpx 20rpx; }.voice {text-align: right; }.voice-img {float: left; transform: rotate(180deg); width: 28rpx; height: 36rpx; padding-bottom: 4rpx; }}.msg-right {flex-direction: row-reverse; .msg-text {margin-right: 16rpx; background-color: rgba(255, 228, 49, 0.8); border-radius: 20rpx 0rpx 20rpx 20rpx; }.ms-img {margin-right: 16rpx; }.msh-map {margin-left: 16rpx; border-radius: 20rpx 0rpx 20rpx 20rpx; }.voice {text-align: left; }.voice-img {float: right; padding: 4rpx; width: 28rpx; height: 36rpx; }}} }

chat.vue中引入的js文件 dateTime.js

export default{ //首页时间转化 dateTime(e){let old = new Date(e); let now = new Date(); //获取old具体时间let d = old.getTime(); let h = old.getHours(); let m = old.getMinutes(); let Y = old.getFullYear(); let M = old.getMonth()+1; let D = old.getDate(); //获取now具体时间let nd =now.getTime(); let nh = now.getHours(); let n = now.getMinutes(); let nY = now.getFullYear(); let nM = now.getMonth()+1; let nD = now.getDate(); //当天的时间if(D === nD && M === nM && Y === nY){if(h<10){h = '0'+h; }if(m<10){m = '0'+m; }return h+':'+m; }//昨天时间if(D+1 === nD && M === nM && Y === nY){if(h<10){h = '0'+h; }if(m<10){m = '0'+m; }return '昨天 '+h+':'+m; }else{//大于两天return Y+'/'+M+'/'+D; } }, //聊天时，发送时间处理 dateTime1(e){let old = new Date(e); let now = new Date(); //获取old具体时间let d = old.getTime(); let h = old.getHours(); let m = old.getMinutes(); let Y = old.getFullYear(); let M = old.getMonth()+1; let D = old.getDate(); //获取now具体时间let nd =now.getTime(); let nh = now.getHours(); let n = now.getMinutes(); let nY = now.getFullYear(); let nM = now.getMonth()+1; let nD = now.getDate(); //当天的时间if(D === nD && M === nM && Y === nY){if(h<10){h = '0'+h; }if(m<10){m = '0'+m; }return h+':'+m; }//昨天时间if(D+1 === nD && M === nM && Y === nY){if(h<10){h = '0'+h; }if(m<10){m = '0'+m; }return '昨天 '+h+':'+m; }else if( Y == nY){//今年if(h<10){h = '0'+h; }if(m<10){m = '0'+m; }return M+'月'+D+'日 '+h+':'+m}else{//大于今年if(h<10){h = '0'+h; }if(m<10){m = '0'+m; }return Y+'年'+ M +'月' +D+ '日 '+h+':'+m} }, // 间隔时间差 spaceTime(old,now){old = new Date(old); now = new Date(now); var told = old.getTime(); var tnow = now.getTime(); if(told > (tnow+1000*60*5)){return now; }else{return ''; } }}

chat.vue中引入的组件 submit.vue

.submit {background: rgba(244, 244, 244, 0.96); border-top: 1px solid rgba(39, 40, 50, 0.1); width: 100%; position: fixed; bottom: 0; z-index: 100; // padding-bottom: var(--status-bar-height); padding-bottom: env(safe-area-inset-bottom); } .displaynone {display: none; } .submit-chat {width: 100%; display: flex; align-items: flex-end; box-sizing: border-box; padding: 14rpx 14rpx; image {width: 56rpx; height: 56rpx; margin: 0 10rpx; flex: auto; }.btn {flex: auto; background-color: #fff; border-radius: 10rpx; padding: 20rpx; max-height: 160rpx; margin: 0 10rpx; }.chat-send {line-height: 44rpx; }.record {line-height: 44rpx; text-align: center; font-size: 20rpx; color: rgba(39, 40, 50, 0.6); } } .emoji {width: 100%; height: 460rpx; background: rgba(236, 237, 238, 1); box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1); .emoji-send {width: 280rpx; height: 104rpx; padding-top: 24rpx; background-color: rgba(236, 237, 238, 0.8); position: fixed; // bottom: 0; bottom: env(safe-area-inset-bottom); right: 0; display: flex; .emoji-send-bt {flex: 1; margin: 0 32rpx 0 20rpx; height: 80rpx; background: rgba(255, 228, 49, 1); font-size: 32rpx; text-align: center; line-height: 80rpx; border-radius: 12rpx; }.emoji-send-det {flex: 1; margin-left: 24rpx; height: 80rpx; background: #fff; font-size: 32rpx; text-align: center; line-height: 80rpx; border-radius: 12rpx; image {width: 42rpx; height: 32rpx; }}} } .more {width: 100%; height: 436rpx; background: rgba(236, 237, 238, 1); box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1); bottom: env(safe-area-inset-bottom); padding: 8rpx 20rpx; box-sizing: border-box; .more-list {width: 25%; text-align: center; float: left; padding-top: 32rpx; image {width: 72rpx; height: 72rpx; padding: 24rpx; background: rgba(255, 255, 255, 1); border-radius: 24rpx; }.more-list-title {font-size: 24rpx; color: rgba(39, 40, 50, 0.5); line-height: 34rpx; }} } .voice-bg {height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); position: fixed; top: 0; bottom: 0; z-index: 1001; .voice-bg-len {height: 84rpx; width: 600rpx; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: rgba(255, 255, 255, 0.2); border-radius: 42rpx; text-align: center; }.voice-bg-time {display: inline-block; min-width: 120rpx; line-height: 84rpx; background-color: rgba(255, 228, 49, 1); border-radius: 42rpx; }.voice-del {position: absolute; bottom: -480rpx; width: 100%; text-align: center; color: #fff; font-size: 28rpx; } }

submit.vue中引入的组件 emoji.vue

.emoji {width: 100%; // height: 460rpx; padding: 16rpx 10rpx 130rpx 10rpx; box-sizing: border-box; overflow: hidden; overflow-y: auto; .emoji-line{display: flex; .emoji-line-item {flex: 1; text-align: center; font-size: 44rpx; line-height: 140rpx; }} }

最后很多静态图片图片都是本地的，需要各位用自己的本地图片代替。
【uniapp模仿微信实现聊天界面的示例代码】以上就是uniapp模仿微信实现聊天界面的示例代码的详细内容，更多关于uniapp仿微信聊天界面的资料请关注脚本之家其它相关文章！