apicloud apicloud

注册
查看: 7560|回复: 20

[案例源码] (三)环信 easeChat模块demo列表滑动删除置顶 聊天界面

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

[案例源码] (三)环信 easeChat模块demo列表滑动删除置顶 聊天界面

7560 20 | 发表于 2018-11-19 16:55:21 |阅读模式 | |
本帖最后由 Mr.ZhouHeng 于 2019-9-3 15:27 编辑

环信 easeChat模块demo(vue+api实现会话列表滑动删除静态)聊天窗口界面静态页面,
发送文本消息/消除最新消息/监听消息等环信的接口数据交互功能
(文章后面附件登录注册底部导航会话列表聊天窗口所有页面源码)
*****使用我代码的时候,一定记住config.xml里面,关于环信的value,
需要按照我贴一,去环信开发控制台官网申请key,vuale修改完之后,上传到云端编译才会有效*******








message_frm.html代码片段  置顶删除暂时没有做动态数据交换,只是实现了静态功能,留下的点击删除置顶事件,数据交互功能后期会完善

  1. <body>
  2.     <div class="list" v-cloak>
  3.         <div class="search-gap">
  4.             <div class="middle flex-wrap">
  5.                 <img class="left_img" src="../image/icon/icon_search.png" @click="fnSearch();" />
  6.                 <input id="searchText" type="text" placeholder="搜索消息" v-on:input="fnInput();" />
  7.                 <img id="clear" class="right_img" src="../image/login/icondelete.png" @click="fnClear();" />
  8.             </div>
  9.         </div>
  10.         <div class="item border-1px-bottom" v-for="(lists,index) in list">
  11.             <div class="swiper-li">
  12.                 <div class="thum flex-wrap" @click="fnOpenChat(lists.name,lists.id);">
  13.                     <div class="left-img">
  14.                         <!-- src="../image/defaults/default_pic.png" -->
  15.                         <img v-bind:src="lists.img" v-bind:alt="lists.name" />
  16.                         <div class="badge">{{lists.badge}}</div>
  17.                     </div>
  18.                     <div class="flex-con">
  19.                         <div class="center-name">{{lists.name}}</div>
  20.                         <div class="center-body ellipsis-1">{{lists.body}}</div>
  21.                     </div>
  22.                     <div class="right-time">
  23.                         {{lists.time|formatTime}}
  24.                     </div>
  25.                 </div>
  26.                 <div class="btn">
  27.                     <div class="settop" @click="fnSetTop(index);">
  28.                         置顶
  29.                     </div>
  30.                     <div class="dell" @click="fnDell(index);">
  31.                         删除
  32.                     </div>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </div>
  37. </body>

  38. <!-- 封装滴 滑动 删除-->
  39. <script type="text/javascript" src="../script/swiper.js"></script>
  40. <script type="text/javascript">
  41.     var eClear, eSearchText, eSearchTextval;
  42.     apiready = function() {
  43.         // 初始化vue
  44.         fnInitVue();
  45.     };

  46.     function fnInitVue() {
  47.         window.ListVue = new Vue({
  48.             el: '.list',
  49.             data: {
  50.                 list: []
  51.             },
  52.             mounted: function() {
  53.                 this.$nextTick(function() {
  54.                     // 初始化数据
  55.                     fnInit();
  56.                     // 初始化下拉刷新
  57.                     fnsetRefreshHeaderInfo();
  58.                     // 加载会话数据
  59.                     fnRequestList();
  60.                 });
  61.             },
  62.             methods: {
  63.                 //搜索按钮
  64.                 fnSearch: function() {

  65.                 },
  66.                 //监听输入框
  67.                 fnInput: function() {
  68.                     // 获取输入框内容变化
  69.                     eSearchTextval = $api.val(eSearchText);
  70.                     if (eSearchTextval != "") {
  71.                         eClear.style.display = "block";
  72.                     } else {
  73.                         eClear.style.display = "none";
  74.                     }
  75.                 },
  76.                 //清空输入框
  77.                 fnClear: function() {
  78.                     $api.val(eSearchText, "");
  79.                     eClear.style.display = "none";
  80.                 },
  81.                 //打开聊天窗口
  82.                 fnOpenChat: function(name, id) {
  83.                     api.openWin({
  84.                         name: 'chat',
  85.                         url: './chat/chat_win.html',
  86.                         slidBackEnabled: true,
  87.                         pageParam: {
  88.                             nickname: name,
  89.                             id: id,
  90.                         }
  91.                     })
  92.                 },
  93.                 fnSetTop: function(index) {
  94.                     console.log("置顶" + index);
  95.                 },
  96.                 fnDell: function(index) {
  97.                     console.log("删除" + index);
  98.                 }
  99.             },
  100.             filters: {
  101.                 formatTime: function(v) {
  102.                     return new Date(v).popular();
  103.                 }
  104.             },
  105.             watch: {}
  106.         })
  107.     }

  108.     //打开swiper.js滑动删除特效 3.56是删除跟置顶的宽度
