apicloud apicloud

注册
查看: 5524|回复: 25

[案例源码] (七)环信 easeChat模块demo发送图片

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

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

[案例源码] (七)环信 easeChat模块demo发送图片

5524 25 | 发表于 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. }
复制代码



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

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

主题:
4
帖子:
24
云币:
55
发表于 2019-2-17 21:47:58 |
赞一个

驾校小白

UID:726502

主题:
4
帖子:
16
云币:
38
发表于 2019-2-25 22:21:09 |
即时通信也太难了吧 想哭啊    跟着你的正确的代码 都调不出来 报了很多错  好崩溃 啊

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

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

 楼主| 发表于 2019-2-26 10:30:13 |
Liszter 发表于 2019-2-25 22:21
即时通信也太难了吧 想哭啊    跟着你的正确的代码 都调不出来 报了很多错  好崩溃 啊
...

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

驾校小白

UID:634165

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

驾校小白

UID:679905

主题:
11
帖子:
42
云币:
28
发表于 2019-3-2 10:14:07 |
根据你的代码,我再自定义loader的时候测试没问题,可是打包成测试包就发送调用历史接口无法使用的问; 其他接口都能正常使用;

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

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

 楼主| 发表于 2019-3-4 09:13:13 |
..12121 发表于 2019-3-2 10:14
根据你的代码,我再自定义loader的时候测试没问题,可是打包成测试包就发送调用历史接口无法使用的问; 其 ...

历史接口是什么接口没看懂
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

老司机

UID:673413

主题:
175
帖子:
12671
云币:
5646

圣诞节

发表于 2019-3-4 18:51:27 |
感谢分享

主题:
4
帖子:
24
云币:
55
发表于 2019-3-6 11:06:48 |
感谢分享

主题:
0
帖子:
7
云币:
2
发表于 2019-3-19 10:56:31 |

感谢分享
123下一页
您需要登录后才可以回帖 登录 | 立即注册

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