devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Cpp五条 | 2024-03-14 08:21:39

赞

踩

静态页面小程序源码

实例描述：静态的源码，需要自己二次开发
适用范围：所有版本微信小程序库
日期 ：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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94

后端：

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(){

  }

});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85

样式：

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/232761
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号