uniapp（微信小程序）聊天实例，支持图片，语音，表情（附源码）

效果预览

在这里插入图片描述

安装教程

配置请参考Dome

会话配置

{
	info:{
		// 用户关键字
		userKey:2666,
		
		// 用户手机
		userPhone:15252156614,
		
		// 用户昵称
		userName: '健健',
		
		// 头像
		headImg: 'http://d.hiphotos.baidu.com/image/h%3D300/sign=0defb42225381f3081198ba999004c67/6159252dd42a2834a75bb01156b5c9ea15cebf2f.jpg',
		
		// [选填] token
		token:'123123'
	},
	
	// 项目配置 *[自行申请 替换就OK]
	ProjectInfo: {
		userPhone: "15252156614",
		userToken: "0ZJ_A5F0-F4AC1DD644DA",
		projectToken: "CC8-A829-E530731C0FD6",
		callUrl: "http://socketplus.ecjsw.com/MsgCall/tack"
	},
	
	style:{
		// 窗口颜色 配置
		nTitle:{
			color: '#ffffff',
			background: '#1482d1'
		}
	}
}

聊天列表配置

	{
			
		// 会话名称
		title:item.title,
			
		// 对方 UserKey [type long] == 会话.info.userKey
		toUserKey:item.mobile,
			
		// 头像 自定义
		headImg: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3400163923,2373757593&fm=173&app=25&f=JPEG?w=550&h=413&s=F29B1DC74EA34E96EB11E9DF03009097',
			
		// [0|1]可选 0点对点，1群组会话
		sessionType:0 
	}

滚动到底部

srollToBottom: function(that) {
		var query = uni.createSelectorQuery();
		query.selectAll('.m-item').boundingClientRect();
		query.select('#scrollview').boundingClientRect();

		query.exec(function (res) {
			that.style.mitemHeight = 0;
			res[0].forEach(function (rect) {
				// console.info(rect.height);
				that.style.mitemHeight = that.style.mitemHeight + rect.height + 120;
			});

			if (that.style.mitemHeight > that.style.contentViewHeight) {
				that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight;
			}
		});
	},

加粗样式

	refreshContentHeigth: function(that) {
		const res = uni.getSystemInfoSync();
		that.style.pageHeight = res.windowHeight;
		that.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素
	}