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

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

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