微信聊天小程序——（四、聊天页面）

四、聊天页面

---

步骤一、聊天页面的搭建

效果图：

思路：

聊天页面的搭建

• 首先在聊天页面获取我们所有的好友信息
• 其次当点击我们对应好友，进入聊天页面
  注意传递我们此时的聊天记录表id，方便之后进行添加聊天记录
• 聊天页面下方布局发送消息
  注意为传递参数的发送框
• 获取我们发送消息，传递到我们的聊天记录表的记录中

在聊天页面中：

getChatRecord()

  // 功能：当跳转到聊天页面的时候，显示聊天信息
  // 思路：1.更加我们接收到的_id在聊天表中查询，返回查询值
  //      2.在wxml页面进行渲染

publishChat()

// 功能：当我们发布消息的时候，更新我们的数据库表中的消息
// 思路：1.首先根据页面接收到的值，获取这条消息的_id
//      2.新建一个空白数组，将我们需要记录的信息、聊天内容放到这个数组中
//      3.将这个数组放到我们存放聊天记录的record数组中
//      4.更新我们的数据库表格
//      5.更新之后，再次调用，使刚刚发送的消息出现
//      6.将我们的评论和输入消息内筒赋值为空

getInputValue(event)

// 功能：获取输入框的值

在js文件：

const app=getApp()
const util= require("../../utils/utils")

Page({


  data: {

  },

  onShow(){
    this.setData({
      userInfo: app.globalData.userInfo
    })
  },

  // 功能：当点击好友的时候，传输好友信息
  onLoad(options) {
    console.log(options.id)
    this.setData({
      recordId:options.id
    })

  this.getChatRecord();

  },

  // 功能：当跳转到聊天页面的时候，显示聊天信息
  // 思路：1.更加我们接收到的_id在聊天表中查询，返回查询值
  //      2.在wxml页面进行渲染
  getChatRecord(){

    var that = this;
    wx.cloud.database().collection('chat_record1').doc(that.data.recordId).get({
      success(res){
        console.log(res)
        that.setData({
          chatList: res.data.record
        })
      }
    })
  },


// 功能：当我们发布消息的时候，更新我们的数据库表中的消息
// 思路：1.首先根据页面接收到的值，获取这条消息的_id
//      2.新建一个空白数组，将我们需要记录的信息、聊天内容放到这个数组中
//      3.将这个数组放到我们存放聊天记录的record数组中
//      4.更新我们的数据库表格
//      5.更新之后，再次调用，使刚刚发送的消息出现
//      6.将我们的评论和输入消息内筒赋值为空 

  publishChat(){
    var that = this;
    wx.cloud.database().collection('chat_record1').doc(that.data.recordId).get({
      success(res){
        console.log(res)

        var record = res.data.record
        var msg = {}
        msg.userId = app.globalData.userInfo._id
        msg.nickName = app.globalData.userInfo.nickName
        msg.faceImg = app.globalData.userInfo.faceImg
        msg.openid = app.g