微信小程序接入腾讯云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>
微信小程序接入腾讯云IM即时通讯（会话列表）的更多相关文章
- 微信小程序集成腾讯云 IM SDK
微信小程序集成腾讯云 IM SDK 1.背景 因业务功能需求需要接入IM(即时聊天)功能,一开始想到的是使用 WebSocket 来实现这个功能,然天意捉弄(哈哈)服务器版本太低不支持 wx 协议(也 ...
- 微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
- 微信小程序接入百度OCR（身份证识别）
微信小程序接入百度OCR(身份证识别) 1.接口描述 支持对二代居民身份证正反面所有8个字段进行结构化识别,包括姓名.性别.民族.出生日期.住址.身份证号.签发机关.有效期限,识别准确率超过99%:同 ...
- 微信小程序接入百度统计
一. 百度统计添加应用,获取appkey和微信小程序统计sdk: 1. 百度统计首页,点击“我的全部应用”右侧的添加按钮: 2. “应用类型”选择小程序统计,选择微信小程序,填写应用名称信息,选择内容 ...
- 微信小程序语音与讯飞语音识别接口（Java）
项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 而微信小程序上传的文件格式是silk的,而讯飞接口能识别wav 格式的文件,所以需要将小程序上传的silk文件转成wav ...
- 微信小程序语音与讯飞语音识别接口（Java），Kronopath/SILKCodec，ffmpeg处理silk，pcm，wav转换
项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 首先去讯飞开放平台中申请开通语音识别功能 在这里面下载sdk,然后解压,注意appid与sdk是关联的,appid在初始 ...
- 如何开发一款堪比APP的微信小程序（腾讯内部团队分享）
一夜之间,微信小程序刷爆了行业网站和朋友圈,小程序真的能如张小龙所说让用户"即用即走"吗? 其功能能和动辄几十兆安装文件的APP相比吗? 开发小程序,是不是意味着移动应用开发的一次 ...
- 天河微信小程序入门：阿里云tomcat免费配置https
天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...
- 微信小程序 使用腾讯地图SDK详解及实现步骤
信小程序 使用腾讯地图SDK详解及实现步骤 微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...
随机推荐
- Ubuntu16.04 / OpenCV / Python 源码安装
为什么需要源码安装? 1. 对 Python 版的 OpenCV,Ubuntu 有两种安装方式: 源码安装:官网(https://opencv.org/releases.html)下载源代码,在机器上 ...
- eclipse web开发插件安装
eclipse官方网站上下载的标准版Eclipse是没有web开发环境的,为了能够进行web开发,需要安装一些插件.web开发需要的插件有 1 EMF: Downloads | Project hom ...
- 剑指offer四十六之孩子们的游戏(圆圈中最后剩下的数，约瑟夫环问题)
一.题目 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...
- Oracle 锁问题处理
Oracle 锁问题处理 锁等待问题是一个常见的问题 查看持有锁的对象 查看事务正在执行的语句,与应用确认是否能够kill kill 对应的session
- redmine3.3.3 rake db:migrate 报错invalid byte sequence in US-ASCII (Argument Error) 解决方法
这个错误有点莫名其妙,系统默认的就是utf-8,可bundle就是不对.. rake db:migrate 结果没有任何错误,反而是网页passenger 提示了这个错误 参考:https://git ...
- Java模拟双色球彩票
package practice1; import java.util.Random; import java.util.Scanner; public class Test3 { /** * * 模 ...
- Observer观察者设计模式
Observer设计模式主要包括以下两种对象: (1)被观察对象:Subject,它往往包含其他对象感兴趣的东西,上面例子中热水器中就是Subject(被监视对象); (2)观察对象:Observer ...
- java泛型---通配符,泛型嵌套
package generic; import java.util.ArrayList; import java.util.List; /** * ? -->通配符,类型不确定,用于声明 变量| ...
- Android 开发工具类 15_ MyAsyncTask
AsyncTask 对于生命周期较短且需要在UI上显示进度和结果的后台操作是很好的解决方案.然而,当 Activity 重新启动时,这种操作将不会持续进行,也就是说,AsyncTask 在设备的方向变 ...
- fine ui使用笔记
1.top.X.alert("保存成功"); 2.Alert.GetShowInTopReference("这是在服务器端生成的客户端事件"); 注明:1与2等 ...