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

效果预览

在这里插入图片描述

安装教程

配置请参考Dome

会话配置

{info:{// 用户关键字userKey:2666,// 用户手机userPhone:15252156614,// 用户昵称userName: '健健',// 头像headImg: 'http://d.hiphotos.baidu.com/image/h%3D300/sign=0defb42225381f3081198ba999004c67/6159252dd42a2834a75bb01156b5c9ea15cebf2f.jpg',// [选填] tokentoken:'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.userKeytoUserKey: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); //像素}