会话列表功能概述：
- 登录 ：先用自己的账号登录腾讯云；
- 获取会话列表 ：登录之后再获取会话列表；
- 更新未读消息数量 ：获取会话列表之后更新未读消息数量
WXML代码（自己写的将就看一下）
-
<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>
WXSS代码
.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; }
JS代码
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 < UserProfileItem.length; 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) }); }
登录主要信息配置
（我这里是写在app.js里面，这些配置信息是后台服务器端对接完之后返回给前端的，登录的时候要用到）
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> </
全部评论
请发表评论