复制代码






此页面底部输入框,需要在开发控制台添加模块UIChatBox模块,模块官网文档地址请详细阅读文档使用!有问题也可以在总贴回复我看见会给你们解答,
chat_frm.html:代码片段

  1.     <section class="chat">
  2.         <div class="record" id="record">
  3.             <div class="upper" id="upper">
  4.                 <img src="../../image/icon/iconupper.gif" alt="" />
  5.                 <div class="title">上滑取消发送</div>
  6.             </div>
  7.             <div class="release" id="release">
  8.                 <img src="../../image/icon/iconrelease.png" alt="" />
  9.                 <div class="title">松开手指取消发送</div>
  10.             </div>
  11.         </div>
  12.         <div class="chat-header"><span>2016年7月13日</span></div>
  13.         <div class="chat-item chat-left">
  14.             <div class="chat-media">
  15.                 <img src="../../image/defaults/default_pic.png" />
  16.             </div>
  17.             <div class="chat-inner flex-wrap">
  18.                 <div class="chat-contentimg">
  19.                     <img src="../../image/defaults/default_pic.png" />
  20.                 </div>
  21.                 <div class="chat-status">
  22.                     <i class="iconfont icon-correct"></i>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         </div>
  27.     </section>


  28. <script type="text/javascript">
  29.       var UIChatBox, frameHeight, eRecord, eUpper, eRelease, inputBarHeightsum;
  30.     apiready = function() {
  31.         console.log(api.pageParam.conversationid + "*****" + api.pageParam.type)
  32.         fnInitVue();
  33.     };

  34.     function fnInitVue() {
  35.         window.ListVue = new Vue({
  36.             el: '.chat',
  37.             data: {
  38.                 chat: []
  39.             },
  40.             mounted: function() {
  41.                 this.$nextTick(function() {
  42.                     //初始化数据
  43.                     fnInit();
  44.                     //设置页面到最顶部
  45.                     resizeFrame(50);
  46.                     //获取环信聊天消息
  47.                     fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type);
  48.                     //初始化下拉加载
  49.                     fnsetRefreshHeaderInfo();
  50.                 });
  51.             },
  52.             methods: {
  53.                 fnOpenInfo: function(name, id, img) {
  54.                     api.openWin({
  55.                         name: 'my_info',
  56.                         url: 'widget://html/my/my_info_win.html',
  57.                         slidBackEnabled: true,
  58.                         pageParam: {
  59.                             nickname: '王宝宝',
  60.                             id: 1,
  61.                             img: img
  62.                         }
  63.                     })
  64.                 }
  65.             }
  66.         })
  67.     }

  68.     // 定义一个全局的聊天数组
  69.     var message_data = [];

  70.     function fnsetRefreshHeaderInfo() {
  71.         api.setRefreshHeaderInfo({
  72.             loadingImg: 'widget://image/refresh.png',
  73.             bgColor: '#fff',
  74.             textColor: '#ccc',
  75.             textDown: '下拉刷新...',
  76.             textUp: '松开刷新...'
  77.         }, function(ret, err) {
  78.             //在这里从服务器加载数据,加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
  79.             api.refreshHeaderLoadDone();
  80.             if (ret) {
  81.                 //获取第一条(最早的一条)
  82.                 if (message_data.length > 0) {
  83.                     var _lastid = message_data[0].messageId;
  84.                     // 调取环信聊天消息接口
  85.                     fnMessageFromDB(api.pageParam.conversationid, api.pageParam.type, true, _lastid);
  86.                 }
  87.             } else {
  88.                 toast("APICloud环信DEMO:" + err.msg);
  89.             }
  90.         });
  91.     }

  92.     // 加载数据
  93.     function fnLoadMessageFromDB(_ret, _loadMore) {
  94.         if (_ret.messages.length == 0) {
  95.             toast("没有更多了");
  96.         }
  97.         // 对数据进行渲染
  98.         fnUpdateMessageFromDB(_ret.messages, _loadMore);
  99.     }

  100.     //渲染数据
  101.     function fnUpdateMessageFromDB(data_, _loadMore) {
  102.         message_data = data_.concat(message_data);
  103.         if (_loadMore) {
  104.             // 加载数据
  105.             window.ListVue.chat = data_.concat(window.ListVue.chat);
  106.         } else {
  107.             //没有追加直接显示
  108.             window.ListVue.chat = data_;
  109.         };

  110.     };

  111.     //追加一条最新数据
  112.     function fnAddanew(data_, addanew_) {
  113.         //新旧数组拼接
  114.         message_data = data_.concat(message_data);
  115.         if (addanew_) {
  116.             console.log(JSON.stringify(data_))
  117.                 // 追加最新一条
  118.             window.ListVue.chat = window.ListVue.chat.concat(data_);
  119.             //设置页面到最顶部
  120.             resizeFrame(inputBarHeightsum);
  121.         }
  122.     }

