微信聊天小程序 |
您所在的位置：网站首页 › 微信聊天页面自动往上跳怎么关闭 › 微信聊天小程序 |
微信聊天小程序
|
四、聊天页面
步骤一、聊天页面的搭建
效果图：
思路： 聊天页面的搭建 首先在聊天页面获取我们所有的好友信息其次当点击我们对应好友，进入聊天页面 注意传递我们此时的聊天记录表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.globalData._id msg.text = that.data.inputValue msg.time = util.formatTime(new Date()) record.push(msg) console.log(msg) wx.cloud.database().collection('chat_record1').doc(that.data.recordId).update({ data: { record: record }, success(res){ console.log(res) wx.showToast({ title: '发布成功！', }) //刷新下 that.getChatRecord() that.setData({ inputValue :'', plcaceHolder:'评论' }) } }) } }) }, // 功能：获取输入框的值 getInputValue(event){ console.log(event.detail.value) this.data.inputValue = event.detail.value }, })在wxml文件中： |
【本文地址】
今日新闻 |
推荐新闻 |