微信小程序ui聊天窗口
微信小程序实现简单聊天室本文实例为大家分享了微信小程序实现简单聊天室的具体代码，供大家参考，具体内容如下
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。