easeChat模块demo（vue+api实现会话列表滑动删除静态，我曾用于手机推币城APP中的房间用户聊天功能）聊天窗口界面静态页面，
发送文本消息/消除最新消息/监听消息等环信的接口数据交互功能
*****使我代码的时候，一定记住config.xml里面，关于环信的value，
环信开发控制台官网申请key，vuale修改完之后，上传到云端编译才会有效*******
message_frm.html代码片段 置顶删除暂时没有做动态数据交换，只是实现了静态功能，留下的点击删除置顶事件，数据交互功能后期会完善
<body>
<div class="list" v-cloak>
<div class="search-gap">
<div class="middle flex-wrap">
<img class="left_img" src="../image/icon/icon_search.png" @click="fnSearch();" />
<input id="searchText" type="text" placeholder="搜索消息" v-on:input="fnInput();" />
<img id="clear" class="right_img" src="../image/login/icondelete.png" @click="fnClear();" />
</div>
</div>
<div class="item border-1px-bottom" v-for="(lists,index) in list">
<div class="swiper-li">
<div class="thum flex-wrap" @click="fnOpenChat(lists.name,lists.id);">
<div class="left-img">
<!-- src="../image/defaults/default_pic.png" -->
<img v-bind:src="lists.img" v-bind:alt="lists.name" />
<div class="badge">{{lists.badge}}</div>
</div>
<div class="flex-con">
<div class="center-name">{{lists.name}}</div>
<div class="center-body ellipsis-1">{{lists.body}}</div>
</div>
<div class="right-time">
{{lists.time|formatTime}}
</div>
</div>
<div class="btn">
<div class="settop" @click="fnSetTop(index);">
置顶
</div>
<div class="dell" @click="fnDell(index);">
删除
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 封装滴 滑动 删除-->
<script type="text/javascript" src="../script/swiper.js"></script>
<script type="text/javascript">
var eClear, eSearchText, eSearchTextval;
apiready = function() {
// 初始化vue
fnInitVue();
};
function fnInitVue() {
window.ListVue = new Vue({
el: ‘.list‘,
data: {
list: []
},
mounted: function() {
this.$nextTick(function() {
// 初始化数据
fnInit();
// 初始化下拉刷新
fnsetRefreshHeaderInfo();
// 加载会话数据
fnRequestList();
});
},
methods: {
//搜索按钮
fnSearch: function() {
},
//监听输入框
fnInput: function() {
// 获取输入框内容变化
eSearchTextval = $api.val(eSearchText);
if (eSearchTextval != "") {
eClear.style.display = "block";
} else {
eClear.style.display = "none";
}
},
//清空输入框
fnClear: function() {
$api.val(eSearchText, "");
eClear.style.display = "none";
},
//打开聊天窗口
fnOpenChat: function(name, id) {
api.openWin({
name: ‘chat‘,
url: ‘./chat/chat_win.html‘,
slidBackEnabled: true,
pageParam: {
nickname: name,
id: id,
}
})
},
fnSetTop: function(index) {
console.log("置顶" + index);
},
fnDell: function(index) {
console.log("删除" + index);
}
},
filters: {
formatTime: function(v) {
return new Date(v).popular();
}
},
watch: {}
})
}
//打开swiper.js滑动删除特效 3.56是删除跟置顶的宽度
复制代码
此页面底部输入框，需要在开发控制台添加模块UIChatBox模块，模块官网文档地址请详细阅读文档使用！有问题也可以在总贴回复我看见会给你们解答，
chat_frm.html：代码片段
<section class="chat">
<div class="record" id="record">
<div class="upper" id="upper">
<img src="../../image/icon/iconupper.gif" />
<div class="title">上滑取消发送</div>
</div>
<div class="release" id="release">
<img src="../../image/icon/iconrelease.png" />
<div class="title">松开手指取消发送</div>
</div>
</div>
<div class="chat-header"><span>2016年7月13日</span></div>
<div class="chat-item chat-left">
<div class="chat-media">
<img src="../../image/defaults/default_pic.png" />
</div>
<div class="chat-inner flex-wrap">
<div class="chat-contentimg">
<img src="../../image/defaults/default_pic.png" />
</div>
<div class="chat-status">
<i class="iconfont icon-correct"></i>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
var UIChatBox, frameHeight, eRecord, eUpper, eRelease, inputBarHeightsum;
apiready = function() {
console.log(api.pageParam.conversationid + "*****" + api.pageParam.type)
fnInitVue();
};
function fnInitVue() {
window.ListVue = new Vue({
el: ‘.chat‘,
data: {
chat: []
},
mounted: function() {
this.$nextTick(function() {
//初始化数据
fnInit();
//设置页面到最顶部
resizeFrame(50);
//获取环信聊天消息
fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type);
//初始化下拉加载
fnsetRefreshHeaderInfo();
});
},
methods: {
fnOpenInfo: function(name, id, img) {
api.openWin({
name: ‘my_info‘,
url: ‘widget://html/my/my_info_win.html‘,
slidBackEnabled: true,
pageParam: {
nickname: ‘王宝宝‘,
id: 1,
img: img
}
})
}
}
})
}
// 定义一个全局的聊天数组
var message_data = [];
function fnsetRefreshHeaderInfo() {
api.setRefreshHeaderInfo({
loadingImg: ‘widget://image/refresh.png‘,
bgColor: ‘#fff‘,
textColor: ‘#ccc‘,
textDown: ‘下拉刷新...‘,
textUp: ‘松开刷新...‘
}, function(ret, err) {
//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
api.refreshHeaderLoadDone();
if (ret) {
//获取第一条（最早的一条）
if (message_data.length > 0) {
var _lastid = message_data[0].messageId;
// 调取环信聊天消息接口
fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type, true, _lastid);
}
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}
// 加载数据
function fnLoadMessageFromDB(_ret, _loadMore) {
if (_ret.messages.length == 0) {
toast("没有更多了");
}
// 对数据进行渲染
fnUpdateMessageFromDB(_ret.messages, _loadMore);
}
//渲染数据
function fnUpdateMessageFromDB(data_, _loadMore) {
message_data = data_.concat(message_data);
if (_loadMore) {
// 加载数据
window.ListVue.chat = data_.concat(window.ListVue.chat);
} else {
//没有追加直接显示
window.ListVue.chat = data_;
};
};
//追加一条最新数据
function fnAddanew(data_, addanew_) {
//新旧数组拼接
message_data = data_.concat(message_data);
if (addanew_) {
console.log(JSON.stringify(data_))
// 追加最新一条
window.ListVue.chat = window.ListVue.chat.concat(data_);
//设置页面到最顶部
resizeFrame(inputBarHeightsum);
}
}
复制代码
11月20日:
修复一些bug 增加了发送文本消息，消除最新消息数 前端其他文件代码自行下载研究。
环信接口此块需要注意
easeChat.addMessageListener({
name: ‘receive‘
}, function(ret) {
环信监听消息，console.log(JSON.stringify(ret.messages))打印的是数组{"isPushMsg":false,"messages":
[{"messageId":"537527514856167428","timestamp":1542717677272,"chatType":"chat","direction":"receive","body":{"type":"text","text":"太可怜了"},"localTime":1542717677358,"isReadAcked":false,"conversationId":"zhouheng","from":"zhouheng","isDeliverAcked":true,"isRead":false,"status":"successed","to":"wangbaobao"}]
}
然后字段messages/message也不同
easeChat.sendText
发送文本消息，
console.log(JSON.stringify(ret.message));打印的是对象
{"status":true,"message":{"messageId":"15427176765730178","conversationId":"wangbaobao","direction":"send","from":"zhouheng","to":"wangbaobao","timestamp":1542717676575,"localTime":1542717676573,"chatType":"chat","status":"pending","isReadAcked":false,"isDeliverAcked":false,"isRead":true,"ext":{},"body":{"type":"text","text":"太可怜了"}
}
//监听消息事件
function fnAddMessageListener() {
var easeChat = api.require(‘easeChat‘);
easeChat.addMessageListener({
name: ‘receive‘
}, function(ret) {
if (ret) {
//获取到消息刷新一下会话列表
fnGetAllConversations();
// 向聊天消息追加一条消息
api.execScript({
name: ‘chat‘,
frameName: ‘chat_frm‘,
script: ‘fnAddanew(‘ + JSON.stringify(ret.messages) + ‘,‘ + true + ‘);‘
});
} else {
toast("APICloud环信DEMO：" + ret.msg);
}
});
}
// 获取环信会话列表
function fnGetAllConversations() {
easeChat = api.require(‘easeChat‘);
easeChat.getAllConversations(function(ret) {
var _total = 0;
for (var i in ret.conversations) {
_total += ret.conversations[i].unreadMessagesCount;
}
//存储未读消息总数
$api.setStorage(‘unread_total‘, _total);
//刷新底部导航消息数
api.execScript({
name: ‘main‘,
script: ‘fnNewsBadge(‘ + _total + ‘);‘
});
//刷新会话列表消息
api.execScript({
name: ‘main‘,
frameName: ‘message‘,
script: ‘fnRequestList(‘ + JSON.stringify(ret) + ‘);‘
});
});
}
//新建或获取一个会话 安卓同样支持
function fnGetConversation(conversationId_, type_) {
var easeChat = api.require(‘easeChat‘);
easeChat.getConversation({
conversationId: conversationId_,
type: type_,
ifCreate: true
}, function(ret, err) {
if (ret.status) {
console.log(JSON.stringify(ret))
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}
//获取聊天消息
function fnMessageFromDB(_conversationid, _type, _loadMore, _lastid) {
var easeChat = api.require(‘easeChat‘);
easeChat.loadMessageFromDB({
conversationId: _conversationid,
type: _type,
startMsgId: _lastid,
pagesize: 6 //没加载6条信息
}, function(ret, err) {
console.log(JSON.stringify(ret))
if (ret) {
// 加载chat_frm页面fnLoadMessageFromDB聊天消息
fnLoadMessageFromDB(ret, _loadMore);
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}
//点击消息已读
function fnMarkAllMessagesAsRead(conversationId_, type_) {
var easeChat = api.require(‘easeChat‘);
easeChat.markAllMessagesAsRead({
conversationId: conversationId_,
type: type_
}, function(ret, err) {
if (ret.status) {
// console.log(JSON.stringify(ret));
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}
//将指定消息设置为已读
function fnMarkMessageAsRead(conversationId_, type_, messageId_) {
var easeChat = api.require(‘easeChat‘);
easeChat.markMessageAsRead({
conversationId: conversationId_,
type: type_,
messageId: messageId_
}, function(ret, err) {
if (ret) {
// api.alert({ msg:JSON.stringify(ret)});
} else {
api.toast({
msg: ‘APICloud环信DEMO：‘ + JSON.stringify(err),
duration: 2000,
location: ‘bottom‘
});
}
});
}
//发送文本消息
function fnEaseChatSendText(conversationId_, chatType_, text_, from_, to_) {
var easeChat = api.require(‘easeChat‘);
easeChat.sendText({
conversationId: conversationId_, //此字段为会话id一开始可以对话可以为空
chatType: chatType_, //会话类型chat：单聊会话 groupChat：群聊会话 chatRoom：聊天室会话
text: text_, //发送的消息内容
from: from_, //发送方当前登录账号
to: to_, //接受方
ext: {} // //JSON 对象；消息扩展，Key值类型必须是NSString, Value值类型必须是NSString或者 NSNumber类型的 BOOL, int, unsigned in, long long, double
}, function(ret, err) {
console.log(JSON.stringify(ret))
if (ret.status) {
// 刷新一下首页列表消息
fnGetAllConversations();
// 向聊天消息追加一条消息
api.execScript({
name: ‘chat‘,
frameName: ‘chat_frm‘,
script: ‘fnAddanew(‘ + JSON.stringify([ret.message]) + ‘,‘ + true + ‘);‘
});
//将指定消息设置为已读
fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
} else {
toast("APICloud环信DEMO：" + err.msg);
}
});
}
main.html
// 设置最新消息数
function fnNewsBadge(_number) {
if (_number >= 0) {
$api.setStorage(‘unread_total‘, _number);
}
if (_number < 99) {
window.rootVue.footer[0].number = _number;
} else {
window.rootVue.footer[0].number = ‘99+‘;
}
原文地址：https://www.cnblogs.com/tuituile/p/11703346.html