위 챗 애플 릿 간단 채 팅 방 실현
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;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.