一、数据双向绑定input实现获取用户输入的值：
二、聊天框
聊天数据追加保存到js的data里面，使用数组保存便于wxml使用wx:for渲染数据
方法：对数组使用push追加保存数据
目前只开发我的聊天记录，对方的聊天记录需要使用服务器开发，暂时留到下一文章讲解。
三、代码
wxml代码
<!-- 聊天盒子 -->
<view class="chatBox">
<!-- 循环渲染收到的消息 -->
<block wx:for="{
{msgBox}}">
<!-- 判断是否属于自己的消息 -->
<view class="myBox" wx:if="{
{item.isMine}}">
<view class="myMsg">{
{item.msg}}</view>
<view class="myHd"></view>
</view>
<!-- 判断是否属于别人的消息 -->
<view class="youBox" wx:else>
<view class="youHd"></view>
<view class="youMsg"></view>
</view>
</block>
</view>
<!-- 发送消息盒子 -->
<view class="sendBox">
<input type="text" class="iptBox" model:value="{
{msg}}" bindinput="aa" />
<view class="sendBtn" bindtap="sendMsg">发送</view>
</view>wxss代码
.chatBox {
height: 80vh;
width: 100vw;
background-color: papayawhip;
padding: 5px 5px;
box-sizing: border-box;
}
.myBox {
display: flex;
justify-content: flex-end;
margin-bottom: 5px;
align-items: flex-start;
}
.myMsg {
display: flex;
align-items: center;
max-width: 250px;
/* width: 200px;
height: 100px; */
background-color: skyblue;
border-radius: 10px;
padding: 5px;
}
.myHd {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: pink;
margin-left: 5px;
}
.youBox {
display: flex;
justify-content: flex-start;
margin-bottom: 5px;
}
.youMsg {
width: 200px;
height: 100px;
background-color: skyblue;
border-radius: 10px;
padding: 5px;
}
.youHd {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: pink;
margin-right: 5px;
}
.sendBox {
display: flex;
justify-content: center;
align-items: center;
height: 20vh;
width: 100vw;
background-color: pink;
}
.iptBox {
height: 45px;
width: 250px;
background-color: #fff;
border-radius: 20px;
padding-left: 20px;
/* 消除padding带来的宽度或高度增加问题 */
box-sizing: border-box;
}
.sendBtn {
height: 40px;
width: 80px;
background-color: powderblue;
border-radius: 10px;
text-align: center;
line-height: 40px;
font-size: 18px;
color: #fff;
font-weight: bold;
letter-spacing: 5px;
margin-left: 10px;
}js代码
// pages/chat/chat.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"",
msgBox:[]
},
// 避免输入警告
aa:function(){},
sendMsg:function(){
// 判断用户是否输入了值
if(this.data.msg) {
// 缓存用户输入的值
var myMsg = this.data.msg;
// 自定义对象
var myObj = {
msg:myMsg,
isMine:true //用于判断是我的聊天还是他人的聊天
}
// 将自定义对象放入消息盒子
this.data.msgBox.push(myObj);
// 将消息盒子重新赋值，将用户输入的值赋值为空
this.setData({
msg:"", //再次设置为空，达到输入框发送聊天后清空
msgBox:this.data.msgBox
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})