微信小程序实现简单聊天室
本文实例为大家分享了微信小程序实现简单聊天室的具体代码，供大家参考，具体内容如下
cha.js
// pages/chat/chat.js
// 获取小程序实例
let app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
nickname:'',
avatar:'',
chatlists:[
{
nickname:'小林',
avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg',
content:`你好呀！`
}
],
invalue:''
},
sendMsg:function(){
let _this = this;
let obj = {
nickname:_this.data.nickname,
avatar:_this.data.avatar,
content:_this.data.invalue
};
let arr = _this.data.chatlists;
arr.push(obj)
_this.setData({
chatlists:arr,
invalue:''
});
// 把聊天内容发送到服务器，处理完成后返回，再把返回的数据放到chatlist里面
},
getInput:function(e){
console.log(e.detail.value);
this.setData({invalue:e.detail.value});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(app.globalData.userInfo.nickName);
this.setData({
nickname:app.globalData.userInfo.nickName,
avatar:app.globalData.userInfo.avatarUrl
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
chat.wxml
<block wx:for="{{chatlists}}" wx:for-index="ind" wx:for-item="chat" wx:key="ind">
<view class="chat self" wx:if="{{nickname == chat.nickname}}">
<view class="right">
<view class="content">
{{chat.content}}
</view>
</view>
<view class="left">
<image class="avatar" src="{{chat.avatar}}"></image>
</view>
</view>
<view class="chat" wx:else>
<view class="left">
<image class="avatar" src="{{chat.avatar}}"></image>
</view>
<view class="right">
<view class="nickname">{{chat.nickname}}</view>
<view class="content">
{{chat.content}}
</view>
</view>
</view>
</block>
<view class="form">
<view class="weui-cell weui-cell_input">
<input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="请输入聊天内容" />
</view>
<button type="primary" bindtap="sendMsg">发送</button>
</view>
chat.css
/* pages/chat/chat.wxss */
.avatar{
width: 130rpx;
height: 130rpx;
border-radius: 50%;
}
.chat{
display: flex;
align-items: center;
margin-top: 15px;
}
.self{
justify-content: flex-end;
margin-top: 15px;
}
.left{
padding: 20rpx;
align-self: flex-start;
}
.self .left{
padding-top: 0;
}
.right{
margin-left: 10px;
}
.right .content{
background-color: #eee;
color: #123;
font-size: 16px;
/* border:1px solid #ddd; */
padding: 10px;
line-height: 26px;
margin-right: 10px;
border-radius: 3px;
position: relative;
min-height: 20px;
}
.right .content::before{
content: ' ';
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-right-color:#eee;
position: absolute;
top: 10px;
left: -23px;
}
.self .right .content::before{
border: 0;
}
.self .right .content::after{
content: ' ';
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-left-color:#1ad409;
position: absolute;
top: 10px;
right: -23px;
}
.self .right .content{
background-color: #1ad409;
}
.form{
position: fixed;
bottom: 0;
background-color: #eee;
width: 750rpx;
display: flex;
height: 39px;
align-items: center;
}
.form input{
width: 600rpx;
background-color: #fff;
height: 36px;
line-height: 36px;
padding: 0 5px;
}
button{
width:65rpx;
height:36px;
}
