一个简单的微信小程序聊天对话窗口界面,包括发送文本功能

直接上代码,js代码:

// 简单版
Page({data: {content: '',// 当前登录者信息login: {id: '2023',user: '大猪蹄子',avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752'},// 聊天信息chatList: [{msgId: '2023',nickname: '大猪蹄子',avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',message: '一个简单的聊天对话窗口界面',type: 'text',date: '05-02 14:24' // 每隔5分钟记录一次时间},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '更多发送表情、视频以及图片功能,由于不好打包文件夹,请前往下方底部链接,下载完整版压缩包.',type: 'text'},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '该消息为撤回消息',type: 'custom'},{msgId: '2023',nickname: '大猪蹄子',avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',message: '嘞 对头,解压文件夹后,可直接使用完整版',type: 'text'},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '若出现iOS不兼容现象,请自行调整哦',type: 'text',date: '05-04 16:05'},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '没有用苹果手机测试啦',type: 'text'},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '该消息为撤回消息',type: 'custom'},{msgId: '2023',nickname: '大猪蹄子',avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',message: '请前往下方链接,使用完整版',type: 'text'},{msgId: '2023',nickname: '大猪蹄子',avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',message: '谢谢各位亲的点赞关注和收藏',type: 'text'},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '哈哈哈',type: 'text',date: '05-06 11:21'},{msgId: '2022',nickname: '泡椒风爪',avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',message: '已滑动至最底部',type: 'text',date: '05-07 19:08'},],},onLoad() {this.scrollToBottom();},// 输入监听inputClick(e) {this.setData({content: e.detail.value})},// 发送监听sendClick() {var that = this;var list = this.data.chatList;// 获取当前时间var date = new Date();var month = date.getMonth() + 1;var day = date.getDate();var hour = date.getHours();var minu = date.getMinutes();var now1 = month < 10 ? '0' + month : month;var now2 = day < 10 ? '0' + day : day;// 组装数据var msg = {msgId: this.data.login.id,nickname: this.data.login.user,avatar: this.data.login.avatar,message: this.data.content,type: 'text',date: now1 + '-' + now2 + ' ' + hour + ':' + minu}this.setData({chatList: list.concat(msg)}, () => {that.scrollToBottom();that.setData({content: ''})})},// 滑动到最底部scrollToBottom() {setTimeout(() => {wx.pageScrollTo({scrollTop: 200000,duration: 3});}, 600)},
})

wxml代码:

<!-- 简单版 -->
<view class="scroll-list"><block wx:for="{{chatList}}" wx:for-index="index" wx:for-item="item" wx:key="item"><view wx:if="{{item.date}}" class="show-date">{{item.date}}</view><view wx:if="{{item.type=='custom'}}" class="row tips-text"><text>{{login.id==item.msgId?'你':item.nickname}}撤回了一条消息</text></view><view class="{{login.id==item.msgId?'row row-self':'row'}}" wx:else><view class="{{login.id==item.msgId?'head-self':'head-friend'}}"><image class="avatar" src="{{item.avatar}}"></image></view><view><view wx:if="{{login.id!=item.msgId}}" class="nick">{{item.nickname}}</view><view class="{{login.id==item.msgId?'message msg-self':'message msg-friend'}}"><text>{{item.message}}</text></view></view></view></block>
</view>
<!-- 发送信息 -->
<view class="footer"><view class="row"><view class="input-box"><textarea class="text-area" placeholder-class="placeholder" show-confirm-bar="{{false}}" cursor-spacing="30" maxlength="500"disable-default-padding="{{true}}"confirm-hold="{{true}}" hold-keyboard="{{true}}" auto-height="false" placeholder="输入信息" bindinput="inputClick" value="{{content}}"></textarea></view><view class="send-btn" wx:if="{{content!=''}}"><text class="send-text" bindtap="sendClick">发 送</text></view></view>
</view>

wxss代码:

page {background-color: #f1f1f1;
}.scroll-list {padding-bottom: 120rpx;
}/* 显示时间 */
.show-date {text-align: center;font-size: 24rpx;padding: 15rpx 0;color: gray;
}/* 每行对话样式 */
.row {display: flex;flex-direction: row;padding: 20rpx;
}/* 提示信息 */
.tips-text {text-align: center;justify-content: center;font-size: 28rpx;color: gray;
}.row-self {flex-direction: row-reverse;
}/* 头像 */
.head-self {margin-left: 20rpx;
}.head-friend {margin-right: 20rpx;
}.avatar {width: 100rpx;height: 100rpx;border-radius: 20rpx;overflow: hidden;
}.nick {color: gray;font-size: 24rpx;margin-bottom: 15rpx;
}/* 消息内容 */
.message {background-color: white;font-size: 30rpx;padding: 20rpx;display: flex;align-items: center;line-height: 45rpx;
}.msg-self {border-top-left-radius: 30rpx;border-bottom-right-radius: 30rpx;color: #434343;background-image: linear-gradient(to right, #33ccff, #B0E2FF);
}.msg-friend {border-top-right-radius: 30rpx;border-bottom-left-radius: 30rpx;color: #ffffff;background-image: linear-gradient(to right, #ff9933, #ff6633);
}/* 以下为输入框样式 */
.footer {position: fixed;bottom: 0;left: 0;right: 0;z-index: 9;background-color: white;border-top: 1rpx solid #f1f1f1;
}.input-box {flex: 5;border: 1rpx solid #f1f1f1;border-radius: 10rpx;
}.send-btn {flex: 1;text-align: center;margin-left: 10rpx;color: white;margin-top: 10rpx;
}.send-text {background-color: #FF6347;font-size: 30rpx;border-radius: 10rpx;padding: 12rpx 20rpx;
}.text-area {max-height: 180rpx;width: 98%;padding: 15rpx 10rpx;font-size: 30rpx;
}.placeholder {font-size: 30rpx;
}/* 隐藏滚动条 */
::-webkit-scrollbar {display: none;width: 0;height: 0;color: transparent;
}

json代码:

{"usingComponents": {},"navigationBarTitleText": "聊天对话窗","navigationBarBackgroundColor": "#FF6347"
}

更多功能的微信小程序聊天界面(包括发送表情、视频、图片),请点击链接:
https://download.csdn.net/download/weixin_45465881/87762409