項目演示

前言

我是看B站的視頻一個一個敲的，講的還不錯。可以去看看vue+node.js即時通訊聊天室APP開發(fā)前端篇

主界面

chat.vue

<template><!-- 聊天界面展示https://www.bilibili.com/video/BV1hT4y1P75N?p=22 搭建1和2 --><view class="content"><!-- 聊天內容 --><scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView"><view class="chat-main" :style="{paddingBottom:inputh+'px'}"><view class="chat-ls" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index"><view class="chat-time" v-if="item.createTime != ''">{{changeTime(item.createTime)}}</view><view class="msg-m msg-left" v-if="item.sendName == friendName"><image class="user-img" src="../../../static/logo.png"></image><view class="message" v-if="item.TextType == 0"><!-- 文字 --><view class="msg-text">{{item.sendText}}</view></view><view class="message" v-if="item.TextType == 1" @tap="previewImg(item.sendText)"><!-- 圖像 --><image :src="item.sendText" class="msg-img" mode="widthFix"></image></view><view class="message" v-if="item.TextType == 2" @tap="playVoice(item.sendText.voice)"><!-- 音頻 --><view class="msg-text voice" :style="{width:item.sendText.time*4+'rpx'}"><image src="../../../static/icon/Hotline.png" class="voice-img"></image>{{item.sendText.time}}″</view></view><view class="message" v-if="item.TextType == 3" @tap="openLocation(item.sendText)"><!-- 位置 --><view class="msg-map"><view class="map-name">{{item.sendText.name}}</view><view class="map-address">{{item.sendText.address}}</view><!-- 如果map不起作用，就可以直接用一張圖片去替代 --><map class="map" :longitude="item.sendText.longitude" :latitude="item.sendText.latitude":markers="covers(item.sendText)"></map></view></view></view><view class="msg-m msg-right" v-if="item.sendName != friendName"><image class="user-img" src="../../../static/logo.png"></image><view class="message" v-if="item.TextType == 0"><view class="msg-text">{{item.sendText}}</view></view><view class="message" v-if="item.TextType == 1" @tap="previewImg(item.sendText)"><image :src="item.sendText" class="msg-img" mode="widthFix"></image></view><view class="message" v-if="item.TextType == 2" @tap="playVoice(item.sendText.voice)"><!-- 音頻 --><view class="msg-text voice" :style="{width:item.sendText.time*4+'rpx'}">{{item.sendText.time}}″<image src="../../../static/icon/Hotline.png" class="voice-img"></image></view></view><view class="message" v-if="item.TextType == 3" @tap="openLocation(item.sendText)"><!-- 位置 --><view class="msg-map"><view class="map-name">{{item.sendText.name}}</view><view class="map-address">{{item.sendText.address}}</view><map class="map" :longitude="item.sendText.longitude" :latitude="item.sendText.latitude":markers="covers(item.sendText)"></map></view></view></view></view></view></scroll-view><submit @inputs="inputs" @heights="heights"></submit></view> </template><script>import dateTime from '../../../common/dateTime.js';import submit from '../../../components/submit/submit.vue';//音頻播放const innerAudioContext = uni.createInnerAudioContext();export default {data() {return {friendName: "xpq",msg: [{"sendName": "xpq","receviceName": "゛時光い","sendText": {"address": "湖南省岳陽市湘陰縣新世紀大道","latitude": 28.68925,"longitude": 112.90917,"name": "湘陰縣政府(新世紀大道北)",},"createTime": "2022-01-06 12:40:12","updateTime": null,"chatmState": 1,"TextType": 3}, {"sendName": "゛時光い","receviceName": "xpq","sendText": {"voice": "時光匆匆流過","time": 2 //秒},"createTime": "2022-01-06 12:22:12","updateTime": null,"chatmState": 1,"TextType": 2}, {"sendName": "xpq","receviceName": "゛時光い","sendText": {"voice": "謝謝你","time": 60 //秒},"createTime": "2022-01-06 12:00:12","updateTime": null,"chatmState": 1,"TextType": 2}, {"sendName": "゛時光い","receviceName": "xpq","sendText": "這是第九條未讀消息","createTime": "2022-01-03 12:22:12","updateTime": null,"chatmState": 1,"TextType": 0},{"sendName": "゛時光い","receviceName": "xpq","sendText": "這是第八條未讀消息","createTime": "2022-01-02 12:22:07","updateTime": null,"chatmState": 1,"TextType": 0},{"sendName": "xpq","receviceName": "xpq","sendText": "這是第七條未讀消息","createTime": "2021-12-19 12:22:03","updateTime": null,"chatmState": 1,"TextType": 0},{"sendName": "゛時光い","receviceName": "xpq","sendText": "這是第六條未讀消息","createTime": "2021-12-19 12:21:58","updateTime": null,"chatmState": 1,"TextType": 0},{"sendName": "゛時光い","receviceName": "xpq","sendText": "http://demo.rageframe.com/attachment/images/2021/11/18/image_1637224530_diIlZlmm.jpeg","createTime": "2021-12-19 12:21:54","updateTime": null,"chatmState": 1,"TextType": 1},{"sendName": "xpq","receviceName": "゛時光い","sendText": "http://demo2.rageframe.com/attachment/images/2021/09/01/image_1630483477_N03W37zs.jpg","createTime": "2021-12-19 12:21:48","updateTime": null,"chatmState": 1,"TextType": 1},{"sendName": "゛時光い","receviceName": "xpq","sendText": "這是第三條未讀消息","createTime": "2021-12-19 12:21:42","updateTime": null,"chatmState": 1,"TextType": 0},{"sendName": "゛時光い","receviceName": "xpq","sendText": "這是第二條未讀消息","createTime": "2021-12-19 12:21:33","updateTime": null,"chatmState": 1,"TextType": 0},{"sendName": "゛時光い","receviceName": "xpq","sendText": "http://demo2.rageframe.com/attachment/images/2021/09/01/image_1630483477_N03W37zs.jpg","createTime": "2021-12-19 11:02:18","updateTime": null,"chatmState": 1,"TextType": 1},{"sendName": "゛時光い","receviceName": "xpq","sendText": "愛你啊","createTime": "2021-12-18 20:37:03","updateTime": null,"chatmState": 0,"TextType": 0}],// 反轉數據接收unshiftmsg: [],imgMsg: [],scrollToView: '',oldTime: new Date(),inputh: '60'}},onShow() {// 數組倒敘 主要是應對后端傳過來的數據for (var i = 0; i < this.msg.length; i++) {//時間間隔處理if (i < this.msg.length - 1) { //這里表示頭部時間還是顯示一下let t = dateTime.spaceTime(this.oldTime, this.msg[i].createTime);if (t) {this.oldTime = t;}this.msg[i].createTime = t;}// 獲取圖片，為下面的預覽做準備if (this.msg[i].TextType == 1) {this.imgMsg.unshift(this.msg[i].sendText)}this.unshiftmsg.unshift(this.msg[i]);}// 跳轉到最后一條數據 與前面的:id進行對照this.$nextTick(function() {this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)})},components: {submit,},methods: {changeTime(date) {return dateTime.dateTime1(date);},// 進行圖片的預覽previewImg(e) {let index = 0;for (let i = 0; i < this.imgMsg.length; i++) {if (this.imgMsg[i] == e) {index = i;}}console.log("index", index)// 預覽圖片uni.previewImage({current: index,urls: this.imgMsg,longPressActions: {itemList: ['發(fā)送給朋友', '保存圖片', '收藏'],success: function(data) {console.log('選中了第' + (data.tapIndex + 1) + '個按鈕,第' + (data.index + 1) + '張圖片');},fail: function(err) {console.log(err.errMsg);}}});},//音頻播放playVoice(e) {innerAudioContext.src = e;innerAudioContext.onPlay(() => {console.log('開始播放');});},//地圖定位covers(e) {let map = [{latitude: e.latitude,longitude: e.longitude,iconPath: '../../../static/logo.png'}]return (map);},//跳轉地圖信息openLocation(e) {uni.openLocation({latitude: e.latitude,longitude: e.longitude,name: e.name,address: e.address,success: function() {console.log('success');}});},//接受輸入內容inputs(e) {//時間間隔處理let data = {"sendName": "゛時光い","receviceName": "xpq","sendText": e.message,"createTime": new Date(),"updateTime": new Date(),"chatmState": 1,"TextType": e.type};// 發(fā)送給服務器消息// onSendWS(JSON.stringify(data));this.unshiftmsg.push(data);// 跳轉到最后一條數據 與前面的:id進行對照this.$nextTick(function() {this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)})if (e.type == 1) {this.imgMsg.push(e.message);}console.log(e)},//輸入框高度heights(e) {console.log("高度:", e)this.inputh = e;this.goBottom();},// 滾動到底部goBottom() {this.scrollToView = '';this.$nextTick(function() {this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)})}}} </script><style lang="scss">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; //獲取動態(tài)高度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;}}}} </style>

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;}},//聊天時，發(fā)送時間處理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

