1 当我们点击好友时,即可进入与好友的聊天界面,并将当前好友信息传递到聊天界面。在当前会话页面中,可获取上个页面传过来的好友信息。
通过JSON.parse()将传递过来的字符串转换成对象
之后,在页面刚加载时,就创建聊天对象,other的值为从上个页面传递过来的值
onLoad(e) { this.other = JSON.parse(e.data); // 创建聊天对象
// this.chat为vuex中state中的chat对象 this.chat.createChatObject(this.other) },
2. 当点击发送按钮,触发send事件
send事件中,首先需要组织发送数据的格式(调用Chat类中的formatSendData方法)
之后将数据渲染到页面
最后,调用Chat类的send方法发送消息
send(type, data='', options = {}) { // 组织数据格式 let message = this.chat.formatSendData({ type: 'text', data: this.text, options, }) // 渲染到页面 // 拿到数组的长度 let index = this.chatList.length this.chatList.push(message) this.chat.send(message) .then(res => { console.log(res) // 发送成功 this.chatList[index].id = res.id this.chatList[index].sendStatus = 'success' }).catch(err => { console.log(err) // 发送失败 this.chatList[index].sendStatus = 'fail' }) }
3. Chat.js