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

最新推荐文章于 2024-04-08 08:52:12 发布
最新推荐文章于 2024-04-08 08:52:12 发布
阅读量6.7k 收藏 61
点赞数 18
分类专栏： 微信小程序 文章标签： 小程序 微信小程序 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45465881/article/details/130549952
版权

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

在这里插入图片描述

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

三脚猫的喵
关注
  • 18
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
WeLive在线客服系统 v4.0.0
05-11
WeLive4是一个企业级的在线客服系统, 程序小巧使用简单, 更美观的用户界面设计, 主要特点： 1. 基于Socket通讯技术, 具有请求与推送双重功能, 极速高效; 2. 系统独立安装使用, 不依赖闻泰网络. 安装后, 任意网站、...
微信小程序聊天界面demo
07-27
此案例基于微信小程序开发，为聊天上下文demo
微信小程序-模仿绘制聊天界面
qq_42622871的博客
07-08 4241
微信聊天界面
微信小程序封装modal对话框组件
最新发布
JackChan
04-08 117
微信小程序封装modal对话框组件
《微信小程序案例8》实现聊天框下部分别人向我发消息
每天八杯水的博客
09-20 850
《微信小程序案例8》实现聊天框下部分别人向我发消息。一、先安装node.js。二、安装一个服务器。三、使用vscode打开这个服务器文件。四、微信小程序发送网络请求。五、后端服务器接收请求并返回数据
微信小程序 - 自定义模态对话框（附源码）
刺心的博客
06-27 2337
效果图： Ps：在电脑上调试input超出输入框范围会出现文字模糊以及位移现象（手机端不影响） index.wxml <view class="container"> <import src="/template/addtell.wxml" /> <template is="addtell" data="{{...addtell}}" /> &lt...
微信小程序模仿微信聊天界面布局demo简单源码学习开发
06-14
仿造微信界面仅供参考学习仿微信聊天界面demo采用css+div技术
微信小程序正式上线 可置于聊天窗口顶部
weixin_30612769的博客
01-09 115
历经一年的等待后，小程序在2017年1月9日凌晨终于揭开神秘面纱，正式上线。 微信小程序推广海报 随着小程序正式上线，用户现在可以通过二维码、搜索等方式体验到开发者们开发的小程序了。 用户只要将微信更新至最新版本，体验过小程序后，便可在发现页面看到小程序TAB，但微信并不会通过这个地方向用户推荐小程序。 值得一提的是，小程序提供了显示在聊天顶部的功能，这意味着用户在使用小程序的过程中可...
微信聊天小程序——（四、聊天页面）
热门推荐
qq_54462755的博客
08-04 1万+
我们拿到了与好友聊天的聊天记录。主要作用的是这个函数。具体效果：不显示错误。在massage页面。
小程序在线聊天页面
qq_39602638的博客
04-24 1232
最后 是不是发现没有代码 我呢再写这些功能的时候看了好多篇文章 基本一个样 说实话我怕 所以要代码的话 加我微信吧 a1007325868 无偿的
微信小程序—基于websocket的聊天框
01-07
一款基于websocket的微信小程序聊天框，可以实现一对一实时聊天
flash聊天室程序下载
11-17
程序使用flash和ASP交互，使用access数据库保存聊天记录。需要的朋友可以下载到自己的网站目录使用； ... 目前已经有以下功能： ...2008-10-30 增加清屏功能，避免长时间聊天，对话窗口消息太多太耗资源
微信小程序聊天对话功能实现代码包含样式
06-22
完整的微信小程序实现 WebSocket 长链接聊天代码，包括聊天室界面的样式。可直接使用，有疑问可加微信13977284413询问。有时间的话我会第一时间回复。
微信小程序自定义对话框
01-17
自定义对话框，支持内容输入，也根据自己需求，对对话框布局进行修改
微信小程序：仿微信聊天界面源码.rar
07-10
微信小程序源码：仿微信聊天界面源码下载，一看就是模仿微信的，聊天界面，不过说成是仿QQ也不为过哦，现在QQ和微信都是这种聊天的界面风格啦。美工水平有限，还没有过多的去美化界面，只是写出了个大概，有兴趣学习的就下载吧，或许对你的微信小程序开发之路有帮助哦。
详解微信小程序实现仿微信聊天界面(各种细节处理)
12-01
本文介绍了微信小程序实现仿微信聊天界面，分享给大家，具体如下： 下面先来看看效果 为实现这样的效果，首先要解决两个问题： 1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题； 2.键盘弹出或收起时，聊天消息没有自动滚到最底部。 首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）： 1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将展示msg的目标scroll-view包裹， 通过js获取到该view的实际高度： var that = this; var query = wx.cr
VC实现炫眩qq界面的模拟(附源码)
03-10
现在已经完成QQ主界面的外观实现与美化了，接下来我们通过VC向导添加一个对话框资源并添加相应的类，命名CtalkDlg类，其功能是聊天对话框的对话窗口,也就是当我们双击用户列表的其中一个用户后弹出的聊天窗口....
WeLive智能在线客服系统 v5.1.2.zip
07-08
WeLive智能在线客服系统是一个企业级的在线客服系统, 程序小巧使用简单, 更美观的用户界面设计 WeLive智能在线客服系统主要特点 1. 基于Socket通讯技术, 具有请求与推送双重功能, 极速高效; 2. 系统独立安装使用,...
使用python写一个聊天对话窗口
05-23
好的，我们可以使用Python的Tkinter库来创建一个简单的聊天对话窗口。下面是一个简单的示例代码： ```python from tkinter import * # 创建窗口 root = Tk() root.title("Chat Window") root.geometry("400x500") # 创建对话框 chat_log = Text(root, bg="white", fg="black") chat_log.config(state=DISABLED) chat_log.pack(fill=BOTH, expand=1) # 创建输入框 input_frame = Frame(root) input_frame.pack(side=BOTTOM, fill=X) input_box = Entry(input_frame) input_box.pack(fill=X, padx=10, pady=10) # 定义发送消息函数 def send_message(event): message = input_box.get() if message.strip() != "": chat_log.config(state=NORMAL) chat_log.insert(END, "You: " + message + "\n") chat_log.config(state=DISABLED) input_box.delete(0, END) # 绑定事件 input_box.bind("<Return>", send_message) input_box.focus() # 运行窗口 root.mainloop() ``` 运行上述代码后，会创建一个简单的聊天对话窗口，可以在输入框中输入消息并按下回车键发送。发送的消息会显示在对话框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三脚猫的喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值