微信小程序实现聊天室

2023-07-18 10:52:07 64

本文实例为大家分享了微信小程序实现聊天室的具体代码，供大家参考，具体内容如下

正文：



登录



查看详情{{item}}






{{item.messageTime}}







{{item.text}}















{{item.messageTime}}










{{item.text}}


感谢您的反馈，我们会再接再厉！
拨打人工客服













发送





人工客服

page{
background-color:#f2f2f2;
height:100%;
padding:0auto;
margin:0auto;
}

.login{
z-index:999;
position:fixed;
top:300rpx;
height:100rpx;
text-align:center;
line-height:100rpx;
width:400rpx;
left:50%;
margin-left:-200rpx;
background:white;
}

.Phone{
top:500rpx;
width:400rpx;
}

.login_zz{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:998;
background-color:rgba(0,0,0,0.5);
}

swiper{
height:180rpx;
}

swiperswiper-item.slide-image{
width:100%;
height:180rpx;
}

.jia_img{
height:80rpx;
width:90rpx;
}

.time{
text-align:center;
padding:5rpx20rpx5rpx20rpx;
border-radius:10rpx;
display:block;
height:38rpx;
line-height:38rpx;
position:relative;
margin:0auto;
margin-bottom:20rpx;
width:90rpx;
color:white;
font-size:26rpx;
background-color:#dedede;
}

.tab{
bottom:120rpx;
}

.tab_1{
position:fixed;
bottom:50rpx;
width:200rpx;
font-size:26rpx;
left:50%;
margin-left:-45rpx;
height:100rpx;
}

.tab_2{
right:30rpx;
position:fixed;
}

/*聊天*/

.my_right{
float:right;
margin-top:30rpx;
position:relative;
}

.my_audio{
height:60rpx;
width:60rpx;
z-index:2;
position:relative;
top:10rpx;
left:20rpx;
}

.you_left{
margin-top:30rpx;
float:left;
position:relative;
padding-left:5rpx;
}

.new_img{
width:85rpx;
height:85rpx;
overflow:hidden;
}

.page_r{
float:right;
}

.new_txt{
min-width:380rpx;
width:460rpx;
word-break:break-all;
}

.new_txt_my{
border-radius:7rpx;
background:#9fe75a;
position:relative;
right:30rpx;
padding:17rpx30rpx17rpx30rpx;
float:right;
border:1pxsolid#d0d0d0;
}

.new_txt_my.arrow{
position:absolute;
z-index:2;
width:40rpx;
right:-38rpx;
}

.new_txt_my.arrowem{
position:absolute;
border-style:solid;
border-width:15rpx;
border-color:transparenttransparenttransparent#d0d0d0;
top:1rpx;
}

.new_txt_my.arrowspan{
position:absolute;
top:5rpx;
border-style:solid;
border-width:15rpx;
border-color:transparenttransparenttransparent#9fe75a;
}

.new_txt_my_2{
word-break:break-all;
border-radius:7rpx;
background:#9fe75a;
min-width:330rpx;
max-width:530rpx;
padding:17rpx30rpx17rpx30rpx;
float:right;
}

.new_txt_ai{
border-radius:7rpx;
left:20rpx;
background-color:#fff;
position:relative;
border:1pxsolid#d0d0d0;
float:left;
}

.new_txt_ai.arrow{
position:relative;
width:40rpx;
left:-30rpx;
}

.new_txt_ai.arrowem{
position:absolute;
border-style:solid;
border-width:15rpx;
top:20rpx;
border-color:transparent#d0d0d0transparenttransparent;
}

.new_txt_ai.arrowspan{
position:absolute;
top:20rpx;
border-style:solid;
border-width:15rpx;
border-color:transparent#ffftransparenttransparent;
left:2rpx;
}

.ai_content{
word-break:break-all;
padding:17rpx30rpx17rpx30rpx;
}

.sanjiao{
top:25rpx;
position:relative;
width:0px;
height:0px;
border-width:15rpx;
border-style:solid;
}

.my{
border-color:transparenttransparenttransparent#9fe75a;
}

.you{
border-color:transparent#ffftransparenttransparent;
}

._span{
border-color:#ffftransparenttransparent;
top:-17px;
}

.is_ai_btn{
border-radius:007px7px;
border-top:1pxsolid#d0d0d0;
background:white;
position:relative;
bottom:0;
left:0;
width:100%;
height:80rpx;
line-height:80rpx;
display:flex;
flex-direction:row;
text-align:center;
}

.is_ai_btnview{
width:50%;
}

.is_ai_btnimage{
width:32rpx;
position:relative;
top:4rpx;
height:32rpx;
}

.is_ai_btn.two{
border-left:1pxsolid#d0d0d0;
}

.yes_problem_log{
border-top:1pxsolid#d0d0d0;
height:80rpx;
text-align:center;
line-height:80rpx;
}

