《微信小程序案例7》数据双向绑定input实现获取用户输入的值、实现聊天框

一、数据双向绑定input实现获取用户输入的值：

二、聊天框

聊天数据追加保存到js的data里面，使用数组保存便于wxml使用wx:for渲染数据

 方法：对数组使用push追加保存数据

 目前只开发我的聊天记录，对方的聊天记录需要使用服务器开发，暂时留到下一文章讲解。

三、代码

wxml代码

  
  
    
      {{item.msg}}
      
    
    
    
      
      
    
  



  
  发送

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() {

  }
})