微信小程序接入腾讯云IM即时通讯（会话列表）

会话列表功能概述：

登录：先用自己的账号登录腾讯云；
获取会话列表：登录之后再获取会话列表；
更新未读消息数量：获取会话列表之后更新未读消息数量

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:;

}

button{

  color: #333333;

  position: absolute;

  top:;

  left:;

  z-index:;

  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> </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>

巴特西