微信小程序即时聊天对话窗口静态源码[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

实例描述：静态的源码，需要自己二次开发
适用范围：所有版本微信小程序库
日期 ：2019/9/2

前端：

<scroll-view
style="height:{
{height}}vh;width: 100vw;display: flex;  position: relative;flex-direction: column;top:{
{top?top:0}}px;"
scroll-y="true"
scroll-top="{
{scrollTopVal}}"
bindtap="resetInputStatus">
<view class="chat-item-row">
<view class="chat-item-me">
<image class="chat-avatar" src="/static/img/avatar.png"></image>
<view class="message-body-me">
<view class="message-text">文本消息 记住是三种类型哦</view>
</view>
</view> 
</view>
<view class="chat-item-row">
<view class="chat-item-time">星期一 12:54</view>
</view>
<view class="chat-item-row">
<view class="chat-item-he">
<image class="chat-avatar" src="/static/img/avatar.png"></image>
<view class="im-msg-box">
<view class="user-name">昵称</view>
<view class="message-body">
<image class="message-image" src="{
{style}}/upload/image/0100.png"></image>
</view>              
</view>
</view>
</view>
<view class="chat-item-row">
<view class="chat-item-he">
<image class="chat-avatar" src="/static/img/avatar.png"></image>
<view class="im-msg-box">
<view class="user-name">昵称</view>
<view class="message-body">
<view class="message-text">文本消息 记住是三种类型哦</view>
</view>              
</view>
</view>
</view>
<view class="chat-item-row">
<view class="chat-item-he">
<image class="chat-avatar" src="/static/img/avatar.png"></image>
<view class="im-msg-box">
<view class="user-name">昵称</view>
<view class="message-body">
<view class="message-voice">
<image class="voice-play-size"
src="{
{isPlaying?'data:image/gif;base64,R0lGODlhFgAgAIABAJmZmQAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZGRjUyRUJDQTQwNjExRTdCOENGRjgwODNFQUZERjc2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZGRjUyRUJEQTQwNjExRTdCOENGRjgwODNFQUZERjc2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkZGNTJFQkFBNDA2MTFFN0I4Q0ZGODA4M0VBRkRGNzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkZGNTJFQkJBNDA2MTFFN0I4Q0ZGODA4M0VBRkRGNzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFIQABACwAAAAAFgAgAAACJYyPqcvtD6OctNqLs54A3O5RYCeOpGSe6PiplbvF8kzX9o3nQQEAIfkEBSEAAQAsCAAGAAYAFAAAAhcMEHmXxrpahEg+V7HNU9P9hUs1jVZTAAAh+QQJIQABACwIAAAADgAgAAACN4wfgHvgvNyDRipaJc4X251MnraRY0d9pZiykNmir8vAsxzZOY3o+8prBDm43jA0VMWKQmaPUQAAIfkEBSEAAQAsAAAAABYAIAAAAhmMj6nL7Q+jnLTai7PevPsPhuJIluaJpkEBACH5BAUhAAEALAgABgAGABQAAAIXDBB5l8a6WoRIPlexzVPT/YVLNY1WUwAAIfkEBSEAAQAsDgAAAAgAIAAAAigMggmbuKxeM7LVCPF8x2b3UeEFdppnltv4cWhKii86n6XpYnBoTEEBADs=':'/static/chat/voice_other.png'}}" />
<text> 15'</text>
</view>
</view>              
</view>
</view>
</view>
<view class="chat-item-row">
<view class="chat-item-me">
<image class="chat-avatar" src="/static/img/avatar.png"></image>
<view class="im-msg-box">
<view class="message-body-me">
<view class="message-voice">
<text> 15'</text>
<image class="voice-play-size"
src="{
{isPlaying?'data:image/gif;base64,R0lGODlhFgAgAIABAHenywAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVCODkzNTZBQTQxMTExRTdBMUU5RjQwNDFCQUNCRDgwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVCODkzNTZCQTQxMTExRTdBMUU5RjQwNDFCQUNCRDgwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUI4OTM1NjhBNDExMTFFN0ExRTlGNDA0MUJBQ0JEODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUI4OTM1NjlBNDExMTFFN0ExRTlGNDA0MUJBQ0JEODAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFIQABACwAAAAAFgAgAAACJYyPqcvtD6OctNqLs94IAOx9VuhRZDidZUpW6Chy8kzX9o3nUgEAIfkEBSEAAQAsCAAGAAYAFAAAAhaMARaI18tckrTCeVW0O+vnXVjHjEkBACH5BAklAAEALAAAAAAOACAAAAI1jA+nC73c0kNxmihttQHz7nCeGJLZNGqleqKr2z6b+YEx9OK3MrN16vsAYb8ebHcxynKySQEAIfkEBR4AAQAsAAAAABYAIAAAAhmMj6nL7Q+jnLTai7PevPsPhuJIluaJpkEBACH5BAUhAAEALAgABgAGABQAAAIWjAEWiNfLXJK0wnlVtDvr511Yx4xJAQAh+QQFJQABACwAAAAACAAgAAACKIwPh5DLyp6JbUp7Q4TbKZ1RXIV9nTeaGUiypJjGTnti9ArP491qQQEAOw==':'/static/chat/voice_mine.png'}}" />
</view>
</view>
</view> 
</view> 
</view>
</scroll-view>
<view class="footer-input-box">
<view class="footer-input-body">
<image src="/static/chat/voice.png" class="mp3-btn" bindtap="showLy"></image>
<button class="luyingBtn" wx:if="{
{luYing}}">按住说话</button>
<input class="chat-input-style" bindinput="setMessage" wx:else></input>
<view class="chat-input-send-button-style" wx:if="{
{textMessage}}" bindtap="sendJsonText">发送</view>
<image src="/static/chat/extra.png" class="more-btn" wx:else bindtap="showBox"></image>
</view>
<view class="extra-super" wx:if="{
{isShow}}">
<view class="flex-column" bindtap="sendImg">
<image class="extra-image-size" src="/static/chat/choose_picture.png" ></image>
<text class="extra-text-size">图片</text>
</view>
</view>
</view>

