微信小程序聊天功能的示例代码

2023-08-03 04:35:04 73

效果

初始化滚动条高度

varkeyHeight=0;

数据格式

constCHAT_DATA=[
{
type:0,//0客服1用户
content:'欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎欢迎',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'text'
},{
type:0,//0客服1用户
content:'1111111',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'text'
},{
type:1,//0客服1用户
content:'222222',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'text'
},{
type:0,//0客服1用户
content:'333333',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'text'
},{
type:1,//0客服1用户
content:'4444444',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'text',
},{
type:0,//0客服1用户
content:'http://tmp/wxc79c66d8b0ed19a8.o6zAJs6QE8L8FKq645ts4e3LoKzI.pGakaVHKmbQ3160aa57e2bf33cb576fbabf691cd890b.durationTime=3706.aac',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'voice',
duration:'3706',
},{
type:1,//0客服1用户
content:'http://tmp/wxc79c66d8b0ed19a8.o6zAJs6QE8L8FKq645ts4e3LoKzI.pGakaVHKmbQ3160aa57e2bf33cb576fbabf691cd890b.durationTime=3706.aac',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'voice',
duration:'3706'
},
{
type:1,//0客服1用户
content:'https://img.yzcdn.cn/vant/cat.jpeg',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'img'
},{
type:1,//0客服1用户
content:'https://img.yzcdn.cn/vant/cat.jpeg',
headImg:'../../assets/common/images/headHortrait.jpeg',//头像
creatTime:'2019-01-01',//创建时间
contentType:'img'
}
];

wxml对话框








{{item.content}}
{{item.duration}}s






{{item.duration}}"
{{item.content}}

wxml底部输入框






按住请说话












{{toastTitle}}

css

#page{
height:90%;
overflow-y:auto;

}
.content{
background:white;

}

.inputRoom{
width:100vw;
/*height:16vw;*/
border-top:1pxsolid#cdcdcd;
position:fixed;
bottom:0;
display:flex;
align-items:center;
z-index:20;
background:white;
flex-direction:column;

}
.bottomRow{
width:100%;
height:16vw;
display:flex;
align-items:center;
flex-direction:row
}
.bottomRow.van-row{
width:100%;

}
.emoji{
height:30vw;
}
input{
width:90%;
height:9.33vw;
background-color:#EEF4FA;
border-radius:6rpx;
font-size:28rpx;
color:#444;
padding:03%;
margin-left:2%;
}

.leftMsg{
font-size:26rpx;
color:#333333;
line-height:6vw;
padding:2vw2.5vw;
background-color:#EEF4FA;
border-radius:10rpx;
z-index:10;
}

.rightMsg{
font-size:26rpx;
color:white;
line-height:6vw;
padding:2vw2.5vw;
background-color:#496DFF;
border-radius:10rpx;
z-index:10;
}



.chatFrame{
background:white;
height:100%
}
.icon{
line-height:8vw;

}
.head{
display:flex;
align-items:center
}
.headImg{
border-radius:50%;width:60rpx;height:60rpx;
}
.holdTape{
width:90%;
height:9.33vw;
background-color:#EEF4FA;
border-radius:6rpx;
padding:03%;
margin-left:2%;
display:flex;
align-items:center;
justify-content:center;

}

.recordDailog{
-webkit-transition-duration:300ms;
transition-duration:300ms;
z-index:1000;
position:fixed;
top:50%;
left:50%;
width:-webkit-fit-content;
width:fit-content;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
max-width:var(--toast-max-width,70%);

}

