uniapp模仿微信實現聊天介面的示例程式碼
阿新 • • 發佈：2022-01-12
目錄
- 專案演示
- 前言
- 主介面
- chat.中引入的檔案
- chat.vue中引入的元件
- submit.vue中引入的元件
- 最後
專案演示
前言
我是看B站的視訊一個一個敲的，講的還不錯。可以去看看vue+node.js即時通訊聊天室APP開發前端篇
主介面
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)">
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
<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">傳送</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/noreceoazjUQINive.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: "",// 直接引用地址可能出不來，需要用require
toc: 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 = false
this.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 = false
this.isrecord = false;
this.toc = require("../../static/icon/allorder.png");
//切換高度
setTimeout(() => {
this.getElementHeight();
},10)
},//接收表情
emotion(e) {
console.log(e),this.msg = this.msg + e
},//文字傳送
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()
},// 表情內傳送
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 = false
this.isrecord = false;
this.toc = require("../../static/icon/allorder.png");
setTimeout(() => {
this.getElementHeight();
},//圖片傳送
sendImg(e) {
let count = 9;
if (e == 'album') {
count = 9;
} else {
count = 1;
}
uni.chooseImage({
count: count,//預設9
sizeType: ['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);
}
});
},//傳送
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,0.96);
border-top: 1px solid rgba(39,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,www.cppcns.com50,0.6);
}
}
.emoji {
width: 100%;
height: 460rpx;
background: rgba(236,237,238,1);
box-shadow: 0px 11rpx 0px 0px rgba(0,0.1);
.emoji-send {
width: 280rpx;
height: 104rpx;
padding-top: 24rpx;
background-color: rgba(236,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,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,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,1);
border-radius: 24rpx;
}
.more-list-title {
font-size: 24rpx;
color: rgba(39,0.5);
line-height: 34rpx;
}
}
}
.voice-bg {
height: 100%;
width: 100%;
background-color: rgba(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,0.2);
border-radius: 42rpx;
text-align: center;
}
.voice-bg-time {
display: inline-block;
min-width: 120rpx;
line-height: 84rpx;
background-color: rgba(255,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: [
['