后端：

Page({
/**
* 页面的初始数据
*/
data: {
...common.data,
textMessage: '',
chatItems: [],
type:'',
height:100,
isShow:false,
luYing:false
},
...common.method,
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getPage(options);
},
setMessage(e){
let {value} = e.detail;
this.setData({
textMessage:value
})
},
getPage(options){
let {type,top} = options;
this.setData({
type: type,
top:top
})
//获取对方和我方信息
},
sendJsonText(data){
//发送消息并执行更新页面数据
},
//显示和隐藏上传图片的功能
showBox(e){
let {isShow} = this.data;
if(isShow){
isShow=false;
}else{
isShow = true;
}
this.setData({
isShow:isShow
});
},
showLy(e){
let { luYing } = this.data;
if (luYing) {
luYing = false;
} else {
luYing = true;
}
this.setData({
luYing: luYing
});
},
//开始录音
startRecording(){
//录音及检测
},
//结束录音并上传
endRecording() {
//上传完毕后返回路径并发送消息
},
//上传并发送图片
sendImg(){
}
});

样式：

.chat-item-row{
padding: 15rpx;
display: flex;
}
.chat-item-me{
width: 100%;
display: flex;
flex-direction: row-reverse;
}
.chat-item-he{
float: left;
display: flex;
flex-direction: row;
}
.chat-avatar{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
overflow: hidden;
}
.message-body-me{
background: #8FCBF7;
padding: 15rpx;
text-align: left;
border-radius: 10rpx;
margin: 0rpx 15rpx;
color: #FFFFFF;
font-size: 25rpx;
margin-top: 8rpx;
}
.message-body{
padding: 15rpx;
text-align: left;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0rpx 15rpx;
font-size: 25rpx;
}
.chat-item-time{
width: 100vw;
color: #999999;
text-align: center;
font-size: 23rpx;
}
.im-msg-box{
display: flex;
flex-direction: column;
}
.im-msg-box .user-name{
font-size: 23rpx;
color: #999999;
margin-left: 15rpx;
padding: 10rpx 20rpx;
}
.voice-play-size{
width: 22rpx;
height: 32rpx;
margin: 10rpx;
}
.message-voice{
line-height: 50rpx;
height: 50rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.message-voice text{
line-height: 50rpx;
height: 50rpx;
}
.footer-input-box{
width: 100%;
display: flex;
flex-direction: column;
position: fixed;
left: 0;
bottom: 0;
}
.footer-input-body{
display: flex;
flex-direction: row;
background-color: #E6EAEB;
width: 100%;
align-items: center;
height: 100rpx;
}
.mp3-btn{
width: 50rpx;
height: 50rpx;
padding: 25rpx 15rpx;
display: flex;
flex-shrink: 0;
}
.chat-input-style{
border-radius:10rpx;
border:1rpx solid transparent;
margin-top:14rpx;
margin-bottom: 13rpx;
padding:10rpx;
min-height: 51rpx;
background-color: #FFFFFF;
color: #000000;
width: 100%;
}
.message-image{
width: 60vw;
height: 24vh;
}
.chat-input-send-button-style{
width: 100rpx;
padding: 15rpx 0;
text-align: center;
margin: 0 10rpx;
border-radius: 10rpx;
background: #5087E5;
color: #FFFFFF;
font-size: 25rpx;
}
.more-btn{
width: 50rpx;
height: 50rpx;
padding: 25rpx 15rpx;
display: flex;
flex-shrink: 0;
}
.extra-super{
display: flex;
padding-top: 25rpx;
height: 234rpx;
width: 100%;
background-color: white
}
.flex-column{
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
}
.extra-text-size{
color: #666666;
font-size: 24rpx;
margin-top: 10rpx;
}
.extra-image-size{
width: 114rpx;
height: 114rpx;
}
.luyingBtn{
font-size: 32rpx;
width: 100%;
line-height: 74rpx;
margin-top: 15rpx;
margin-bottom: 15rpx;
}

注意：附件自行百度了，仅供参考与学习，商用需要二次开发。