会话列表功能概述：
<view class='msg-con'> <view class='service-msg flex-wrap' > <view class='flex-item'> <view class='service-avatar'> <view class='iconfont icon-kefu'>view> view> view> <view class='flex-item4 service-item'> <view class='name s'>在线客服view> view> <button open-type="contact" hover-class="none">button> view> <view class='msg-item flex-wrap' wx:for="{{contactList}}" wx:key="{{index}}" wx:if="{{contactList.length > 0}}" bindtap='linkChat' data-id="{{item.To_Account}}" data-name="{{item.C2cNick}}"> <view class='flex-item'> <view class='msg-avatar'> <image style="width:50px;height:50px;border-radius:50%;" mode= "scaleToFill" wx:if="{{item.C2cImage == ''}}" src="{{noData}}">image> <image style="width:50px;height:50px;border-radius:50%;" mode= "scaleToFill" wx:if="{{item.C2cImage != ''}}" src="{{item.C2cImage}}">image> view> view> <view class='flex-item4 msg-text'> <view class='name flex-wrap'> <view class="flex-item ellipsis1">{{item.C2cNick}}view> <view class="flex-item tr fz24 c9">{{item.MsgTimeStamp}}view> view> <view class='text flex-wrap'> <view class='flex-item3 ellipsis1'> <text>{{item.MsgShow}}text> view> <view class='flex-item'> <text class='count' wx:if="{{item.UnreadMsgCount > 0}}">{{item.UnreadMsgCount}}text>view> view> view> view> <view > view> view> <view class='dev' wx:if="{{!isNoData}}"> <image style="width:306rpx;height:306rpx;display:block;" mode= "scaleToFill" src="{{noData}}">image> <view class="devt"> 消息列表为空~ view> view>
.msg-con{ width: 100%; height: auto; background: #ffffff; padding:0px 10px; box-sizing: border-box; } .service-msg{ width: 100%; height: 70px; } .msg-item{ border-top: 1px solid #e5e5e5; } .service-avatar{ width: 50px; height: 50px; background: #69BEFF; margin: 10px 0; border-radius:50%; } .msg-avatar{ width: 50px; height: 50px; margin: 10px 0; border-radius:50%; } .msg-text{ margin-top:12px; } .name{ font-size: 16px; color: #333333; height: 25px; } .name.s{ height: 70px; line-height: 70px; } .text{ color: #999999; font-size: 13px; position: relative; } .icon-kefu::before{ width: 50px; height: 50px; line-height: 50px; display: block; color: #ffffff; text-align: center; font-size: 60rpx; } .count{ width: 20px; height: 20px; background:#F74C31; border-radius:50%; line-height: 20px; display: block; color: #ffffff; text-align: center; position: absolute; right: 0px; top: 0; } button{ color: #333333; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0); } button:after{ border:none; } .service-msg{ position: relative; }
ar util = require('../..//utils/util.js'); //转换时间插件
var webim = require('../../utils/webim.js');//腾讯云im包
var webimhandler = require('../../utils/webim_handler.js');//这个是所有事件的腾讯js，这个页面需要用到登录
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
isNoData:true,
noData: app.data.imageUrl + '/no-msg.png',//无数据的图片
contactList:[],//会话列表
},
onLoad: function (options) {
},
onShow:function(){
wx.showLoading()
var that = this;
var selToID = '';//会话列表不设置对方私聊账号
webimhandler.init({ //初始化的方法
accountMode: app.data.Config.accountMode
, accountType: app.data.Config.accountType
, sdkAppID: app.data.Config.sdkappid
, selType: webim.SESSION_TYPE.C2C//私聊
, agent_member_id: app.data.userInfo.id//经纪人id
, id: selToID //如果是经纪人，则填agent_member_id ,如果是普通用户则填经纪人id
, name: app.data.userInfo.agent_name
, icon: app.data.userInfo.agent_pic,
that: that
});
if (webim.checkLogin()) {//检查是否登录返回true和false,不登录则重新登录
console.log('已登录')
that.initRecentContactList();
} else {
console.log('登录成功')
webimhandler.sdkLogin(that, app, selToID, function () {
that.initRecentContactList();
});
}
},
//初始化聊天界面最近会话列表
initRecentContactList: function () {
var that = this;
webim.getRecentContactList({//获取会话列表的方法
'Count': 10 //最近的会话数 ,最大为 100
}, function (resp) {
if (resp.SessionItem){
if (resp.SessionItem.length == 0) {
that.setData({
isNoData: false,
})
wx.hideLoading()
}else if (resp.SessionItem.length > 0){
that.setData({
contactList: resp.SessionItem,
isNoData:true
})
var userId = that.data.contactList.map((item, index) => {
return item.To_Account
})
that.getAvatar(userId, that.data.contactList, function (data) {
data = data.map((item,index)=>{
if (item.MsgShow == '[其他]'){
item.MsgShow = '[房源信息]'
}
return item;
})
that.setData({
contactList: data
})
wx.hideLoading();
// 初始化最近会话的消息未读数(监听新消息事件)
webim.syncMsgs(webimhandler.onMsgNotify());
})
// webim.syncMsgs(that.initUnreadMsgCount())
}else{
wx.hideLoading()
return;
}
}else{
wx.hideLoading()
}
}, function (resp) {
//错误回调
});
},
// 初始化最近会话的消息未读数（这个方法用不到，多余，这是个坑，登录之后仍然返回空对象）
initUnreadMsgCount: function(){
var sess;
var sessMap = JSON.stringify(webim.MsgStore.sessMap()) ;
for (var i in sessMap) {
console.log('循环对象')
sess = sessMap[i];
// if (selToID && selToID != sess.id()) { //更新其他聊天对象的未读消息数
console.log('sess.unread()', sess.unread())
// updateSessDiv(sess.type(), sess.id(), sess.name(), sess.unread());
// }
}
},
//获取会话列表所有用户头像
getAvatar: function(userId, item, callback) {
if(!callback) {
callback = () => {
}
}
var that = this;
var tag_list = ['Tag_Profile_IM_Nick', 'Tag_Profile_IM_Image']
tag_list.push("Tag_Profile_IM_Nick");
//用户id
var account = userId
var optiOns= {
From_Account: userId,
To_Account: account,
LastStandardSequence: 0,
TagList: tag_list,
};
var cOntactList= [];
webim.getProfilePortrait(
options,
function (res) {
var UserProfileItem = res.UserProfileItem;
var C2cNick, C2cImage;
for (var i = 0; i ) {
var data = UserProfileItem[i].ProfileItem;
// 循环添加昵称和头像
cOntactList= item.map((item, index) => {
item.C2cNick = UserProfileItem[index].ProfileItem[0].Value
item.C2cImage = UserProfileItem[index].ProfileItem[1].Value
return item;
})
}
contactList = contactList.map((item, index) => {
var MsgTimeStamp = util.getDateDiff(item.MsgTimeStamp * 1000)
item.MsgTimeStamp = MsgTimeStamp;
return item;
})
callback(contactList)
}
)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 从列表选择一个会话跳转聊天（需要传你要聊天的会话的对方id过去）
*/
linkChat:function(e){
wx.navigateTo({
url: '/pages/chat/chat?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name ,
})
}
})
登录的方法
function sdkLogin(that,app, selToID,callback) {
if (!callback){
callback = () => {
}
}
this.init({
accountMode: app.data.Config.accountMode
, accountType: app.data.Config.accountType
, sdkAppID: app.data.Config.sdkappid
, selType: webim.SESSION_TYPE.C2C//私聊
, agent_member_id: app.data.userInfo.id//经纪人id
, id: selToID //如果是经纪人，则填agent_member_id ,如果是普通用户则填经纪人id
, name: app.data.userInfo.agent_name
, icon: app.data.userInfo.agent_pic,
that:that
});
//当前用户身份
var loginInfo = {
'sdkAppID':app.data.Config.sdkappid, //用户所属应用id,必填
'appIDAt3rd':app.data.Config.sdkappid, //用户所属应用id，必填
'accountType':app.data.Config.accountType, //用户所属应用帐号类型，必填
'identifier': app.data.userInfo.id, //当前用户ID,必须是否字符串类型，选填
'identifierNick': app.data.userInfo.nickname, //当前用户昵称，选填
'userSig': app.data.userInfo.usersig, //当前用户身份凭证，必须是字符串类型，选填
};
//1v1单聊的话，一般只需要 'onConnNotify' 和 'onMsgNotify'就行了。
//监听连接状态回调变化事件
var OnConnNotify= function (resp) {
switch (resp.ErrorCode) {
case webim.CONNECTION_STATUS.ON:
//webim.Log.warn('连接状态正常...');
break;
case webim.CONNECTION_STATUS.OFF:
webim.Log.warn('连接已断开，无法收到新消息，请检查下你的网络是否正常');
break;
default:
webim.Log.error('未知连接状态,status=' + resp.ErrorCode);
break;
}
};
//监听事件
var listeners = {
"onConnNotify": onConnNotify//监听连接状态回调变化事件,必填
, "onMsgNotify": onMsgNotify
};
//其他对象，选填
var optiOns= {
'isAccessFormalEnv': true,//是否访问正式环境，默认访问正式，选填
'isLogOn': true//是否开启控制台打印日志,默认开启，选填
};
//sdk登录(独立模式)
webim.login(loginInfo, listeners, options, function (resp) {
callback()
}, function (err) {
console.log("登录失败", err.ErrorInfo)
});
}
var cache = require('./utils/cache.js'); var login = require('./utils/login.js'); App({ data: { Config :{ sdkappid: 1400129031,// accountType: 35602, accountMode: 0 //帐号模式，0-表示独立模式 }, },
https://blog.csdn.net/qq_29789057/article/details/82428326
<view class='msg-con'> <view class='service-msg flex-wrap' > <view class='flex-item'> <view class='service-avatar'> <view class='iconfont icon-kefu'>view> view> view> <view class='flex-item4 service-item'> <view class='name s'>在线客服view> view> <button open-type="contact" hover-class="none">button> view> <view class='msg-item flex-wrap' wx:for="{{contactList}}" wx:key="{{index}}" wx:if="{{contactList.length > 0}}" bindtap='linkChat' data-id="{{item.To_Account}}" data-name="{{item.C2cNick}}"> <view class='flex-item'> <view class='msg-avatar'> <image style="width:50px;height:50px;border-radius:50%;" mode= "scaleToFill" wx:if="{{item.C2cImage == ''}}" src="{{noData}}">image> <image style="width:50px;height:50px;border-radius:50%;" mode= "scaleToFill" wx:if="{{item.C2cImage != ''}}" src="{{item.C2cImage}}">image> view> view> <view class='flex-item4 msg-text'> <view class='name flex-wrap'> <view class="flex-item ellipsis1">{{item.C2cNick}}view> <view class="flex-item tr fz24 c9">{{item.MsgTimeStamp}}view> view> <view class='text flex-wrap'> <view class='flex-item3 ellipsis1'> <text>{{item.MsgShow}}text> view> <view class='flex-item'> <text class='count' wx:if="{{item.UnreadMsgCount > 0}}">{{item.UnreadMsgCount}}text>view> view> view> view> <view > view> view> <view class='dev' wx:if="{{!isNoData}}"> <image style="width:306rpx;height:306rpx;display:block;" mode= "scaleToFill" src="{{noData}}">image> <view class="devt"> 消息列表为空~ view> view>
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有