微信小程序即时聊天对话窗口静态源码

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

前端：

        
          
              
              
                  文本消息 记住是三种类型哦
              
           
        
        
            星期一 12:54
        
        
          
              
              
                  昵称
                  
                    
                                
              
          
        

        
          
              
              
                  昵称
                  
                    文本消息 记住是三种类型哦
                                
              
          
        

        
          
              
              
                  昵称
                  
                     
                        

                       15'
                     
                                
              
          
        

        
          
              
                
                  
                      
                         15'
                        
                      
                      
                  
               
           
        







    
      
      按住说话
      
      发送
      
    
    
        
          
          图片
        
    

后端：

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;
}

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