前后端交互3 发送消息1

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