.voice_icon{
width:60rpx;
height:60rpx;
margin:0auto;
padding:10rpx10rpx10rpx10rpx;
}

.add_icon{
width:70rpx;
height:70rpx;
margin:0auto;
padding:20rpx10rpx10rpx15rpx;
}

.voice_ing{
width:90%;
height:75rpx;
line-height:85rpx;
text-align:center;
border-radius:15rpx;
border:1pxsolid#d0d0d0;
}

.zezhao{
height:100%;
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
background:rgba(0,0,0,0.5);
}

.in_voice_icon{
z-index:3;
left:0;
bottom:0;
width:100%;
position:absolute;
height:500rpx;
background:#f8f8f8;
}

.in_voice_icon.item{
position:relative;
margin-top:50rpx;
margin-left:50rpx;
text-align:center;
width:140rpx;
}

.in_voice_icon.img{
width:80rpx;
height:80rpx;
border-radius:15rpx;
}

.in_voice_icon.text{
font-size:32rpx;
margin-top:20rpx;
}

.sendmessage{
width:100%;
z-index:2;
display:flex;
position:fixed;
bottom:0px;
background-color:#f8f8f8;
flex-direction:row;
height:100rpx;
}

.sendmessageinput{
width:78%;
height:80rpx;
line-height:80rpx;
font-size:28rpx;
margin-top:10rpx;
margin-left:20rpx;
border-bottom:1pxsolid#d0d0d0;
padding-left:20rpx;
}

.sendmessagebutton{
border:1pxsolidwhite;
width:18%;
height:80rpx;
background:#0c0;
color:white;
line-height:80rpx;
margin-top:10rpx;
font-size:28rpx;
}

.hei{
height:20rpx;
}

.history{
height:88%;
display:flex;
font-size:14px;
line-height:50rpx;
position:relative;
top:20rpx;
}

.icno_kf{
position:fixed;
bottom:160rpx;
margin:0auto;
text-align:center;
left:50%;
margin-left:-40rpx;
width:100rpx;
height:100rpx;
border-radius:50%;
}

//pages/index/to_news/to_news.js
varapp=getApp();
varutil=require("../../utils/util.js");
varsocketOpen=false;
varuuid='',
time_="1";
varrecorder=wx.getRecorderManager();
constinnerAudioContext=wx.createInnerAudioContext()//获取播放对象var
frameBuffer_Data,session,SocketTask,string_base64;
Page({
data:{
login:false,
listCustmerServiceBanner:[],
indicatorDots:false,
autoplay:false,
interval:5000,
duration:1000,
user_input_text:'',//用户输入文字
inputValue:'',
time:'',
returnValue:'',
if_send:false,
add:true,
cross:false,//is_my:true,text:'12432'
allContentList:[{},{
is_ai:[]
}],
num:0
},//页面加载
onLoad:function(e){
varthat=this;
if(wx,wx.getStorageSync('openid')){
this.setData({
login:false
})
}else{
this.setData({
login:true
})
}
leturl=app.url+'/show.php'
util.request(url,'post',{},'正在加载···',function(res){
for(vari=0;i{
console.log('开始录音');
})
recorder.onStop((res)=>{
console.log('停止录音,临时路径',res.tempFilePath);//_tempFilePath=res.tempFilePath;
varx=newDate().getTime()-this.data.voice_ing_start_date
if(x>1000){
that.data.allContentList.push({
is_my:true,
audio:res.tempFilePath,
length:x/1000*30
});
that.setData({
allContentList:that.data.allContentList
})
}
})
recorder.onFrameRecorded((res)=>{
varx=newDate().getTime()-this.data.voice_ing_start_date
if(x>1000){
console.log('onFrameRecordedres.frameBuffer',res.frameBuffer);
string_base64=wx.arrayBufferToBase64(res.frameBuffer)//console.log('string_base64--',wx.arrayBufferToBase64(string_base64))
if(res.isLastFrame){
vardata={
audioType:3,
cmd:1,
type:2,
signType:'BASE64',
session:session,
body:string_base64,
}
console.log('that.data.allContentList',that.data.allContentList)//进行下一步操作
}else{
vardata={
cmd:1,
audioType:2,
type:2,
signType:'BASE64',
session:session,
body:string_base64
}
console.log('录音上传的data:',data)
}
}
})
},//手指松开录音
voice_ing_end:function(){
varthat=this;
that.setData({
voice_icon_click:false,
animationData:{}
})
this.animation="";
varx=newDate().getTime()-this.data.voice_ing_start_date
if(x<1000){
console.log('录音停止，说话小于1秒！')
wx.showModal({
title:'提示',
content:'说话要大于1秒！',
})
recorder.stop();
}else{//录音停止，开始上传
recorder.stop();
}
},//点击语音图片
voice_icon_click:function(){
this.setData({
voice_icon_click:!this.data.voice_icon_click
})
},

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现聊天室

热门推荐

随机推荐