一个简单的微信小程序聊天对话窗口界面,包括发送文本功能
直接上代码,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
来源地址：https://blog.csdn.net/weixin_45465881/article/details/130549952
