【技术】uniapp之聊天室 demo
生活随笔
收集整理的這篇文章主要介紹了
【技术】uniapp之聊天室 demo
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
【技術(shù)】 uniapp 之 聊天室 demo
效果
代碼
<template><view><view class="content" @touchstart="hideDrawer"><scroll-view class="msg-list" :class="popupLayerClass" scroll-y="true":scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView"@scrolltoupper="loadHistory" upper-threshold="50"><!-- 加載歷史數(shù)據(jù)waitingUI --><view class="loading"><view class="spinner"><view class="rect1"></view><view class="rect2"></view><view class="rect3"></view><view class="rect4"></view><view class="rect5"></view></view></view><view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.msg.id"><!-- 系統(tǒng)消息 --><block v-if="row.type=='system'"><view class="system"><!-- 文字消息 --><view v-if="row.msg.type=='text'" class="text">{{row.msg.content.text}}</view><!-- 領(lǐng)取紅包消息 --><view v-if="row.msg.type=='redEnvelope'" class="red-envelope"><image src="/static/chat/red-envelope-chat.png"></image>{{row.msg.content.text}}</view></view></block><!-- 用戶消息 --><block v-if="row.type=='user'"><!-- 自己發(fā)出的消息 --><view class="my" v-if="row.msg.userinfo.uid==myuid"><!-- 左-消息 --><view class="left"><!-- 文字消息 --><view v-if="row.msg.type=='text'" class="bubble"><rich-text :nodes="row.msg.content.text"></rich-text></view><!-- 語(yǔ)言消息 --><view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)":class="playMsgid == row.msg.id?'play':''"><view class="length">{{row.msg.content.length}}</view><view class="icon my-voice"></view></view><!-- 圖片消息 --><view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)"><image :src="row.msg.content.url":style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image></view><!-- 紅包 --><view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"@tap="openRedEnvelope(row.msg,index)"><image src="/static/chat/red-envelope.png"></image><view class="tis"><!-- 點(diǎn)擊開紅包 --></view><view class="blessing">{{row.msg.content.blessing}}</view></view></view><!-- 右-頭像 --><view class="right"><image :src="row.msg.userinfo.face"></image></view></view><!-- 別人發(fā)出的消息 --><view class="other" v-if="row.msg.userinfo.uid!=myuid"><!-- 左-頭像 --><view class="left"><image :src="row.msg.userinfo.face"></image></view><!-- 右-用戶名稱-時(shí)間-消息 --><view class="right"><view class="username"><view class="name">{{row.msg.userinfo.username}}</view><view class="time">{{row.msg.time}}</view></view><!-- 文字消息 --><view v-if="row.msg.type=='text'" class="bubble"><rich-text :nodes="row.msg.content.text"></rich-text></view><!-- 語(yǔ)音消息 --><view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)":class="playMsgid == row.msg.id?'play':''"><view class="icon other-voice"></view><view class="length">{{row.msg.content.length}}</view></view><!-- 圖片消息 --><view v-if="row.msg.type=='img'" class="bubble img" @tap="showPic(row.msg)"><image :src="row.msg.content.url":style="{'width': row.msg.content.w+'px','height': row.msg.content.h+'px'}"></image></view><!-- 紅包 --><view v-if="row.msg.type=='redEnvelope'" class="bubble red-envelope"@tap="openRedEnvelope(row.msg,index)"><image src="/static/chat/red-envelope.png"></image><view class="tis"><!-- 點(diǎn)擊開紅包 --></view><view class="blessing">{{row.msg.content.blessing}}</view></view></view></view></block></view></scroll-view></view><!-- 抽屜欄 --><view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard"><!-- 表情 --><swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150"><swiper-item v-for="(page,pid) in emojiList" :key="pid"><view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)"><!-- https://zhoukaiwen.com/img/icon/emojj1/1.png --><image mode="widthFix" :src="'https://zhoukaiwen.com/img/icon/emojj1/'+em.url"></image></view></swiper-item></swiper><!-- 更多功能 相冊(cè)-拍照-紅包 --><view class="more-layer" :class="{hidden:hideMore}"><view class="list"><view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view><view class="box" @tap="camera"><view class="icon paizhao"></view></view><view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view></view></view></view><!-- 底部輸入欄 --><view class="input-box cu-bar tabbar" :class="popupLayerClass" @touchmove.stop.prevent="discard"><!-- H5下不能錄音，輸入欄布局改動(dòng)一下 --><!-- #ifndef H5 --><view class="voice"><view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view></view><!-- #endif --><!-- #ifdef H5 --><view class="more" @tap="showMore"><view class="icon add"></view></view><!-- #endif --><view class="textbox"><view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"@touchcancel="voiceCancel">{{voiceTis}}</view><view class="text-mode" :class="isVoice?'hidden':''"><view class="box"><textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" /></view><view class="em" @tap="chooseEmoji"><view class="icon biaoqing"></view></view></view></view><!-- #ifndef H5 --><view class="more" @tap="showMore"><view class="icon add"></view></view><!-- #endif --><view class="send" :class="isVoice?'hidden':''" @tap="sendText"><view class="btn">發(fā)送</view></view></view><!-- 錄音UI效果 --><view class="record" :class="recording?'':'hidden'"><view class="ing" :class="willStop?'hidden':''"><view class="icon luyin2"></view></view><view class="cancel" :class="willStop?'':'hidden'"><view class="icon chehui"></view></view><view class="tis" :class="willStop?'change':''">{{recordTis}}</view></view><!-- 紅包彈窗 --><view class="windows" :class="windowsState"><!-- 遮罩層 --><view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view><view class="layer" @touchmove.stop.prevent="discard"><view class="open-redenvelope"><view class="top"><view class="close-btn"><view class="icon close" @tap="closeRedEnvelope"></view></view><image src="https://zhoukaiwen.com/img/qdpz/face/face_1.jpg"></image></view><view class="from">來(lái)自{{redenvelopeData.from}}</view><view class="blessing">{{redenvelopeData.blessing}}</view><view class="money">{{redenvelopeData.money}}</view><view class="showDetails" @tap="toDetails(redenvelopeData.rid)">查看領(lǐng)取詳情 <view class="icon to"></view></view></view></view></view></view> </template> <script>export default {data() {return {//文字消息textMsg: '',//消息列表isHistoryLoading: false,scrollAnimation: false,scrollTop: 0,scrollToView: '',msgList: [],msgImgList: [],myuid: 0,//錄音相關(guān)參數(shù)// #ifndef H5//H5不能錄音RECORDER: uni.getRecorderManager(),// #endifisVoice: false,voiceTis: '按住 說話',recordTis: "手指上滑 取消發(fā)送",recording: false,willStop: false,initPoint: {identifier: 0,Y: 0},recordTimer: null,recordLength: 0,//播放語(yǔ)音相關(guān)參數(shù)AUDIO: uni.createInnerAudioContext(),playMsgid: null,VoiceTimer: null,// 抽屜參數(shù)popupLayerClass: '',// more參數(shù)hideMore: true,//表情定義hideEmoji: true,emojiList: [[{"url": "1.png",alt: "[微笑]"}, {"url": "2.png",alt: "[生氣]"}, {"url": "3.png",alt: "[壞笑]"}, {"url": "4.png",alt: "[難受]"}, {"url": "5.png",alt: "[困]"}, {"url": "6.png",alt: "[偷看]"}, {"url": "7.png",alt: "[難過]"}, {"url": "8.png",alt: "[斜眼]"}, {"url": "9.png",alt: "[委屈]"}, {"url": "10.png",alt: "[害羞]"}, {"url": "11.png",alt: "[裂開]"}, {"url": "12.png",alt: "[偷笑]"}, {"url": "13.png",alt: "[痛苦]"}, {"url": "14.png",alt: "[白眼]"}, {"url": "15.png",alt: "[丑]"}, {"url": "16.png",alt: "[哇哇哭]"}, {"url": "17.png",alt: "[笑嘻嘻]"}, {"url": "18.png",alt: "[盯著你]"}, {"url": "19.png",alt: "[啊哈]"}, {"url": "20.png",alt: "[吃瓜]"}, {"url": "21.png",alt: "[哦吼]"}, {"url": "22.png",alt: "[哭死]"}, {"url": "23.png",alt: "[打臉]"}, {"url": "24.png",alt: "[斗雞眼]"}],[{"url": "25.png",alt: "[發(fā)呆]"}, {"url": "26.png",alt: "[憨笑]"}, {"url": "27.png",alt: "[無(wú)語(yǔ)]"}, {"url": "28.png",alt: "[雞賊]"}, {"url": "29.png",alt: "[大無(wú)語(yǔ)]"}, {"url": "30.png",alt: "[哭吐了]"}, {"url": "31.png",alt: "[呲牙笑]"}, {"url": "32.png",alt: "[奸笑]"}, {"url": "33.png",alt: "[啊啊啊]"}, {"url": "34.png",alt: "[哈嘿]"}, {"url": "35.png",alt: "[驚訝]"}, {"url": "36.png",alt: "[指你]"}, {"url": "37.png",alt: "[可愛型]"}, {"url": "38.png",alt: "[快哭了]"}, {"url": "39.png",alt: "[摳鼻屎]"}, {"url": "40.png",alt: "[酷酷]"}, {"url": "41.png",alt: "[笑汗]"}, {"url": "42.png",alt: "[算命]"}, {"url": "43.png",alt: "[紅臉壞笑]"}, {"url": "44.png",alt: "[委屈死了]"}, {"url": "45.png",alt: "[爆炸]"}, {"url": "46.png",alt: "[吐了]"}, {"url": "47.png",alt: "[么么噠]"}, {"url": "48.png",alt: "[吐血]"}],[{"url": "49.png",alt: "[面無(wú)表情]"}, {"url": "50.png",alt: "[捂嘴吐]"}, {"url": "51.png",alt: "[斜眼看]"}, {"url": "52.png",alt: "[花癡]"}, {"url": "53.png",alt: "[被打]"}, {"url": "54.png",alt: "[瞌睡]"}, {"url": "55.png",alt: "[冥想]"}, {"url": "56.png",alt: "[俏皮]"}, {"url": "57.png",alt: "[戳手委屈]"}, {"url": "58.png",alt: "[端莊]"}, {"url": "59.png",alt: "[emmm]"}, {"url": "60.png",alt: "[歡呼]"}, {"url": "61.png",alt: "[笑哭了]"}, {"url": "62.png",alt: "[抱抱]"}, {"url": "63.png",alt: "[閉眼笑]"}, {"url": "64.png",alt: "[捂嘴微笑]"}, {"url": "65.png",alt: "[笑哭2]"}, {"url": "66.png",alt: "[笑嘻嘻]"}, {"url": "67.png",alt: "[笑露齒]"}, {"url": "68.png",alt: "[陰臉笑]"}, {"url": "69.png",alt: "[問號(hào)臉]"}, {"url": "70.png",alt: "[拜拜]"}, {"url": "71.png",alt: "[難受2]"}, {"url": "72.png",alt: "[傻笑2]"}],[{"url": "73.png",alt: "[爆炸2]"}, {"url": "74.png",alt: "[二哈]"}, {"url": "75.png",alt: "[二哈吐舌]"}, {"url": "76.png",alt: "[狗狗笑哭]"}, {"url": "77.png",alt: "[狗狗綠帽]"}, {"url": "78.png",alt: "[狗狗張嘴]"}, {"url": "79.png",alt: "[狗狗綠扇]"}, {"url": "80.png",alt: "[狗狗]"}, {"url": "81.png",alt: "[貓咪]"}, {"url": "82.png",alt: "[牛啊]"}, {"url": "83.png",alt: "[愛心]"}, {"url": "84.png",alt: "[心裂開]"}, {"url": "85.png",alt: "[玫瑰花]"}, {"url": "86.png",alt: "[枯萎]"}, {"url": "87.png",alt: "[棒]"}, {"url": "88.png",alt: "[差]"}, {"url": "89.png",alt: "[紅藥]"}, {"url": "90.png",alt: "[綠藥]"}, {"url": "91.png",alt: "[抱拳]"}, {"url": "92.png",alt: "[ok]"}, {"url": "93.png",alt: "[pk]"}, {"url": "94.png",alt: "[綠帽子]"}, {"url": "95.png",alt: "[菜刀]"}]],//表情圖片圖床名稱 ，由于我上傳的第三方圖床名稱會(huì)有改變，所以有此數(shù)據(jù)來(lái)做對(duì)應(yīng)，您實(shí)際應(yīng)用中應(yīng)該不需要onlineEmoji: {"1.png": "1.png","2.png": "2.png","3.png": "3.png","4.png": "4.png","5.png": "5.png","6.png": "6.png","7.png": "7.png","8.png": "8.png","9.png": "9.png","10.png": "10.png","11.png": "11.png","12.png": "12.png","13.png": "13.png","14.png": "14.png","15.png": "15.png","16.png": "16.png","17.png": "17.png","18.png": "18.png","19.png": "19.png","20.png": "20.png","21.png": "21.png","22.png": "22.png","23.png": "23.png","24.png": "24.png","25.png": "25.png","26.png": "26.png","27.png": "27.png","28.png": "28.png","29.png": "29.png","30.png": "30.png","31.png": "31.png","32.png": "32.png","33.png": "33.png","34.png": "34.png","35.png": "35.png","36.png": "36.png","37.png": "37.png","38.png": "38.png","39.png": "39.png","40.png": "40.png","41.png": "41.png","42.png": "42.png","43.png": "43.png","44.png": "44.png","45.png": "45.png","46.png": "46.png","47.png": "47.png","48.png": "48.png","49.png": "49.png","50.png": "50.png","51.png": "51.png","52.png": "52.png","53.png": "53.png","54.png": "54.png","55.png": "55.png","56.png": "56.png","57.png": "57.png","58.png": "58.png","59.png": "59.png","60.png": "60.png","61.png": "61.png","62.png": "62.png","63.png": "63.png","64.png": "64.png","65.png": "65.png","66.png": "66.png","67.png": "67.png","68.png": "68.png","69.png": "69.png","70.png": "70.png","71.png": "71.png","72.png": "72.png","73.png": "73.png","74.png": "74.png","75.png": "75.png","76.png": "76.png","77.png": "77.png","78.png": "78.png","79.png": "79.png","80.png": "80.png","81.png": "81.png","82.png": "82.png","83.png": "83.png","84.png": "84.png","85.png": "85.png","86.png": "86.png","87.png": "87.png","88.png": "88.png","89.png": "89.png","90.png": "90.png","91.png": "91.png","92.png": "92.png","93.png": "93","94.png": "94.png","95.png": "95.png"},//紅包相關(guān)參數(shù)windowsState: '',redenvelopeData: {rid: null, //紅包IDfrom: null,face: null,blessing: null,money: null}};},onLoad(option) {this.getMsgList();//語(yǔ)音自然播放結(jié)束this.AUDIO.onEnded((res) => {this.playMsgid = null;});// #ifndef H5//錄音開始事件this.RECORDER.onStart((e) => {this.recordBegin(e);})//錄音結(jié)束事件this.RECORDER.onStop((e) => {this.recordEnd(e);})// #endif},onShow() {this.scrollTop = 9999999;//模板借由本地緩存實(shí)現(xiàn)發(fā)紅包效果，實(shí)際應(yīng)用中請(qǐng)不要使用此方法。//uni.getStorage({key: 'redEnvelopeData',success: (res) => {console.log(res.data);let nowDate = new Date();let lastid = this.msgList[this.msgList.length - 1].msg.id;lastid++;let row = {type: "user",msg: {id: lastid,type: "redEnvelope",time: nowDate.getHours() + ":" + nowDate.getMinutes(),userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {blessing: res.data.blessing,rid: Math.floor(Math.random() * 1000 + 1),isReceived: false}}};this.screenMsg(row);uni.removeStorage({key: 'redEnvelopeData'});}});},methods: {// 接受消息(篩選處理)screenMsg(msg) {//從長(zhǎng)連接處轉(zhuǎn)發(fā)給這個(gè)方法，進(jìn)行篩選處理if (msg.type == 'system') {// 系統(tǒng)消息switch (msg.msg.type) {case 'text':this.addSystemTextMsg(msg);break;case 'redEnvelope':this.addSystemRedEnvelopeMsg(msg);break;}} else if (msg.type == 'user') {// 用戶消息switch (msg.msg.type) {case 'text':this.addTextMsg(msg);break;case 'voice':this.addVoiceMsg(msg);break;case 'img':this.addImgMsg(msg);break;case 'redEnvelope':this.addRedEnvelopeMsg(msg);break;}console.log('用戶消息');//非自己的消息震動(dòng)if (msg.msg.userinfo.uid != this.myuid) {console.log('振動(dòng)');uni.vibrateLong();}}this.$nextTick(function() {// 滾動(dòng)到底this.scrollToView = 'msg' + msg.msg.id});},//觸發(fā)滑動(dòng)到頂部(加載歷史信息記錄)loadHistory(e) {if (this.isHistoryLoading) {return;}this.isHistoryLoading = true; //參數(shù)作為進(jìn)入請(qǐng)求標(biāo)識(shí)，防止重復(fù)請(qǐng)求this.scrollAnimation = false; //關(guān)閉滑動(dòng)動(dòng)畫let Viewid = this.msgList[0].msg.id; //記住第一個(gè)信息ID//本地模擬請(qǐng)求歷史記錄效果setTimeout(() => {// 消息列表let list = [{type: "user",msg: {id: 1,type: "text",time: "12:56",userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {text: "web前端開發(fā)該怎么學(xué)習(xí)？"}}},{type: "user",msg: {id: 2,type: "text",time: "12:57",userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: {text: "按照基本路線，從html、css、js三大基礎(chǔ)開始，然后ajax、vue進(jìn)階學(xué)習(xí)，最后學(xué)習(xí)小程序、node、react。"}}},{type: "user",msg: {id: 3,type: "voice",time: "12:59",userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: {url: "/static/voice/1.mp3",length: "00:06"}}},{type: "user",msg: {id: 4,type: "voice",time: "13:05",userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {url: "/static/voice/2.mp3",length: "00:06"}}},]// 獲取消息中的圖片,并處理顯示尺寸for (let i = 0; i < list.length; i++) {if (list[i].type == 'user' && list[i].msg.type == "img") {list[i].msg.content = this.setPicSize(list[i].msg.content);this.msgImgList.unshift(list[i].msg.content.url);}list[i].msg.id = Math.floor(Math.random() * 1000 + 1);this.msgList.unshift(list[i]);}//這段代碼很重要，不然每次加載歷史數(shù)據(jù)都會(huì)跳到頂部this.$nextTick(function() {this.scrollToView = 'msg' + Viewid; //跳轉(zhuǎn)上次的第一行信息位置this.$nextTick(function() {this.scrollAnimation = true; //恢復(fù)滾動(dòng)動(dòng)畫});});this.isHistoryLoading = false;}, 1000)},// 加載初始頁(yè)面消息getMsgList() {// 消息列表let list = [{type: "system",msg: {id: 0,type: "text",content: {text: "歡迎進(jìn)入Kevin聊天室"}}},{type: "user",msg: {id: 1,type: "text",time: "12:56",userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {text: "web前端開發(fā)該怎么學(xué)習(xí)？"}}},{type: "user",msg: {id: 2,type: "text",time: "12:57",userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: {text: "按照基本路線，從html、css、js三大基礎(chǔ)開始，然后ajax、vue進(jìn)階學(xué)習(xí)，最后學(xué)習(xí)小程序、node、react。"}}},{type: "user",msg: {id: 3,type: "voice",time: "12:59",userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: {url: "/static/voice/1.mp3",length: "00:06"}}},{type: "user",msg: {id: 4,type: "voice",time: "13:05",userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {url: "/static/voice/2.mp3",length: "00:06"}}},{type: "user",msg: {id: 5,type: "img",time: "13:05",userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {url: "https://zhoukaiwen.com/img/Design/logo/psketch3.png",w: 200,h: 200}}},{type: "user",msg: {id: 6,type: "img",time: "12:59",userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: {url: "https://zhoukaiwen.com/img/Design/pc/ybss_jt.png",w: 1920,h: 1080}}},{type: "system",msg: {id: 7,type: "text",content: {text: "歡迎進(jìn)入Kevin聊天室"}}},{type: "system",msg: {id: 9,type: "redEnvelope",content: {text: "售后客服008領(lǐng)取了你的紅包"}}},{type: "user",msg: {id: 10,type: "redEnvelope",time: "12:56",userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: {blessing: "恭喜發(fā)財(cái)，大吉大利，萬(wàn)事如意",rid: 0,isReceived: false}}},{type: "user",msg: {id: 11,type: "redEnvelope",time: "12:56",userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: {blessing: "恭喜發(fā)財(cái)",rid: 1,isReceived: false}}},]// 獲取消息中的圖片,并處理顯示尺寸for (let i = 0; i < list.length; i++) {if (list[i].type == 'user' && list[i].msg.type == "img") {list[i].msg.content = this.setPicSize(list[i].msg.content);this.msgImgList.push(list[i].msg.content.url);}}this.msgList = list;// 滾動(dòng)到底部this.$nextTick(function() {//進(jìn)入頁(yè)面滾動(dòng)到底部this.scrollTop = 9999;this.$nextTick(function() {this.scrollAnimation = true;});});},//處理圖片尺寸，如果不處理寬高，新進(jìn)入頁(yè)面加載圖片時(shí)候會(huì)閃setPicSize(content) {// 讓圖片最長(zhǎng)邊等于設(shè)置的最大長(zhǎng)度，短邊等比例縮小，圖片控件真實(shí)改變，區(qū)別于aspectFit方式。let maxW = uni.upx2px(350); //350是定義消息圖片最大寬度let maxH = uni.upx2px(350); //350是定義消息圖片最大高度if (content.w > maxW || content.h > maxH) {let scale = content.w / content.h;content.w = scale > 1 ? maxW : maxH * scale;content.h = scale > 1 ? maxW / scale : maxH;}return content;},//更多功能(點(diǎn)擊+彈出) showMore() {this.isVoice = false;this.hideEmoji = true;if (this.hideMore) {this.hideMore = false;this.openDrawer();} else {this.hideDrawer();}},// 打開抽屜openDrawer() {this.popupLayerClass = 'showLayer';},// 隱藏抽屜hideDrawer() {this.popupLayerClass = '';setTimeout(() => {this.hideMore = true;this.hideEmoji = true;}, 150);},// 選擇圖片發(fā)送chooseImage() {this.getImage('album');},//拍照發(fā)送camera() {this.getImage('camera');},//發(fā)紅包handRedEnvelopes() {uni.navigateTo({url: 'hand/hand'});this.hideDrawer();},//選照片 or 拍照getImage(type) {this.hideDrawer();uni.chooseImage({sourceType: [type],sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有success: (res) => {for (let i = 0; i < res.tempFilePaths.length; i++) {uni.getImageInfo({src: res.tempFilePaths[i],success: (image) => {console.log(image.width);console.log(image.height);let msg = {url: res.tempFilePaths[i],w: image.width,h: image.height};this.sendMsg(msg, 'img');}});}}});},// 選擇表情chooseEmoji() {this.hideMore = true;if (this.hideEmoji) {this.hideEmoji = false;this.openDrawer();} else {this.hideDrawer();}},//添加表情addEmoji(em) {this.textMsg += em.alt;},//獲取焦點(diǎn)，如果不是選表情ing,則關(guān)閉抽屜textareaFocus() {if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {this.hideDrawer();}},// 發(fā)送文字消息sendText() {this.hideDrawer(); //隱藏抽屜if (!this.textMsg) {return;}let content = this.replaceEmoji(this.textMsg);let msg = {text: content}this.sendMsg(msg, 'text');this.textMsg = ''; //清空輸入框},//替換表情符號(hào)為圖片replaceEmoji(str) {let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {console.log("str: " + str);console.log("index: " + index);console.log("item: " + item);for (let i = 0; i < this.emojiList.length; i++) {let row = this.emojiList[i];for (let j = 0; j < row.length; j++) {let EM = row[j];if (EM.alt == item) {//在線表情路徑，圖文混排必須使用網(wǎng)絡(luò)路徑，請(qǐng)上傳一份表情到你的服務(wù)器后再替換此路徑 //比如你上傳服務(wù)器后，你的100.gif路徑為https://www.xxx.com/emoji/100.gif 則替換onlinePath填寫為https://www.xxx.com/emoji/let onlinePath = 'https://zhoukaiwen.com/img/icon/emojj1/'let imgstr = '<img width="32rpx" src="' + onlinePath + this.onlineEmoji[EM.url] +'">';console.log("imgstr: " + imgstr);return imgstr;}}}});return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';},// 發(fā)送消息sendMsg(content, type) {//實(shí)際應(yīng)用中，此處應(yīng)該提交長(zhǎng)連接，模板僅做本地處理。var nowDate = new Date();let lastid = this.msgList[this.msgList.length - 1].msg.id;lastid++;let msg = {type: 'user',msg: {id: lastid,time: nowDate.getHours() + ":" + nowDate.getMinutes(),type: type,userinfo: {uid: 0,username: "大黑哥",face: "https://zhoukaiwen.com/img/kevinLogo.png"},content: content}}// 發(fā)送消息this.screenMsg(msg);// 定時(shí)器模擬對(duì)方回復(fù),三秒setTimeout(() => {lastid = this.msgList[this.msgList.length - 1].msg.id;lastid++;msg = {type: 'user',msg: {id: lastid,time: nowDate.getHours() + ":" + nowDate.getMinutes(),type: type,userinfo: {uid: 1,username: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg"},content: content}}// 本地模擬發(fā)送消息this.screenMsg(msg);}, 3000)},// 添加文字消息到列表addTextMsg(msg) {this.msgList.push(msg);},// 添加語(yǔ)音消息到列表addVoiceMsg(msg) {this.msgList.push(msg);},// 添加圖片消息到列表addImgMsg(msg) {msg.msg.content = this.setPicSize(msg.msg.content);this.msgImgList.push(msg.msg.content.url);this.msgList.push(msg);},addRedEnvelopeMsg(msg) {this.msgList.push(msg);},// 添加系統(tǒng)文字消息到列表addSystemTextMsg(msg) {this.msgList.push(msg);},// 添加系統(tǒng)紅包消息到列表addSystemRedEnvelopeMsg(msg) {this.msgList.push(msg);},// 打開紅包openRedEnvelope(msg, index) {let rid = msg.content.rid;uni.showLoading({title: '加載中...'});console.log("index: " + index);//模擬請(qǐng)求服務(wù)器效果setTimeout(() => {//加載數(shù)據(jù)if (rid == 0) {this.redenvelopeData = {rid: 0, //紅包IDfrom: "大黑哥",face: "https://zhoukaiwen.com/img/qdpz/face/face.jpg",blessing: "恭喜發(fā)財(cái)，大吉大利",money: "已領(lǐng)完"}} else {this.redenvelopeData = {rid: 1, //紅包IDfrom: "售后客服008",face: "https://zhoukaiwen.com/img/qdpz/face/face_2.jpg",blessing: "恭喜發(fā)財(cái)",money: "0.01"}if (!msg.content.isReceived) {// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你領(lǐng)取了售后客服008的紅包"}}},this.sendSystemMsg({text: "你領(lǐng)取了" + (msg.userinfo.uid == this.myuid ? "自己" : msg.userinfo.username) + "的紅包"}, 'redEnvelope');console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));this.msgList[index].msg.content.isReceived = true;}}uni.hideLoading();this.windowsState = 'show';}, 200)},// 關(guān)閉紅包彈窗closeRedEnvelope() {this.windowsState = 'hide';setTimeout(() => {this.windowsState = '';}, 200)},sendSystemMsg(content, type) {let lastid = this.msgList[this.msgList.length - 1].msg.id;lastid++;let row = {type: "system",msg: {id: lastid,type: type,content: content}};this.screenMsg(row)},//領(lǐng)取詳情toDetails(rid) {uni.navigateTo({url: 'details/details?rid=' + rid})},// 預(yù)覽圖片showPic(msg) {uni.previewImage({indicator: "none",current: msg.content.url,urls: this.msgImgList});},// 播放語(yǔ)音playVoice(msg) {this.playMsgid = msg.id;this.AUDIO.src = msg.content.url;this.$nextTick(function() {this.AUDIO.play();});},// 錄音開始voiceBegin(e) {if (e.touches.length > 1) {return;}this.initPoint.Y = e.touches[0].clientY;this.initPoint.identifier = e.touches[0].identifier;this.RECORDER.start({format: "mp3"}); //錄音開始,},//錄音開始UI效果recordBegin(e) {this.recording = true;this.voiceTis = '松開 結(jié)束';this.recordLength = 0;this.recordTimer = setInterval(() => {this.recordLength++;}, 1000)},// 錄音被打斷voiceCancel() {this.recording = false;this.voiceTis = '按住 說話';this.recordTis = '手指上滑 取消發(fā)送'this.willStop = true; //不發(fā)送錄音this.RECORDER.stop(); //錄音結(jié)束},// 錄音中(判斷是否觸發(fā)上滑取消發(fā)送)voiceIng(e) {if (!this.recording) {return;}let touche = e.touches[0];//上滑一個(gè)導(dǎo)航欄的高度觸發(fā)上滑取消發(fā)送if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {this.willStop = true;this.recordTis = '松開手指 取消發(fā)送'} else {this.willStop = false;this.recordTis = '手指上滑 取消發(fā)送'}},// 結(jié)束錄音voiceEnd(e) {if (!this.recording) {return;}this.recording = false;this.voiceTis = '按住 說話';this.recordTis = '手指上滑 取消發(fā)送'this.RECORDER.stop(); //錄音結(jié)束},//錄音結(jié)束(回調(diào)文件)recordEnd(e) {clearInterval(this.recordTimer);if (!this.willStop) {console.log("e: " + JSON.stringify(e));let msg = {length: 0,url: e.tempFilePath}let min = parseInt(this.recordLength / 60);let sec = this.recordLength % 60;min = min < 10 ? '0' + min : min;sec = sec < 10 ? '0' + sec : sec;msg.length = min + ':' + sec;this.sendMsg(msg, 'voice');} else {console.log('取消發(fā)送錄音');}this.willStop = false;},// 切換語(yǔ)音/文字輸入switchVoice() {this.hideDrawer();this.isVoice = this.isVoice ? false : true;},discard() {return;}}} </script> <style lang="scss">@import "css/style.scss";.content .showLayer {transform: translate3d(0, -43vw, 0);} </style>源碼
前端鋪?zhàn)?/p>
總結(jié)
以上是生活随笔為你收集整理的【技术】uniapp之聊天室 demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python画图之饼图
- 下一篇： 什么是继承，什么是多态，方法的重载和覆盖