请选择 进入手机版 | 继续访问电脑版
123下一页
返回列表 发新帖

(七)环信 easeChat模块demo发送图片

[复制链接]
Mr.ZhouHeng 发表于 2019-2-16 16:48:27
本帖最后由 Mr.ZhouHeng 于 2019-9-3 15:28 编辑



环信 easeChat模块demo(发送图片





这帖我就暂时不弄源码,因为好些人问道我这块什么时候出,或者在发送图片遇到问题。我才先放出来
结合我之前总贴的发送语音下面下载的源码自己把代码放进去,
我把主要代码贴出来:
(因为此处有些地方我还想完善一下所以暂时不打包源码)
  1. .chat .chat-left .chat-contentimg {
  2.             background: rgba(243, 243, 243, 0);
  3.             float: left;
  4.             left: 0.5rem;
  5.             margin-left: .2rem;
  6.         }

  7.         .chat .chat-left .chat-contentimg img {
  8.             height: 3.08rem;
  9.             border-radius: 0.14rem;
  10.         }
  11.         .chat .chat-right .chat-contentimg {
  12.             background: rgba(243, 243, 243, 0);
  13.             float: right;
  14.             right: 0.5rem;
  15.             margin-right: .2rem;
  16.         }

  17.         .chat .chat-right .chat-contentimg img{
  18.             border-radius: 0.14rem;
  19.             height: 3.09rem;
  20.         }


  21. <div class="chat-status" v-if="chats.direction!='send'&&chats.body.type=='voice'">
  22.                     <!-- 语音是否已读 -->
  23.                     <div class="badge" v-if="chats.isReadAcked==false"></div>
  24.                     <div class="times">{{chats.body.duration}}``</div>
  25.                 </div>
  26.                 <!-- 图片消息 放在发送语音zip解压出来的chat_frm.html文件-->
  27.                 <div class="chat-contentimg" v-if="chats.body.type=='image'" @click="fnOpenImg(chats.body.remotePath)">
  28.                     <img :src="chats.body.remotePath" />
  29.                 </div>



  30.   //文本表情转化
  31.                 translateText: function(text) {
  32.                     if (text == '' || text == undefined) {
  33.                         return;
  34.                     }
  35.                     msg = text;
  36.                     var emotionObj = emotion;
  37.                     var regx = /\[(.*?)\]/gm;
  38.                     var translateMSg = text.replace(regx, function(math) {
  39.                         var imgSrc = emotionObj[math];
  40.                         if (!imgSrc) {
  41.                             return math;
  42.                         }
  43.                         var img = '<img src="../../res/img/emotion/' + imgSrc + '.png" class="emotion">'
  44.                         return img;
  45.                     })
  46.                     console.log(translateMSg)
  47.                     return translateMSg;
  48.                 },

  49.         //图片浏览器放在表情转化下面  我这是初步写有个思绪就是把所有图片单独组成一个数据 然后传数组 弄成跟微信可以滑动浏览所有聊天里面的图片具体这块需要完善  这块我只是单独浏览点击的图片  目前这块你们可以使用模块(photoBrowser)我这个是单独写的目前还没有完善
  50.                 fnOpenImg:function(img){
  51.                   var prompt = {
  52.                       winName: "chat_win",
  53.                       frameName: "chat_frm",
  54.                       title: "图片浏览",
  55.                       msg: img,
  56.                       clickName: "fnOpenClose",
  57.                       right: "",
  58.                   }
  59.                   var name = "popup";
  60.                   popup(prompt, name);
  61.                 }



  62. //UIChatBox模块里面增加发送图片点击打开图片的
  63. if (ret.eventType === "send") {
  64.                     // 发送文本
  65.                     fnSendText(ret.msg);
  66.                 }

  67. //在发送文本下面
  68.                 if (ret.eventType === "clickExtras" && ret.index === 0) {
  69.                     // 发送图片
  70.                     // toast("发送图片:待开发");
  71.                     fnSendImage();
  72.                 }



  73.   //发送图片消息
  74.     function fnSendImage() {
  75.         api.getPicture({
  76.             sourceType: 'album',
  77.             encodingType: 'jpg',
  78.             mediaValue: 'pic',
  79.             destinationType: 'url',
  80.             allowEdit: true,
  81.             // quality: 50,
  82.             // targetWidth: 100,
  83.             // targetHeight: 100,
  84.             saveToPhotoAlbum: false
  85.         }, function(ret, err) {
  86.             if (ret) {
  87.                 fnEaseChatSendImage(api.pageParam.conversationid, api.pageParam.type, ret.data, $api.getStorage('user'), api.pageParam.conversationid);
  88.             } else {
  89.                 toast(err.msg);
  90.             }
  91.         });
  92.     }




  93. easeChat.js增加:

  94. // 发送图片消息
  95. function fnEaseChatSendImage(conversationId_, chatType_, path_, from_, to_) {
  96.      var easeChat = api.require('easeChat');
  97.      easeChat.sendImage({
  98.          conversationId: conversationId_, //此字段为会话id一开始可以对话可以为空
  99.          chatType: chatType_, //会话类型chat:单聊会话 groupChat:群聊会话 chatRoom:聊天室会话
  100.          path: path_, //发送的消息内容
  101.          from: from_, //发送方当前登录账号
  102.          to: to_, //接受方
  103.          ext: {} // //JSON 对象;消息扩展,Key值类型必须是NSString, Value值类型必须是NSString或者 NSNumber类型的 BOOL, int, unsigned in, long long, double
  104.      }, function(ret, err) {
  105.          if (ret) {
  106.              if (ret.status == true) {
  107.                  console.log(JSON.stringify(ret))
  108.                      // //  刷新一下首页列表消息
  109.                      fnGetAllConversations();
  110.                      // // 向聊天消息追加一条消息
  111.                      api.execScript({
  112.                          name: 'chat',
  113.                          frameName: 'chat_frm',
  114.                          script: 'fnAddanew(' + JSON.stringify([ret.message]) + ',' + true + ');'
  115.                      });
  116.                      // //将指定消息设置为已读
  117.                      fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
  118.              } else {
  119.                  toast("APICloud环信DEMO:消息发送失败请稍后再试");
  120.              }
  121.          } else {
  122.              toast("APICloud环信DEMO:" + err.msg);
  123.          }
  124.      });
  125. }
复制代码



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

X

25条回复

南屿北墙 驾校小白 55Y币
赞一个
Liszter 驾校小白 38Y币
即时通信也太难了吧 想哭啊    跟着你的正确的代码 都调不出来 报了很多错  好崩溃 啊
Mr.ZhouHeng 官方版主 12822Y币
Liszter 发表于 2019-2-25 22:21
即时通信也太难了吧 想哭啊    跟着你的正确的代码 都调不出来 报了很多错  好崩溃 啊
...

额有吗
lchniao 驾校小白 16Y币
谢谢分享 学习中
..12121 驾校小白 28Y币
根据你的代码,我再自定义loader的时候测试没问题,可是打包成测试包就发送调用历史接口无法使用的问; 其他接口都能正常使用;
Mr.ZhouHeng 官方版主 12822Y币
..12121 发表于 2019-3-2 10:14
根据你的代码,我再自定义loader的时候测试没问题,可是打包成测试包就发送调用历史接口无法使用的问; 其 ...

历史接口是什么接口没看懂
得呤 老司机 5646Y币
感谢分享
南屿北墙 驾校小白 55Y币
感谢分享
张小龙111 驾校小白 2Y币

感谢分享
123下一页
您需要登录后才可以回帖 登录

本版积分规则