<template><view><view class="submit"><view class="submit-chat"><view class="bt-img" @tap="records"><image :src="toc"></image></view><!-- 文本框 --><textarea auto-height="true" class="chat-send btn" :class="{displaynone:isrecord}" @input="inputs"@focus="focus" v-model="msg"></textarea><view class="record btn" :class="{displaynone:!isrecord}" @touchstart="touchstart" @touchend="touchend"@touchmove="touchmove">按住說話</view><view class="bt-img" @tap="emoji"><image src="../../static/icon/commonproblem.png"></image></view><view class="bt-img" @tap="more"><image src="../../static/icon/news.png"></image></view></view><!-- 表情 --><view class="emoji" :class="{displaynone:!isemoji}"><view class="emoji-send"><view class="emoji-send-det" @tap="emojiBack"><image src="../../static/icon/leftbrackets.png"></image></view><view class="emoji-send-bt" @tap="emojiSend">發(fā)送</view></view><emoji @emotion="emotion" :height="260"></emoji></view><!-- 更多 --><view class="more" :class="{displaynone:!ismore}"><view class="more-list" @tap="sendImg('album')"><image src="../../static/icon/noreceive.png"></image><view class="more-list-title">圖片</view></view><view class="more-list" @tap="sendImg('camera')"><image src="../../static/icon/noreceive.png"></image><view class="more-list-title">拍照</view></view><view class="more-list" @tap="choseLocation"><image src="../../static/icon/noreceive.png"></image><view class="more-list-title">定位</view></view><view class="more-list"><image src="../../static/icon/noreceive.png"></image><view class="more-list-title">視頻</view></view><view class="more-list"><image src="../../static/icon/noreceive.png"></image><view class="more-list-title">文件</view></view></view></view><view class="voice-bg" :class="{displaynone:!voicebg}"><view class="voice-bg-len"><view class="voice-bg-time" :style="{width:vlength/0.6+'%'}">{{vlength}}″</view><view class="voice-del">上滑取消錄音</view></view></view></view> </template><script>// 引入組件import emoji from '../emoji/emoji.vue'// 錄音const recorderManager = uni.getRecorderManager();export default {data() {return {isrecord: false,isemoji: false,ismore: false,voicebg: false,pageY: 0,msg: "",// 直接引用地址可能出不來，需要用requiretoc: require('../../static/icon/allorder.png'),timer: '', //計時器vlength: 0};},components: {emoji,},methods: {//獲取高度方法getElementHeight() {const query = uni.createSelectorQuery().in(this);query.select('.submit').boundingClientRect(data => {this.$emit('heights', data.height);}).exec();},//切換音頻records() {//切換的時候關閉其他界面this.ismore = falsethis.isemoji = false//切換高度setTimeout(() => {this.getElementHeight();}, 10)if (this.isrecord) {this.isrecord = false;this.toc = require("../../static/icon/allorder.png");} else {this.isrecord = true;this.toc = require("../../static/icon/wechat.png");}},// 表情emoji() {this.isemoji = !this.isemoji;//切換的時候關閉其功能this.ismore = falsethis.isrecord = false;this.toc = require("../../static/icon/allorder.png");//切換高度setTimeout(() => {this.getElementHeight();}, 10)},//接收表情emotion(e) {console.log(e),this.msg = this.msg + e},//文字發(fā)送inputs(e) {var chatm = e.detail.value;var pos = chatm.indexOf('\n');// 檢索字符串沒有數據，返回-1// if (pos != -1 && chatm.length > 1) {// this.$emit('inputs', this.msg);// setTimeout(() => {// this.msg = '';// }, 0)// }if (pos != -1 && chatm.length > 1) {// 0為表情和文字this.send(this.msg, 0)}},// 輸入框聚焦focus() {//關閉其他項this.isemoji = false;this.ismore = false;setTimeout(() => {this.getElementHeight()}, 10)},// 表情內發(fā)送emojiSend() {// if (this.msg.length > 0) {// this.$emit('inputs', this.msg);// setTimeout(() => {// this.msg = '';// }, 0)// }if (this.msg.length > 0) {//0為表情和文字this.send(this.msg, 0)}},// 表格退格emojiBack() {if (this.msg.length > 0) {this.msg = this.msg.substring(0, this.msg.length - 1);}},//更多功能more() {this.ismore = !this.ismore;//切換的時候關閉其他界面this.isemoji = falsethis.isrecord = false;this.toc = require("../../static/icon/allorder.png");setTimeout(() => {this.getElementHeight();}, 10)},//圖片發(fā)送sendImg(e) {let count = 9;if (e == 'album') {count = 9;} else {count = 1;}uni.chooseImage({count: count, //默認9sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有sourceType: [e], //從相冊選擇// success: function (res) { //用function的方式會找不到send方法success: (res) => {console.log(JSON.stringify(res.tempFilePaths));const filePaths = res.tempFilePaths;for (let i = 0; i < filePaths.length; i++) {this.send(filePaths[i], 1)}}});},//音頻處理//開始錄音touchstart(e) {console.log("開始錄音")console.log("點擊產生數據", e)this.pageY = e.changedTouches[0].pageY;this.voicebg = true;let i = 1;this.timer = setInterval(() => {this.vlength = i;i++;console.log("計時器開始工作,第幾秒", i)//結束計時if (i > 60) {clearInterval(this.timer);this.touchend();}}, 1000)recorderManager.start();},//刪除錄音touchmove(e) {// console.log("滑動到的y軸高度：",e.changedTouches[0].pageY);if (this.pageY - e.changedTouches[0].pageY > 100) {// 關閉錄音界面this.voicebg = false;}},// 結束錄音touchend() {console.log("結束錄音")clearInterval(this.timer);recorderManager.stop();// recorderManager.onStop(function(res) {recorderManager.onStop((res) => {let data = {voice: res.tempFilePath,time: this.vlength}if (this.voicebg) {this.send(data, 2);}// //時長歸位this.vlength = 0;this.voicebg = false;console.log('recorder stop' + JSON.stringify(res));// self.voicePath = res.tempFilePath;});},//獲取位置choseLocation() {uni.chooseLocation({// success: function(res) {success: res => {let data = {name: res.name,address: res.address,latitude: res.latitude,longitude: res.longitude}this.send(data, 3);// console.log('位置名稱：' + res.name);// console.log('詳細地址：' + res.address);// console.log('緯度：' + res.latitude);// console.log('經度：' + res.longitude);}});},//發(fā)送send(msg, type) {let date = {message: msg,type: type}this.$emit('inputs', date);setTimeout(() => {this.msg = '';}, 0)}}}; </script><style lang="scss" scoped>.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;}} </style>

