简单的小程序聊天对话窗口界面

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

直接上代码,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