复制代码

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":"太可怜了"}

}



  1. //监听消息事件
  2. function fnAddMessageListener() {
  3.      var easeChat = api.require('easeChat');
  4.      easeChat.addMessageListener({
  5.          name: 'receive'
  6.      }, function(ret) {
  7.          if (ret) {
  8.              //获取到消息刷新一下会话列表
  9.              fnGetAllConversations();
  10.              // 向聊天消息追加一条消息
  11.              api.execScript({
  12.                  name: 'chat',
  13.                  frameName: 'chat_frm',
  14.                  script: 'fnAddanew(' + JSON.stringify(ret.messages) + ',' + true + ');'
  15.              });
  16.          } else {
  17.              toast("APICloud环信DEMO:" + ret.msg);
  18.          }
  19.      });
  20. }

  21. // 获取环信会话列表
  22. function fnGetAllConversations() {
  23.      easeChat = api.require('easeChat');
  24.      easeChat.getAllConversations(function(ret) {
  25.          var _total = 0;
  26.          for (var i in ret.conversations) {
  27.              _total += ret.conversations[i].unreadMessagesCount;
  28.          }
  29.          //存储未读消息总数
  30.          $api.setStorage('unread_total', _total);
  31.          //刷新底部导航消息数
  32.          api.execScript({
  33.              name: 'main',
  34.              script: 'fnNewsBadge(' + _total + ');'
  35.          });
  36.          //刷新会话列表消息
  37.          api.execScript({
  38.              name: 'main',
  39.              frameName: 'message',
  40.              script: 'fnRequestList(' + JSON.stringify(ret) + ');'
  41.          });
  42.      });
  43. }

  44. //新建或获取一个会话 安卓同样支持
  45. function fnGetConversation(conversationId_, type_) {
  46.      var easeChat = api.require('easeChat');
  47.      easeChat.getConversation({
  48.          conversationId: conversationId_,
  49.          type: type_,
  50.          ifCreate: true
  51.      }, function(ret, err) {
  52.          if (ret.status) {
  53.              console.log(JSON.stringify(ret))
  54.          } else {
  55.              toast("APICloud环信DEMO:" + err.msg);
  56.          }
  57.      });
  58. }

  59. //获取聊天消息
  60. function fnMessageFromDB(_conversationid, _type, _loadMore, _lastid) {
  61.      var easeChat = api.require('easeChat');
  62.      easeChat.loadMessageFromDB({
  63.          conversationId: _conversationid,
  64.          type: _type,
  65.          startMsgId: _lastid,
  66.          pagesize: 6 //没加载6条信息
  67.      }, function(ret, err) {
  68.          console.log(JSON.stringify(ret))
  69.          if (ret) {
  70.              // 加载chat_frm页面fnLoadMessageFromDB聊天消息
  71.              fnLoadMessageFromDB(ret, _loadMore);
  72.          } else {
  73.              toast("APICloud环信DEMO:" + err.msg);
  74.          }
  75.      });
  76. }

  77. //点击消息已读
  78. function fnMarkAllMessagesAsRead(conversationId_, type_) {
  79.      var easeChat = api.require('easeChat');
  80.      easeChat.markAllMessagesAsRead({
  81.          conversationId: conversationId_,
  82.          type: type_
  83.      }, function(ret, err) {
  84.          if (ret.status) {
  85.              //  console.log(JSON.stringify(ret));
  86.          } else {
  87.              toast("APICloud环信DEMO:" + err.msg);
  88.          }
  89.      });
  90. }

  91. //将指定消息设置为已读
  92. function fnMarkMessageAsRead(conversationId_, type_, messageId_) {
  93.      var easeChat = api.require('easeChat');
  94.      easeChat.markMessageAsRead({
  95.          conversationId: conversationId_,
  96.          type: type_,
  97.          messageId: messageId_
  98.      }, function(ret, err) {
  99.          if (ret) {
  100.              // api.alert({ msg:JSON.stringify(ret)});
  101.          } else {
  102.              api.toast({
  103.                  msg: 'APICloud环信DEMO:' + JSON.stringify(err),
  104.                  duration: 2000,
  105.                  location: 'bottom'
  106.              });
  107.          }
  108.      });
  109. }

  110. //发送文本消息
  111. function fnEaseChatSendText(conversationId_, chatType_, text_, from_, to_) {
  112.      var easeChat = api.require('easeChat');
  113.      easeChat.sendText({
  114.          conversationId: conversationId_, //此字段为会话id一开始可以对话可以为空
  115.          chatType: chatType_, //会话类型chat:单聊会话 groupChat:群聊会话 chatRoom:聊天室会话
  116.          text: text_, //发送的消息内容
  117.          from: from_, //发送方当前登录账号
  118.          to: to_, //接受方
  119.          ext: {} // //JSON 对象;消息扩展,Key值类型必须是NSString, Value值类型必须是NSString或者 NSNumber类型的 BOOL, int, unsigned in, long long, double
  120.      }, function(ret, err) {
  121.          console.log(JSON.stringify(ret))
  122.          if (ret.status) {
  123.              //  刷新一下首页列表消息
  124.              fnGetAllConversations();
  125.              // 向聊天消息追加一条消息
  126.              api.execScript({
  127.                  name: 'chat',
  128.                  frameName: 'chat_frm',
  129.                  script: 'fnAddanew(' + JSON.stringify([ret.message]) + ',' + true + ');'
  130.              });
  131.              //将指定消息设置为已读
  132.              fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
  133.          } else {
  134.              toast("APICloud环信DEMO:" + err.msg);
  135.          }
  136.      });
  137. }
  138. 复制代码
