一个简单的微信小程序聊天对话窗口界面,包括发送文本功能
直接上代码,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