.show{
width:var(--toast-default-width,90px);
min-height:var(--toast-default-min-height,90px);
padding:var(--toast-default-padding,16px);
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
box-sizing:initial;
color:var(--toast-text-color,#fff);
font-size:var(--toast-font-size,14px);
line-height:var(--toast-line-height,20px);
white-space:pre-wrap;
word-wrap:break-word;
background-color:var(--toast-background-color,rgba(50,50,51,.88));
border-radius:var(--toast-border-radius,4px);

}
.showimage{
width:24px;
height:24px
}
image{
/*max-width:88vw;
max-height:400rpx;*/
width:100%
}
.img{
background:none;
width:90%
}
.contentRight{
display:flex;justify-content:flex-end;padding:2vw2vw2vw11vw;width:86%;
}
.contentLeft{
display:flex;padding:2vw11vw2vw2vw;width:86%;
}

//pages/contact/contact.js
const{
pageFunc
}=require('../../utils/util.js');
constapp=getApp();
varwindowWidth=wx.getSystemInfoSync().windowWidth;
varwindowHeight=wx.getSystemInfoSync().windowHeight;
varkeyHeight=0;
const{CHAT_DATA}=require("../../data/customerService.js");
importToastfrom'../../components/vant/toast/toast';
constrecorderManager=wx.getRecorderManager();
constinnerAudioContext=wx.createInnerAudioContext();
constdb=wx.cloud.database();
/**
*初始化数据
*/
/**
*计算msg总高度
*/
functioncalScrollHeight(that,keyHeight){
varquery=wx.createSelectorQuery();
query.select('.scrollMsg').boundingClientRect(function(rect){
}).exec();
}
Page({

/**
*页面的初始数据
*/
data:{
scrollHeight:'100vh',
inputVal:"",
inputBottom:0,
chatData:[],
show:true,
showDailog:false,
bottomHeight:"18vw",
sendData:{},
pagination:{
pageSize:5,
currentPage:1,
total:0,
},
showEmoji:false,
toastTitle:"录音中...."
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
//this.setData({
//cusHeadIcon:app.globalData.userInfo.avatarUrl,
//});
const{
pagination
}=this.data
this.getData({param:CHAT_DATA,pagination});
wx.pageScrollTo({
scrollTop:1000
})
},
getData(params){
const{chatData}=this.data;
const{
param,
pagination:{
pageSize=10,
currentPage=1
},
}=params;
this.setData({
pagination:{pageSize,currentPage}
});
const{
data,
pagination
}=pageFunc(param,currentPage,pageSize);
data.forEach((item)=>{
if(item.duration){
item.duration=Math.ceil(item.duration/1000)
}
});
this.setData({
'chatData':data.concat(chatData)
});
},
startRecord(){//开始录音
const{show}=this.data
if(show){
this.setData({
show:false,
})
}else{
this.setData({
show:true,
})
}


},
startTalk(e){//开始说话
this.setData({
showDailog:true,
})
constoptions={
duration:60000,
sampleRate:44100,
numberOfChannels:1,
encodeBitRate:192000,
format:'aac',
frameSize:50
}
recorderManager.start(options)
recorderManager.onStart((res)=>{
})
},
stopRecord(){//停止说话
constthat=this
this.setData({
showDailog:false,
})
recorderManager.stop();
recorderManager.onStop((res)=>{
const{sendData,chatData}=that.data;
let{tempFilePath,duration,fileSize}=res
sendData.tempFilePathData=res
duration=Math.ceil(duration/1000)
constdata={content:tempFilePath,duration,fileSize,contentType:'voice',type:1};
chatData.push(data);
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec();
that.setData({
'tempFilePath':tempFilePath,
sendData,
chatData,
scrollHeight:(windowHeight-0)+'px',
toView:'msg-'+(chatData.length-1),
inputBottom:'0px'
})
})
},

playRecord(e){//播放语音
const{currentTarget:{dataset:{duration}}}=e;
const{tempFilePath}=this.data
innerAudioContext.autoplay=true;
innerAudioContext.src=tempFilePath,
innerAudioContext.onPlay(()=>{
this.setData({
toastTitle:"播放中....",
showDailog:true,
})
})
innerAudioContext.onEnded((res)=>{
this.setData({
toastTitle:"录音中....",
showDailog:false,
})
})
innerAudioContext.onError((res)=>{
});
innerAudioContext.play()
},

uploadeImg(e){
const{file:{path,size:fileSize}}=e.detail;
const{chatData}=this.data;
constdata={content:path,fileSize,contentType:'img',type:1};
chatData.push(data);
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec()
this.setData({
chatData,
scrollHeight:(windowHeight-0)+'px',
toView:'msg-'+(chatData.length-1),
inputBottom:'0px'
})
},
getEmoji(){//获取表情包
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec()
this.setData({
showEmoji:true,
bottomHeight:"48vw"
})
},

clickEmoji:function(e){//选择表情包
const{
detail:{
value
},
currentTarget:{
dataset:{
key
}
}
}=e;
this.setData({
[key]:value
})
},

onPreview(e){
const{
currentTarget:{
dataset:{
src
}
}
}=e;
consturls=[src]
wx.previewImage({
current:src,
urls
})
},
/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){
let{pagination:{currentPage}}=this.data
this.getData({
param:CHAT_DATA,
pagination:{
pageSize:5,
currentPage:currentPage+1,
}
});
},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*获取聚焦
*/
inputValue(e){
const{detail:{value}}=e
this.setData({
inputVal:value
})
},
focus:function(e){
const{chatData}=this.data
keyHeight=e.detail.height;
wx.pageScrollTo({
scrollTop:windowHeight-keyHeight
})
this.setData({
toView:'msg-'+(chatData.length-1),
inputBottom:keyHeight+'px',
scrollHeight:(windowHeight-keyHeight)+'px',
showEmoji:false,
bottomHeight:"18vw"
})
//计算msg高度
//calScrollHeight(this,keyHeight);

},

//失去聚焦(软键盘消失)
blur:function(e){
const{chatData}=this.data
this.setData({
scrollHeight:'100vh',
inputBottom:0
})
this.setData({
toView:'msg-'+(chatData.length-1)
})

},

/**
*发送点击监听
*/
sendClick:function(e){
const{chatData,scrollHeight}=this.data;
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec()

chatData.push({
type:1,
contentType:'text',
content:e.detail.value,
headImg:'../../assets/common/images/headHortrait.jpeg',
})
this.setData({
chatData,
inputVal:''
});


},

/**
*退回上一页
*/
toBackClick:function(){
wx.navigateBack({})
}

})//pages/contact/contact.js
const{
pageFunc
}=require('../../utils/util.js');
constapp=getApp();
varwindowWidth=wx.getSystemInfoSync().windowWidth;
varwindowHeight=wx.getSystemInfoSync().windowHeight;
varkeyHeight=0;
const{CHAT_DATA}=require("../../data/customerService.js");
importToastfrom'../../components/vant/toast/toast';
constrecorderManager=wx.getRecorderManager();
constinnerAudioContext=wx.createInnerAudioContext();
constdb=wx.cloud.database();
/**
*初始化数据
*/
/**
*计算msg总高度
*/
functioncalScrollHeight(that,keyHeight){
varquery=wx.createSelectorQuery();
query.select('.scrollMsg').boundingClientRect(function(rect){
}).exec();
}
Page({

/**
*页面的初始数据
*/
data:{
scrollHeight:'100vh',
inputVal:"",
inputBottom:0,
chatData:[],
show:true,
showDailog:false,
bottomHeight:"18vw",
sendData:{},
pagination:{
pageSize:5,
currentPage:1,
total:0,
},
showEmoji:false,
toastTitle:"录音中...."
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
//this.setData({
//cusHeadIcon:app.globalData.userInfo.avatarUrl,
//});
const{
pagination
}=this.data
this.getData({param:CHAT_DATA,pagination});
wx.pageScrollTo({
scrollTop:1000
})
},
getData(params){
const{chatData}=this.data;
const{
param,
pagination:{
pageSize=10,
currentPage=1
},
}=params;
this.setData({
pagination:{pageSize,currentPage}
});
const{
data,
pagination
}=pageFunc(param,currentPage,pageSize);
data.forEach((item)=>{
if(item.duration){
item.duration=Math.ceil(item.duration/1000)
}
});
this.setData({
'chatData':data.concat(chatData)
});
},
startRecord(){//开始录音
const{show}=this.data
if(show){
this.setData({
show:false,
})
}else{
this.setData({
show:true,
})
}


},
startTalk(e){//开始说话
this.setData({
showDailog:true,
})
constoptions={
duration:60000,
sampleRate:44100,
numberOfChannels:1,
encodeBitRate:192000,
format:'aac',
frameSize:50
}
recorderManager.start(options)
recorderManager.onStart((res)=>{
})
},
stopRecord(){//停止说话
constthat=this
this.setData({
showDailog:false,
})
recorderManager.stop();
recorderManager.onStop((res)=>{
const{sendData,chatData}=that.data;
let{tempFilePath,duration,fileSize}=res
sendData.tempFilePathData=res
duration=Math.ceil(duration/1000)
constdata={content:tempFilePath,duration,fileSize,contentType:'voice',type:1};
chatData.push(data);
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec();
that.setData({
'tempFilePath':tempFilePath,
sendData,
chatData,
scrollHeight:(windowHeight-0)+'px',
toView:'msg-'+(chatData.length-1),
inputBottom:'0px'
})
})
},

playRecord(e){//播放语音
const{currentTarget:{dataset:{duration}}}=e;
const{tempFilePath}=this.data
innerAudioContext.autoplay=true;
innerAudioContext.src=tempFilePath,
innerAudioContext.onPlay(()=>{
this.setData({
toastTitle:"播放中....",
showDailog:true,
})
})
innerAudioContext.onEnded((res)=>{
this.setData({
toastTitle:"录音中....",
showDailog:false,
})
})
innerAudioContext.onError((res)=>{
});
innerAudioContext.play()
},

uploadeImg(e){
const{file:{path,size:fileSize}}=e.detail;
const{chatData}=this.data;
constdata={content:path,fileSize,contentType:'img',type:1};
chatData.push(data);
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec()
this.setData({
chatData,
scrollHeight:(windowHeight-0)+'px',
toView:'msg-'+(chatData.length-1),
inputBottom:'0px'
})
},
getEmoji(){//获取表情包
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec()
this.setData({
showEmoji:true,
bottomHeight:"48vw"
})
},

clickEmoji:function(e){//选择表情包
const{
detail:{
value
},
currentTarget:{
dataset:{
key
}
}
}=e;
this.setData({
[key]:value
})
},

onPreview(e){
const{
currentTarget:{
dataset:{
src
}
}
}=e;
consturls=[src]
wx.previewImage({
current:src,
urls
})
},
/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){
let{pagination:{currentPage}}=this.data
this.getData({
param:CHAT_DATA,
pagination:{
pageSize:5,
currentPage:currentPage+1,
}
});
},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*获取聚焦
*/
inputValue(e){
const{detail:{value}}=e
this.setData({
inputVal:value
})
},
focus:function(e){
const{chatData}=this.data
keyHeight=e.detail.height;
wx.pageScrollTo({
scrollTop:windowHeight-keyHeight
})
this.setData({
toView:'msg-'+(chatData.length-1),
inputBottom:keyHeight+'px',
scrollHeight:(windowHeight-keyHeight)+'px',
showEmoji:false,
bottomHeight:"18vw"
})
//计算msg高度
//calScrollHeight(this,keyHeight);

},

//失去聚焦(软键盘消失)
blur:function(e){
const{chatData}=this.data
this.setData({
scrollHeight:'100vh',
inputBottom:0
})
this.setData({
toView:'msg-'+(chatData.length-1)
})

},

/**
*发送点击监听
*/
sendClick:function(e){
const{chatData,scrollHeight}=this.data;
wx.createSelectorQuery().select('.content').boundingClientRect(function(rect){
//使页面滚动到底部
wx.pageScrollTo({
scrollTop:rect.bottom+5000
})
}).exec()

chatData.push({
type:1,
contentType:'text',
content:e.detail.value,
headImg:'../../assets/common/images/headHortrait.jpeg',
})
this.setData({
chatData,
inputVal:''
});


},

/**
*退回上一页
*/
toBackClick:function(){
wx.navigateBack({})
}

})

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

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

微信小程序聊天功能的示例代码

热门推荐

随机推荐