复制代码


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+';
        }
    }





本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2018-11-19 19:47:05 |
本帖最后由 Mr.ZhouHeng 于 2018-11-20 20:53 编辑

沙发   

修复一些bug  增加了发送文本消息,消除最新消息数 11月20日;
easeChat.js  前端其他文件代码自行下载研究环信接口此块需要注意
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":"太可怜了"}}}

  1. //监听消息事件
  2. function fnAddMessageListener() {
  3.      var easeChat = api.require('easeChat');
  4.      easeChat.addMessageListener({
  5.          name: 'receive'
  6.      }, function(ret) {
  7.          if (ret) {
  8.              //获取到消息刷新一下会话列表
  9.              fnGetAllConversations();
  10.              // 向聊天消息追加一条消息
  11.              api.execScript({
  12.                  name: 'chat',
  13.                  frameName: 'chat_frm',
  14.                  script: 'fnAddanew(' + JSON.stringify(ret.messages) + ',' + true + ');'
  15.              });
  16.          } else {
  17.              toast("APICloud环信DEMO:" + ret.msg);
  18.          }
  19.      });
  20. }

  21. //发送文本消息
  22. function fnEaseChatSendText(conversationId_, chatType_, text_, from_, to_) {
  23.      var easeChat = api.require('easeChat');
  24.      easeChat.sendText({
  25.          conversationId: conversationId_, //此字段为会话id一开始可以对话可以为空
  26.          chatType: chatType_, //会话类型chat:单聊会话 groupChat:群聊会话 chatRoom:聊天室会话
  27.          text: text_, //发送的消息内容
  28.          from: from_, //发送方当前登录账号
  29.          to: to_, //接受方
  30.          ext: {} // //JSON 对象;消息扩展,Key值类型必须是NSString, Value值类型必须是NSString或者 NSNumber类型的 BOOL, int, unsigned in, long long, double
  31.      }, function(ret, err) {
  32.          console.log(JSON.stringify(ret))
  33.          if (ret.status) {
  34.              //  刷新一下首页列表消息
  35.              fnGetAllConversations();
  36.              // 向聊天消息追加一条消息
  37.              api.execScript({
  38.                  name: 'chat',
  39.                  frameName: 'chat_frm',
  40.                  script: 'fnAddanew(' + JSON.stringify([ret.message]) + ',' + true + ');'
  41.              });
  42.              //将指定消息设置为已读
  43.              fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
  44.          } else {
  45.              toast("APICloud环信DEMO:" + err.msg);
  46.          }
  47.      });
  48. }
