rong_cloud_h5_ui

功能描述

1、该模块具有发送语音，发送表情，发送图片等功能的 融云聊天UI 2、该模块需要集成 rongCloudIM 模块 和 UIChatBox模块 + imageBrowser模块,支持语音+图片+表情文字的聊天窗口,使用时注意添加以上模块

依赖的模块

  1. vue.js,rongCloudIM模块,UIChatBox模块,imageBrowser模块

快速使用

  1.     section class="aui-chat" id="chat_message_body" style="margin-top:50px;">
  2.         <div class="aui-chat-header"><a id="user_msg_time">暂无消息</a></div>
  3.         <div class="app-chat-data-list" id="chat_message_html">
  4.             <div v-cloak v-for="(vo,index) in list">
  5.                 <div v-if="user_id != vo.user_id">
  6.                     <div class="app-chat-data-list-left-msg">
  7.                         <div class="app-chat-data-list-left-msg-l"><img :src="vo.head_portrait"></div>
  8.                         <div class="app-chat-data-list-left-msg-r">
  9.                             <div v-if="vo.msg_type == 'RC:TxtMsg'">
  10.                                 <i style="top:25px;"><img src="./image/msg_l.png"></i>
  11.                                 <p v-html="vo.user_msg"></p>
  12.                             </div>
  13.                             <div v-else-if="vo.msg_type == 'RC:VcMsg'">
  14.                                 <i style="top:25px;"><img src="./image/msg_l.png"></i>
  15.                                   <p class="yuyin yuyin_left" @click="video_click" v-duration="vo.duration" :video_src="vo.user_video" :message_id="vo.message_id" video_type="left">
  16.                                       <img src="./image/yuyin_left.png">
  17.                                       <a v-if="vo.read_state!='1'"></a>
  18.                                       <b style="text-align: left;">{{vo.duration}}"</b>
  19.                                   </p>
  20.                             </div>
  21.                             <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
  22.                                  <p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
  23.                             </div>
  25.                         </div>
  26.                     </div>
  27.                 </div>
  28.                 <div v-else>
  29.                     <div class="app-chat-data-list-right-msg">
  30.                         <div class="app-chat-data-list-right-msg-l"><img :src="vo.head_portrait"></div>
  31.                         <div class="app-chat-data-list-right-msg-r">
  33.                             <div v-if="vo.msg_type == 'RC:TxtMsg'">
  34.                                 <i style="top:25px;"><img src="./image/msg_r.png"></i>
  35.                                 <p v-html="vo.user_msg"></p>
  36.                             </div>
  37.                             <div v-else-if="vo.msg_type == 'RC:VcMsg'">
  38.                                 <i style="top:25px;"><img src="./image/msg_r.png"></i>
  39.                                   <p class="yuyin yuyin_right" @click="video_click" v-duration="vo.duration" :video_src="vo.user_video" :message_id="vo.message_id" video_type="right">
  40.                                       <img src="./image/yuyin_right.png">
  41.                                       <a v-if="vo.read_state!='1'"></a>
  42.                                       <b style="text-align: right; right:0px;left:-24px;">{{vo.duration}}"</b>
  43.                                   </p>
  44.                             </div>
  45.                             <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
  46.                                  <p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
  47.                             </div>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  54.         </div>
  55.     </section>
  57.     <div class="app-chat-open-mai-box" id="start_del_mai">
  58.         <div class="app-chat-open-mai-data">
  59.             <div class="app-chat-open-mai">
  60.                 <h2><img style="width:58px;height:58px; margin-left:26px;" src="./image/chat_mai.png"><img id="chat_yin" style="width:40px;height:40px; margin-top:18px;" src="./image/chat_yin.png"></h2>
  61.                 <p>手指上滑，取消发送</p>
  62.             </div>
  63.         </div>
  64.     </div>
  66.     <div class="app-chat-open-mai-box"  id="end_del_mai">
  67.         <div class="app-chat-open-mai-data">
  68.             <div class="app-chat-open-mai">
  69.                 <h2><img style="width:58px;height:58px; margin-left:46px;" src="./image/del_mai.png"></h2>
  70.                 <p><a style="background:#863935; height:20px; line-height:20px; border-radius:4px; color:#fff; padding:0px 6px;">松开手指，取消发送</a></p>
  71.             </div>
  72.         </div>
  73.     </div>
  75.     <script type="text/javascript">
  76.     apiready = function(){
  78.         // 注意， 用户id 和 token 仅供演示，实际项目需要使用者跟进实情配置真实的参数
  79.         // 当前用户id 
  80.         var get_user_id     = '47';
  81.         var get_user_head_portrait = './image/user_1.png';
  83.         // 目标用户id
  84.         var target_user_id     = '1';
  85.         var target_user_head_portrait = './image/user_2.png';
  87.         var user_token     = 'plNA3XDOITrSRvZP24L5AWRmf7MNMXtPsXk+1SycgW4E+nRgH0bCuw9Dw8WjkkiYgYb+EtD8QOWRQ1191DdP+Hx6BIY37Lbt';
  89.         var chat_message_html = new Vue({
  90.               el: '#chat_message_html',
  91.               data: {
  92.                   user_id:get_user_id,
  93.                 list: [{
  94.                     message_id:1,
  95.                     user_id:target_user_id,
  96.                     user_name:'',
  97.                     head_portrait:'./image/user_2.png',
  98.                     user_msg:'你好,此模块有哪些功能!',
  99.                     user_image:'',
  100.                     image_url:'',
  101.                     user_video:'',
  102.                     duration:'',
  103.                     msg_type:'RC:TxtMsg',
  104.                     read_state:1,
  105.                 },{
  106.                     message_id:1,
  107.                     user_id:get_user_id,
  108.                     user_name:'',
  109.                     head_portrait:'./image/user_1.png',
  110.                     user_msg:'你好,该模块需要集成 rongCloudIM 模块 和 UIChatBox模块 + imageBrowser模块,支持语音+图片+表情文字的聊天窗口',
  111.                     user_image:'',
  112.                     image_url:'',
  113.                     user_video:'',
  114.                     duration:'',
  115.                     msg_type:'RC:TxtMsg',
  116.                     read_state:1,
  117.                 }]
  118.               },
  119.              methods:{
  120.                  video_click:function(event){
  121.                      var message_id = $api.attr(event.target,'message_id');
  122.                      var video_src = $api.attr(event.target,'video_src');
  123.                      var video_type = $api.attr(event.target,'video_type');
  125.                      $api.attr($api.dom('.yuyin_left img'),'src','./image/yuyin_left.png');
  126.                      $api.attr($api.dom('.yuyin_right img'),'src','./image/yuyin_right.png');
  127.                      api.stopPlay();
  128.                      if(video_src){
  129.                          $api.attr($api.first(event.target,'img'),'src','./image/yuyin_'+video_type+'_gif.gif');
  130.                         api.startPlay({
  131.                             path:video_src
  132.                         }, function(ret, err) {
  133.                             $api.attr($api.first(event.target,'img'),'src','./image/yuyin_'+video_type+'.png');
  134.                         });
  135.                      }else{
  136.                          $api.attr(event.target,'src','./image/icon/yuyin_'+$api.attr($api.closest(event.target, 'p'),'video_type')+'_gif.gif');
  137.                         api.startPlay({
  138.                             path:$api.attr($api.closest(event.target, 'p'),'video_src')
  139.                         }, function(ret, err) {
  140.                             $api.attr(event.target,'src','./image/yuyin_'+$api.attr($api.closest(event.target, 'p'),'video_type')+'.png');
  141.                         });
  142.                      }
  143.                     var rong = api.require('rongCloudIM');
  144.                     rong.setMessageReceivedStatus({
  145.                         messageId: message_id,
  146.                         receivedStatus: 'LISTENED'
  147.                     }, function(ret, err) {
  148.                     });
  149.                     $api.css($api.dom(event.target,'a'),'display:none');
  150.                  },
  151.                  image_click:function(event){
  152.                      var image_src = $api.attr(event.target,'image_src');
  153.                      if(image_src){
  154.                         var imageBrowser = api.require('imageBrowser');
  155.                         imageBrowser.openImages({
  156.                             imageUrls: [image_src],
  157.                             showList:false,
  158.                             activeIndex:0
  159.                         });
  160.                      }
  161.                  }
  162.              }
  163.         });
  165.         // 初始化聊天室
  166.         var rong         = api.require('rongCloudIM');
  167.         rong.init(function(ret, err) {
  169.         });
  171.         rong.configurationParameter({
  172.             showNickname:true
  173.         });
  175.         rong.setConnectionStatusListener(function(ret, err) {
  176.         });
  179.         rong.connect({
  180.             token: user_token
  181.         },function(ret, err) {
  182.             if (ret.status == 'success'){
  183.             }
  184.         });
  186.         // 已读消息
  187.         rong.clearMessagesUnreadStatus({
  188.             conversationType: 'PRIVATE',
  189.             targetId:get_user_id
  190.         }, function(ret, err) {
  191.         });
  193.         var UIChatBox = api.require('UIChatBox');
  194.         UIChatBox.open({
  195.             placeholder: '',
  196.             maxRows: 4,
  197.             emotionPath: 'widget://libs/img/emotion',
  198.             texts: {
  199.                 recordBtn: {
  200.                     normalTitle: '按住说话',
  201.                     activeTitle: '松开结束'
  202.                 },
  203.                 sendBtn: {
  204.                     title: '发送'
  205.                 }
  206.             },
  207.             styles: {
  208.                 topDivider:{
  209.                     width:0,
  210.                     color:'#E6E6E6'
  211.                 },
  212.                 inputBar: {
  213.                     borderColor: '#A5ABAF',
  214.                     bgColor: '#FFFFFF'
  215.                 },
  216.                 inputBox: {
  217.                     borderColor: '#A5ABAF',
  218.                     bgColor: '#FFFFFF'
  219.                 },
  220.                 emotionBtn: {
  221.                     normalImg: 'widget://libs/img/emotion/chat01.png'
  222.                 },
  223.                 extrasBtn: {
  224.                     normalImg: 'widget://libs/img/emotion/chat02.png'
  225.                 },
  226.                 keyboardBtn: {
  227.                     normalImg: 'widget://libs/img/emotion/chat03.png'
  228.                 },
  229.                 speechBtn: {
  230.                     normalImg: 'widget://libs/img/emotion/mai.png'
  231.                 },
  232.                 recordBtn: {
  233.                     normalBg: 'widget://image/icon/mai_bj.png',
  234.                     activeBg: 'widget://image/icon/mai_bj_ok.png',
  235.                     color: '#000',
  236.                     size: 14
  237.                 },
  238.                 indicator: {
  239.                     target: 'both',
  240.                     color: '#c4c4c4',
  241.                     activeColor: '#9e9e9e'
  242.                 },
  243.                 sendBtn: {
  244.                     titleColor: '#ffffff',
  245.                     bg: '#DD4338',
  246.                     activeBg: '#DD4338',
  247.                     titleSize: 14
  248.                 }
  249.             },
  250.             extras: {
  251.                 titleSize: 10,
  252.                 titleColor: '#a3a3a3',
  253.                 btns: [{
  254.                     title: '图片',
  255.                     normalImg: 'widget://libs/img/emotion/image_a.png',
  256.                     activeImg: 'widget://libs/img/emotion/image_b.png'
  257.                 }, {
  258.                     title: '拍照',
  259.                     normalImg: 'widget://libs/img/emotion/shooting_a.png',
  260.                     activeImg: 'widget://libs/img/emotion/shooting_b.png'
  261.                 }]
  262.             }
  263.         }, function(ret, err) {
  264.             if (ret) {
  265.                 if(ret.eventType=='send'){
  266.                     if(ret.msg){
  267.                         send_rong('text',target_user_id,ret.msg,0);
  268.                     }
  269.                     UIChatBox.closeKeyboard();
  270.                     UIChatBox.closeBoard();
  271.                 }else if(ret.click==true){
  272.                     if(ret.index==0 && ret.eventType=='clickExtras'){
  273.                         api.getPicture({
  274.                             sourceType: 'album',
  275.                             encodingType: 'jpg',
  276.                             mediaValue: 'pic',
  277.                             destinationType: 'url',
  278.                             allowEdit: false,
  279.                             quality: 90,
  280.                             saveToPhotoAlbum: false
  281.                         }, function(ret, err) {
  282.                             if (ret) {
  283.                                 if(ret.data){
  284.                                     send_rong('image',target_user_id,ret.data,0);
  285.                                     UIChatBox.closeBoard();
  286.                                 }
  287.                             }
  288.                         });
  289.                     }else if(ret.index==1 && ret.eventType=='clickExtras'){
  290.                         api.getPicture({
  291.                             sourceType: 'camera',
  292.                             encodingType: 'jpg',
  293.                             mediaValue: 'pic',
  294.                             destinationType: 'url',
  295.                             allowEdit: false,
  296.                             quality: 90,
  297.                             saveToPhotoAlbum: false
  298.                         }, function(ret, err) {
  299.                             if (ret) {
  300.                                 if(ret.data){
  301.                                     send_rong('image',target_user_id,ret.data,0);
  302.                                     UIChatBox.closeBoard();
  303.                                 }
  304.                             }
  305.                         });
  306.                     }
  307.                 }else if(ret.eventType=='show'){
  308.                     $api.css($api.dom('#chat_message_body'),'height:'+(api.frameHeight - ret.inputBarHeight - 55)+'px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;');
  309.                 }
  310.             }
  311.         });
  313.         UIChatBox.addEventListener({
  314.             target: 'recordBtn',
  315.             name: 'press'
  316.         }, function(ret, err) {
  317.             if (ret) {
  318.                 $api.css($api.dom('#start_del_mai'),'display:block');
  319.                 // 开始录音
  320.                 $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.gif');
  322.                 var time = new Date().getTime();
  323.                 api.startRecord({
  324.                     path: 'fs://lemon/chat/chat_record_'+time+'.amr'
  325.                 });
  327.             }
  328.         });
  331.         UIChatBox.addEventListener({
  332.             target: 'recordBtn',
  333.             name: 'move_out'
  334.         }, function(ret, err) {
  335.             if (ret) {
  336.                 $api.css($api.dom('#start_del_mai'),'display:none');
  337.                 $api.css($api.dom('#end_del_mai'),'display:block');
  339.                 api.stopRecord(function(ret, err) {});
  340.                 $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
  341.             }
  342.         });
  344.         UIChatBox.addEventListener({
  345.             target: 'recordBtn',
  346.             name: 'move_out_cancel'
  347.         }, function(ret, err) {
  348.             if (ret) {
  349.                 $api.css($api.dom('#start_del_mai'),'display:none');
  350.                 $api.css($api.dom('#end_del_mai'),'display:none');
  352.                 api.stopRecord(function(ret, err) {});
  353.                 $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
  354.             }
  355.         });
  357.         UIChatBox.addEventListener({
  358.             target: 'recordBtn',
  359.             name: 'press_cancel'
  360.         }, function(ret, err) {
  361.             if (ret) {
  362.                 $api.css($api.dom('#start_del_mai'),'display:none');
  363.                 $api.css($api.dom('#end_del_mai'),'display:none');
  364.                 // 发送语音
  365.                 api.stopRecord(function(ret, err) {
  366.                     if (ret) {
  367.                         var path = ret.path;
  368.                         var duration = ret.duration;
  370.                         send_rong('video',target_user_id,path,duration);
  371.                         $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
  372.                     }
  373.                 });
  375.             }
  376.         });
  379.         // 统一接收融云会话加
  380.         api.addEventListener({
  381.             name: 'get_rong_message_data'
  382.         }, function(rrr, eee) {
  384.             var ret = rrr.value;
  386.             if(ret.result.message.conversationType=='PRIVATE' && ret.result.message.senderUserId==target_user_id){
  388.                 $lemon.css('#user_msg_time','display:none');
  390.                 // 接受消息
  391.                 var rong = api.require('rongCloudIM');
  392.                 rong.clearMessagesUnreadStatus({
  393.                     conversationType: 'PRIVATE',
  394.                     targetId:target_user_id
  395.                 }, function(ret, err) {
  396.                 });
  398.                 if(api.systemType=='ios'){
  399.                     if(ret.result.message.receivedStatus=='LISTENED'){
  400.                         var read_state = 1;
  401.                     }else{
  402.                         var read_state = 0;
  403.                     }
  404.                 }else{
  405.                     if(ret.result.message.isListened==true){
  406.                         var read_state = 1;
  407.                     }else{
  408.                         var read_state = 0;
  409.                     }
  410.                 }
  411.                 if(ret.result.message.objectName=='RC:TxtMsg'){
  412.                     chat_message_html.list.push({
  413.                         message_id:ret.result.message.messageId,
  414.                         user_id:target_user_id,
  415.                         user_name:'',
  416.                         head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
  417.                         user_msg:emotion_replace(ret.result.message.content.text),
  418.                         user_image:'',
  419.                         image_url:'',
  420.                         user_video:'',
  421.                         duration:'',
  422.                         msg_type:'RC:TxtMsg',
  423.                         read_state:ret.result.message.receivedStatus,
  424.                     });
  425.                 }else if(ret.result.message.objectName=='RC:VcMsg'){
  426.                     chat_message_html.list.push({
  427.                         message_id:ret.result.message.messageId,
  428.                         user_id:target_user_id,
  429.                         user_name:'',
  430.                         head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
  431.                         user_msg:'',
  432.                         user_image:'',
  433.                         image_url:'',
  434.                         user_video:ret.result.message.content.voicePath,
  435.                         duration:ret.result.message.content.duration,
  436.                         msg_type:'RC:VcMsg',
  437.                         read_state:ret.result.message.receivedStatus,
  438.                     });
  439.                 }else if(ret.result.message.objectName=='RC:ImgMsg'){
  441.                     chat_message_html.list.push({
  442.                         message_id:ret.result.message.messageId,
  443.                         user_id:target_user_id,
  444.                         user_name:'',
  445.                         head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
  446.                         user_msg:'',
  447.                         user_image:ret.result.message.content.thumbPath,
  448.                         image_url:ret.result.message.content.imageUrl,
  449.                         user_video:'',
  450.                         duration:'',
  451.                         msg_type:'RC:ImgMsg',
  452.                         read_state:ret.result.message.receivedStatus,
  453.                     });
  454.                 }
  456.                 setTimeout(function(){
  457.                     $api.css($api.dom('#chat_message_body'),'display:block');
  458.                     var div = document.getElementById('chat_message_body');
  459.                        div.scrollTop = div.scrollHeight;
  460.                    },300);
  461.             }
  463.         });
  465.         // 监听键盘
  466.         $api.setStorage('s_frameHeight',api.frameHeight);
  468.         UIChatBox.addEventListener({
  469.             target: 'inputBar',
  470.             name: 'move'
  471.         }, function(ret, err) {
  472.             if (ret) {
  473.                 var win_height = ret.panelHeight;
  474.                 $api.css($api.dom('#chat_message_body'),'height:'+(api.frameHeight - ret.inputBarHeight - 55)+'px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;');
  476.                 setTimeout(function(){
  477.                     var div = document.getElementById('chat_message_body');
  478.                        div.scrollTop = div.scrollHeight;
  479.                    },100);
  480.             }
  481.         });
  483.         function send_rong(type,target_id,target_msg,duration){
  484.             var rong = api.require('rongCloudIM');
  485.             if(type=='text'){
  486.                 rong.sendTextMessage({
  487.                     conversationType: 'PRIVATE',
  488.                     targetId: target_user_id,
  489.                     text: target_msg,
  490.                     extra:'{userInfo:{nickName:"自定义用户名称"}}'
  491.                 }, function(ret, err) {
  492.                     if(ret.status=='success'){
  493.                         var data = ret.result.message;
  494.                         if(data){
  495.                             chat_message_html.list.push({
  496.                                 message_id:data.messageId,
  497.                                 user_id:get_user_id,
  498.                                 user_name:'',
  499.                                 head_portrait:get_user_head_portrait,
  500.                                 user_msg:emotion_replace(target_msg),
  501.                                 user_image:'',
  502.                                 image_url:'',
  503.                                 user_video:'',
  504.                                 duration:'',
  505.                                 msg_type:'RC:TxtMsg',
  506.                                 read_state:'READ',
  507.                             });
  509.                             setTimeout(function(){
  510.                                 var div = document.getElementById('chat_message_body');
  511.                                    div.scrollTop = div.scrollHeight;
  512.                                },300);
  513.                         }
  514.                     }
  515.                 });
  517.             }else if(type=='video'){
  519.                 rong.sendVoiceMessage({
  520.                     conversationType: 'PRIVATE',
  521.                     targetId: target_user_id,
  522.                     voicePath: target_msg,
  523.                     duration: duration,
  524.                     extra:'{userInfo:{nickName:"自定义用户名称"}}'
  525.                 }, function(ret, err) {
  526.                     if(ret.status=='success'){
  528.                         rong.setMessageReceivedStatus({
  529.                             messageId:ret.result.message.messageId,
  530.                             receivedStatus: 'LISTENED'
  531.                         }, function(ret, err) {
  532.                         });
  534.                         var data = ret.result.message;
  535.                         chat_message_html.list.push({
  536.                             message_id:data.messageId,
  537.                             user_id:get_user_id,
  538.                             user_name:'',
  539.                             head_portrait:get_user_head_portrait,
  540.                             user_msg:'',
  541.                             user_image:'',
  542.                             image_url:'',
  543.                             user_video:target_msg,
  544.                             duration:duration,
  545.                             msg_type:'RC:VcMsg',
  546.                             read_state:'READ',
  547.                         });
  549.                         setTimeout(function(){
  550.                             var div = document.getElementById('chat_message_body');
  551.                                div.scrollTop = div.scrollHeight;
  552.                            },300);
  553.                     }
  554.                 });
  556.             }else if(type=='image'){
  558.                 rong.sendImageMessage({
  559.                     conversationType: 'PRIVATE',
  560.                     targetId: target_user_id,
  561.                     imagePath:target_msg,
  562.                     extra:'{userInfo:{nickName:"自定义用户名称"}}'
  563.                 }, function(ret, err) {
  564.                     if(ret.status=='success'){
  565.                         var data = ret.result.message;
  566.                         chat_message_html.list.push({
  567.                             message_id:data.messageId,
  568.                             user_id:get_user_id,
  569.                             user_name:'',
  570.                             head_portrait:get_user_head_portrait,
  571.                             user_msg:'',
  572.                             user_image:target_msg,
  573.                             image_url:target_msg,
  574.                             user_video:'',
  575.                             duration:'',
  576.                             msg_type:'RC:ImgMsg',
  577.                             read_state:'READ',
  578.                         });
  580.                         setTimeout(function(){
  581.                             var div = document.getElementById('chat_message_body');
  582.                                div.scrollTop = div.scrollHeight;
  583.                            },300);
  584.                     }
  585.                 });
  587.             }
  589.         }
  591.         // 表情字典替换
  592.         function emotion_replace(str){
  593.             var face = {
  594.                     "[微笑]":"./libs/img/emotion/Expression_1.png",
  595.                     "[撇嘴]":"./libs/img/emotion/Expression_2.png",
  596.                     "[色]":"./libs/img/emotion/Expression_3.png",
  597.                     "[发呆]":"./libs/img/emotion/Expression_4.png",
  598.                     "[得意]":"./libs/img/emotion/Expression_5.png",
  599.                     "[流泪]":"./libs/img/emotion/Expression_6.png",
  600.                     "[害羞]":"./libs/img/emotion/Expression_7.png",
  601.                     "[闭嘴]":"./libs/img/emotion/Expression_8.png",
  602.                     "[睡]":"./libs/img/emotion/Expression_9.png",
  603.                     "[大哭]":"./libs/img/emotion/Expression_10.png",
  604.                     "[尴尬]":"./libs/img/emotion/Expression_11.png",
  605.                     "[发怒]":"./libs/img/emotion/Expression_12.png",
  606.                     "[调皮]":"./libs/img/emotion/Expression_13.png",
  607.                     "[呲牙]":"./libs/img/emotion/Expression_14.png",
  608.                     "[惊讶]":"./libs/img/emotion/Expression_15.png",
  609.                     "[难过]":"./libs/img/emotion/Expression_16.png",
  610.                     "[酷]":"./libs/img/emotion/Expression_17.png",
  611.                     "[冷汗]":"./libs/img/emotion/Expression_18.png",
  612.                     "[抓狂]":"./libs/img/emotion/Expression_19.png",
  613.                     "[吐]":"./libs/img/emotion/Expression_20.png",
  614.                     "[偷笑]":"./libs/img/emotion/Expression_21.png",
  615.                     "[愉快]":"./libs/img/emotion/Expression_22.png",
  616.                     "[白眼]":"./libs/img/emotion/Expression_23.png",
  617.                     "[傲慢]":"./libs/img/emotion/Expression_24.png",
  618.                     "[饥饿]":"./libs/img/emotion/Expression_25.png",
  619.                     "[困]":"./libs/img/emotion/Expression_26.png",
  620.                     "[恐惧]":"./libs/img/emotion/Expression_27.png",
  621.                     "[流汗]":"./libs/img/emotion/Expression_28.png",
  622.                     "[憨笑]":"./libs/img/emotion/Expression_29.png",
  623.                     "[悠闲]":"./libs/img/emotion/Expression_30.png",
  624.                     "[奋斗]":"./libs/img/emotion/Expression_31.png",
  625.                     "[咒骂]":"./libs/img/emotion/Expression_32.png",
  626.                     "[疑问]":"./libs/img/emotion/Expression_33.png",
  627.                     "[嘘]":"./libs/img/emotion/Expression_34.png",
  628.                     "[晕]":"./libs/img/emotion/Expression_35.png",
  629.                     "[疯了]":"./libs/img/emotion/Expression_36.png",
  630.                     "[衰]":"./libs/img/emotion/Expression_37.png",
  631.                     "[骷髅]":"./libs/img/emotion/Expression_38.png",
  632.                     "[敲打]":"./libs/img/emotion/Expression_39.png",
  633.                     "[再见]":"./libs/img/emotion/Expression_40.png",
  634.                     "[擦汗]":"./libs/img/emotion/Expression_41.png",
  635.                     "[抠鼻]":"./libs/img/emotion/Expression_42.png",
  636.                     "[鼓掌]":"./libs/img/emotion/Expression_43.png",
  637.                     "[糗大了]":"./libs/img/emotion/Expression_44.png",
  638.                     "[坏笑]":"./libs/img/emotion/Expression_45.png",
  639.                     "[左哼哼]":"./libs/img/emotion/Expression_46.png",
  640.                     "[右哼哼]":"./libs/img/emotion/Expression_47.png",
  641.                     "[哈欠]":"./libs/img/emotion/Expression_48.png",
  642.                     "[鄙视]":"./libs/img/emotion/Expression_49.png",
  643.                     "[委屈]":"./libs/img/emotion/Expression_50.png",
  644.                     "[快哭了]":"./libs/img/emotion/Expression_51.png",
  645.                     "[阴险]":"./libs/img/emotion/Expression_52.png",
  646.                     "[亲亲]":"./libs/img/emotion/Expression_53.png",
  647.                     "[吓]":"./libs/img/emotion/Expression_54.png",
  648.                     "[可怜]":"./libs/img/emotion/Expression_55.png",
  649.                     "[菜刀]":"./libs/img/emotion/Expression_56.png",
  650.                     "[西瓜]":"./libs/img/emotion/Expression_57.png",
  651.                     "[啤酒]":"./libs/img/emotion/Expression_58.png",
  652.                     "[篮球]":"./libs/img/emotion/Expression_59.png",
  653.                     "[乒乓]":"./libs/img/emotion/Expression_60.png",
  654.                     "[咖啡]":"./libs/img/emotion/Expression_61.png",
  655.                     "[饭]":"./libs/img/emotion/Expression_62.png",
  656.                     "[猪头]":"./libs/img/emotion/Expression_63.png",
  657.                     "[玫瑰]":"./libs/img/emotion/Expression_64.png",
  658.                     "[凋谢]":"./libs/img/emotion/Expression_65.png",
  659.                     "[嘴唇]":"./libs/img/emotion/Expression_66.png",
  660.                     "[爱心]":"./libs/img/emotion/Expression_67.png",
  661.                     "[心碎]":"./libs/img/emotion/Expression_68.png",
  662.                     "[蛋糕]":"./libs/img/emotion/Expression_69.png",
  663.                     "[闪电]":"./libs/img/emotion/Expression_70.png",
  664.                     "[炸弹]":"./libs/img/emotion/Expression_71.png",
  665.                     "[刀]":"./libs/img/emotion/Expression_72.png",
  666.                     "[足球]":"./libs/img/emotion/Expression_73.png",
  667.                     "[瓢虫]":"./libs/img/emotion/Expression_74.png",
  668.                     "[便便]":"./libs/img/emotion/Expression_75.png",
  669.                     "[月亮]":"./libs/img/emotion/Expression_76.png",
  670.                     "[太阳]":"./libs/img/emotion/Expression_77.png",
  671.                     "[礼物]":"./libs/img/emotion/Expression_78.png",
  672.                     "[拥抱]":"./libs/img/emotion/Expression_79.png",
  673.                     "[强]":"./libs/img/emotion/Expression_80.png",
  674.                     "[弱]":"./libs/img/emotion/Expression_81.png",
  675.                     "[握手]":"./libs/img/emotion/Expression_82.png",
  676.                     "[胜利]":"./libs/img/emotion/Expression_83.png",
  677.                     "[抱拳]":"./libs/img/emotion/Expression_84.png",
  678.                     "[勾引]":"./libs/img/emotion/Expression_85.png",
  679.                     "[拳头]":"./libs/img/emotion/Expression_86.png",
  680.                     "[差劲]":"./libs/img/emotion/Expression_87.png",
  681.                     "[爱你]":"./libs/img/emotion/Expression_88.png",
  682.                     "[NO]":"./libs/img/emotion/Expression_89.png",
  683.                     "[OK]":"./libs/img/emotion/Expression_90.png",
  684.                     "[爱情]":"./libs/img/emotion/Expression_91.png",
  685.                     "[飞吻]":"./libs/img/emotion/Expression_92.png",
  686.                     "[跳跳]":"./libs/img/emotion/Expression_93.png",
  687.                     "[发抖]":"./libs/img/emotion/Expression_94.png",
  688.                     "[怄火]":"./libs/img/emotion/Expression_95.png",
  689.                     "[转圈]":"./libs/img/emotion/Expression_96.png",
  690.                     "[磕头]":"./libs/img/emotion/Expression_97.png",
  691.                     "[回头]":"./libs/img/emotion/Expression_98.png",
  692.                     "[跳绳]":"./libs/img/emotion/Expression_99.png",
  693.                     "[投降]":"./libs/img/emotion/Expression_100.png",
  694.                     "[激动]":"./libs/img/emotion/Expression_101.png",
  695.                     "[街舞]":"./libs/img/emotion/Expression_102.png",
  696.                     "[献吻]":"./libs/img/emotion/Expression_103.png",
  697.                     "[左太极]":"./libs/img/emotion/Expression_104.png",
  698.                     "[右太极]":"./libs/img/emotion/Expression_105.png",
  699.                     "[gif动画]":"./libs/img/emotion/Expression_106.png",
  700.                 };
  702.             var reg =  /\[.+?\]/g;
  703.             if(str){
  704.                 str = str.replace(reg,function(a,b){ 
  705.                     if(face[a]){
  706.                         return '<img style="width:18px; height:18px;vertical-align:text-bottom" src="'+face[a]+'">';  
  707.                     }else{
  708.                         return str;
  709.                     }
  710.                 });
  711.                 return str;
  712.             }else{
  713.                 return str;
  714.             }
  716.         }
  718.     };
  719.     </script>

特别说明

  1. 注意，该模块必须使用融云配置好相关参数
  3. 该模块需要集成 rongCloudIM 模块 和 UIChatBox模块 + imageBrowser模块,支持语音+图片+表情文字的聊天窗口,使用时注意添加以上模块