submit.vue中引入的組件

emoji.vue

<template><view class="emoji" :style="{height:height+'px'}"><view class="emoji-line" v-for="(line,i) in emoji" :key="i"><view class="emoji-line-item" v-for="(item,index) in line" :key="index" @tap="clickEmoji(item)">{{item}}</view></view></view> </template><script>export default {props:{height:{type:Number,default:260}},name: "emoji",data() {return {emoji: [['😀', '😁', '😂', '🤣', '😃', '😃', '😅'],['😄', '😆', '😉', '😊', '😋', '😎', '😍'],['😎', '😘', '😗', '😙', '🙂', '🤗', '😑'],['😏', '😣', '😥', '😮', '🤐', '😯', '😶'],['😪', '😫', '😴', '😌', '😛', '🤤', '🙄'],['😒', '😓', '😕', '🙃', '🤑', '🙁', '😚'],['😖', '😤', '😭', '😨', '😰', '😬', '😵'],['😱', '😡', '😷', '💀', '👻', '💍', '💄'],['💩', '👑', '🎓', '👀', '💪🏻', '?🏻', '?🏼'],['🤘🏻', '🤙🏼', '👌🏻', '?🏻', '👍🏼', '👎🏻', '👏🏻'],['🙏🏻', '🤝', '🍖', '🍲', '🍦', '🍰'] //'🍔',]};},methods: {clickEmoji(e) {this.$emit('emotion', e)}}} </script><style lang="scss">.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;}}} </style>

最后

很多靜態(tài)圖片圖片都是本地的，需要各位用自己的本地圖片代替。
看

總結

以上是生活随笔為你收集整理的uniapp仿微信--聊天界面模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。