复制代码






微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

转正司机

UID:134779

主题:
27
帖子:
196
云币:
571
发表于 2018-11-19 19:56:51 |

驾校小白

UID:679905

主题:
11
帖子:
42
云币:
28
发表于 2018-11-20 17:04:08 |
滑动删除没有效果,然后有个疑问,滑动取消发送应该怎么实现,因为就算是执行了move_out监听,但press_cancel也还是会执行。

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2018-11-20 20:14:43 |
本帖最后由 Mr.ZhouHeng 于 2018-11-20 20:16 编辑
..12121 发表于 2018-11-20 17:04
滑动删除没有效果,然后有个疑问,滑动取消发送应该怎么实现,因为就算是执行了move_out监听,但press_canc ...

代码已经更新从新下载,删除跟置顶我只是做了静态了  数据并没有去删除置顶留下的点击的情况,后续会更新 代码已经从新更新!修复一些bug  增加了发送文本消息,消除最新消息数
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2018-11-26 18:48:59 |
..12121 发表于 2018-11-20 17:04
滑动删除没有效果,然后有个疑问,滑动取消发送应该怎么实现,因为就算是执行了move_out监听,但press_canc ...

if (isShow) {
                    fnStopsendAudio(); //暂停录音并且发送
                    isShow = false; //回到初始状态
                }


需要定义一下  代码里面有 如果看到在这个还不懂的话你去总贴下载最新源码  设置一个开关
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
0
帖子:
9
云币:
0
发表于 2018-12-16 21:37:43 |
设置一个开关

驾校小白

UID:634165

主题:
2
帖子:
32
云币:
16
发表于 2019-2-26 14:31:52 |
谢谢分享 学习中

新手上路

UID:766088

主题:
47
帖子:
105
云币:
135
发表于 2019-3-16 19:34:31 |
添加环信的模块编译自定义loader怎么安装完打开直接闪退黑屏

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-3-18 09:24:58 |
cccc12138 发表于 2019-3-16 19:34
添加环信的模块编译自定义loader怎么安装完打开直接闪退黑屏

看总贴
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表