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

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

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

简单的小程序聊天对话窗口界面相关推荐

[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
小程序聊天对话，每次都显示最新消息（让页面自动滚动到底部）
//页面自动滚动到底部pageScrollToBottom:function(){wx.createSelectorQuery().select('#scrollpage').boundingClie ...
云开发微信小程序聊天群
功能支持创建群,邀请群成员,群成员列表展示,图片发送,设置群公告,踢人,全体禁言,个人禁言,发送语音信息等相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音 ...
简单Java小程序----有界面ATM机
继<简单Java小程序---无界面ATM机>以后,尝试对有界面ATM机改写,对面向对象的了解又深了一层! 桌面的创建过程由于使用的NetBean软件没有提供专用的控件拖拽使用 ...
java窗口小程序atm_简单的小程序实现ATM机操作
简单的小程序实现ATM机操作代码如下: package Day06; import java.util.Scanner; public class TestAccount { public stat ...
NLP微信小程序聊天机器人
今天把两年前大二时候的小程序又拿来玩了一下,决定开源这个小项目一个NLP微信小程序聊天机器人,前端就一个页面,后端是php的,可以接图灵等等各种api,也可以自己写个python的接口做NLP算法测 ...
小程序生命周期_来，简单说说小程序的生命周期?
简单说说小程序的生命周期? 在小程序中生命周期分为三大类应用生命周期页面生命周期组件生命周期应用生命周期 onLaunch(){ console.log('onLaunch监听小程序初始化') ...
python做好的程序如何变成小程序-使用python编写简单的小程序编译成exe跑在win10上...
每天的工作其实很无聊,早知道应该去IT公司闯荡的.最近的工作内容是每逢一个整点,从早7点到晚11点,去查一次客流数据,整理到表格中,上交给素未蒙面的上线,由他呈交领导查阅. 人的精力毕竟是有限的,所以 ...
如何开发一个微信小程序聊天软件
使用微信小程序框架建立一个聊天的应用. 选择一个开发语言编写程序,如HTML.CSS.JavaScript等. 创建聊天页面,用来显示发送的消息. 使用Websocket服务器编写服务端的程序,实现客 ...

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

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

简单的小程序聊天对话窗口界面相关推荐

最新文章

热门文章