rong_cloud_h5_ui

功能描述

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

依赖的模块

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

快速使用

    section class="aui-chat" id="chat_message_body" style="margin-top:50px;">
        <div class="aui-chat-header"><a id="user_msg_time">暂无消息</a></div>
        <div class="app-chat-data-list" id="chat_message_html">
            <div v-cloak v-for="(vo,index) in list">
                <div v-if="user_id != vo.user_id">
                    <div class="app-chat-data-list-left-msg">
                        <div class="app-chat-data-list-left-msg-l"><img :src="vo.head_portrait"></div>
                        <div class="app-chat-data-list-left-msg-r">
                            <div v-if="vo.msg_type == 'RC:TxtMsg'">
                                <i style="top:25px;"><img src="./image/msg_l.png"></i>
                                <p v-html="vo.user_msg"></p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:VcMsg'">
                                <i style="top:25px;"><img src="./image/msg_l.png"></i>
                                  <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">
                                      <img src="./image/yuyin_left.png">
                                      <a v-if="vo.read_state!='1'"></a>
                                      <b style="text-align: left;">{{vo.duration}}"</b>
                                  </p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
                                 <p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
                            </div>

                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="app-chat-data-list-right-msg">
                        <div class="app-chat-data-list-right-msg-l"><img :src="vo.head_portrait"></div>
                        <div class="app-chat-data-list-right-msg-r">

                            <div v-if="vo.msg_type == 'RC:TxtMsg'">
                                <i style="top:25px;"><img src="./image/msg_r.png"></i>
                                <p v-html="vo.user_msg"></p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:VcMsg'">
                                <i style="top:25px;"><img src="./image/msg_r.png"></i>
                                  <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">
                                      <img src="./image/yuyin_right.png">
                                      <a v-if="vo.read_state!='1'"></a>
                                      <b style="text-align: right; right:0px;left:-24px;">{{vo.duration}}"</b>
                                  </p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
                                 <p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <div class="app-chat-open-mai-box" id="start_del_mai">
        <div class="app-chat-open-mai-data">
            <div class="app-chat-open-mai">
                <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>
                <p>手指上滑,取消发送</p>
            </div>
        </div>
    </div>

    <div class="app-chat-open-mai-box"  id="end_del_mai">
        <div class="app-chat-open-mai-data">
            <div class="app-chat-open-mai">
                <h2><img style="width:58px;height:58px; margin-left:46px;" src="./image/del_mai.png"></h2>
                <p><a style="background:#863935; height:20px; line-height:20px; border-radius:4px; color:#fff; padding:0px 6px;">松开手指,取消发送</a></p>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    apiready = function(){

        // 注意, 用户id 和 token 仅供演示,实际项目需要使用者跟进实情配置真实的参数
        // 当前用户id 
        var get_user_id     = '47';
        var get_user_head_portrait = './image/user_1.png';

        // 目标用户id
        var target_user_id     = '1';
        var target_user_head_portrait = './image/user_2.png';

        var user_token     = 'plNA3XDOITrSRvZP24L5AWRmf7MNMXtPsXk+1SycgW4E+nRgH0bCuw9Dw8WjkkiYgYb+EtD8QOWRQ1191DdP+Hx6BIY37Lbt';

        var chat_message_html = new Vue({
              el: '#chat_message_html',
              data: {
                  user_id:get_user_id,
                list: [{
                    message_id:1,
                    user_id:target_user_id,
                    user_name:'',
                    head_portrait:'./image/user_2.png',
                    user_msg:'你好,此模块有哪些功能!',
                    user_image:'',
                    image_url:'',
                    user_video:'',
                    duration:'',
                    msg_type:'RC:TxtMsg',
                    read_state:1,
                },{
                    message_id:1,
                    user_id:get_user_id,
                    user_name:'',
                    head_portrait:'./image/user_1.png',
                    user_msg:'你好,该模块需要集成 rongCloudIM 模块 和 UIChatBox模块 + imageBrowser模块,支持语音+图片+表情文字的聊天窗口',
                    user_image:'',
                    image_url:'',
                    user_video:'',
                    duration:'',
                    msg_type:'RC:TxtMsg',
                    read_state:1,
                }]
              },
             methods:{
                 video_click:function(event){
                     var message_id = $api.attr(event.target,'message_id');
                     var video_src = $api.attr(event.target,'video_src');
                     var video_type = $api.attr(event.target,'video_type');

                     $api.attr($api.dom('.yuyin_left img'),'src','./image/yuyin_left.png');
                     $api.attr($api.dom('.yuyin_right img'),'src','./image/yuyin_right.png');
                     api.stopPlay();
                     if(video_src){
                         $api.attr($api.first(event.target,'img'),'src','./image/yuyin_'+video_type+'_gif.gif');
                        api.startPlay({
                            path:video_src
                        }, function(ret, err) {
                            $api.attr($api.first(event.target,'img'),'src','./image/yuyin_'+video_type+'.png');
                        });
                     }else{
                         $api.attr(event.target,'src','./image/icon/yuyin_'+$api.attr($api.closest(event.target, 'p'),'video_type')+'_gif.gif');
                        api.startPlay({
                            path:$api.attr($api.closest(event.target, 'p'),'video_src')
                        }, function(ret, err) {
                            $api.attr(event.target,'src','./image/yuyin_'+$api.attr($api.closest(event.target, 'p'),'video_type')+'.png');
                        });
                     }
                    var rong = api.require('rongCloudIM');
                    rong.setMessageReceivedStatus({
                        messageId: message_id,
                        receivedStatus: 'LISTENED'
                    }, function(ret, err) {
                    });
                    $api.css($api.dom(event.target,'a'),'display:none');
                 },
                 image_click:function(event){
                     var image_src = $api.attr(event.target,'image_src');
                     if(image_src){
                        var imageBrowser = api.require('imageBrowser');
                        imageBrowser.openImages({
                            imageUrls: [image_src],
                            showList:false,
                            activeIndex:0
                        });
                     }
                 }
             }
        });

        // 初始化聊天室
        var rong         = api.require('rongCloudIM');
        rong.init(function(ret, err) {

        });

        rong.configurationParameter({
            showNickname:true
        });

        rong.setConnectionStatusListener(function(ret, err) {
        });


        rong.connect({
            token: user_token
        },function(ret, err) {
            if (ret.status == 'success'){
            }
        });

        // 已读消息
        rong.clearMessagesUnreadStatus({
            conversationType: 'PRIVATE',
            targetId:get_user_id
        }, function(ret, err) {
        });

        var UIChatBox = api.require('UIChatBox');
        UIChatBox.open({
            placeholder: '',
            maxRows: 4,
            emotionPath: 'widget://libs/img/emotion',
            texts: {
                recordBtn: {
                    normalTitle: '按住说话',
                    activeTitle: '松开结束'
                },
                sendBtn: {
                    title: '发送'
                }
            },
            styles: {
                topDivider:{
                    width:0,
                    color:'#E6E6E6'
                },
                inputBar: {
                    borderColor: '#A5ABAF',
                    bgColor: '#FFFFFF'
                },
                inputBox: {
                    borderColor: '#A5ABAF',
                    bgColor: '#FFFFFF'
                },
                emotionBtn: {
                    normalImg: 'widget://libs/img/emotion/chat01.png'
                },
                extrasBtn: {
                    normalImg: 'widget://libs/img/emotion/chat02.png'
                },
                keyboardBtn: {
                    normalImg: 'widget://libs/img/emotion/chat03.png'
                },
                speechBtn: {
                    normalImg: 'widget://libs/img/emotion/mai.png'
                },
                recordBtn: {
                    normalBg: 'widget://image/icon/mai_bj.png',
                    activeBg: 'widget://image/icon/mai_bj_ok.png',
                    color: '#000',
                    size: 14
                },
                indicator: {
                    target: 'both',
                    color: '#c4c4c4',
                    activeColor: '#9e9e9e'
                },
                sendBtn: {
                    titleColor: '#ffffff',
                    bg: '#DD4338',
                    activeBg: '#DD4338',
                    titleSize: 14
                }
            },
            extras: {
                titleSize: 10,
                titleColor: '#a3a3a3',
                btns: [{
                    title: '图片',
                    normalImg: 'widget://libs/img/emotion/image_a.png',
                    activeImg: 'widget://libs/img/emotion/image_b.png'
                }, {
                    title: '拍照',
                    normalImg: 'widget://libs/img/emotion/shooting_a.png',
                    activeImg: 'widget://libs/img/emotion/shooting_b.png'
                }]
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.eventType=='send'){
                    if(ret.msg){
                        send_rong('text',target_user_id,ret.msg,0);
                    }
                    UIChatBox.closeKeyboard();
                    UIChatBox.closeBoard();
                }else if(ret.click==true){
                    if(ret.index==0 && ret.eventType=='clickExtras'){
                        api.getPicture({
                            sourceType: 'album',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            destinationType: 'url',
                            allowEdit: false,
                            quality: 90,
                            saveToPhotoAlbum: false
                        }, function(ret, err) {
                            if (ret) {
                                if(ret.data){
                                    send_rong('image',target_user_id,ret.data,0);
                                    UIChatBox.closeBoard();
                                }
                            }
                        });
                    }else if(ret.index==1 && ret.eventType=='clickExtras'){
                        api.getPicture({
                            sourceType: 'camera',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            destinationType: 'url',
                            allowEdit: false,
                            quality: 90,
                            saveToPhotoAlbum: false
                        }, function(ret, err) {
                            if (ret) {
                                if(ret.data){
                                    send_rong('image',target_user_id,ret.data,0);
                                    UIChatBox.closeBoard();
                                }
                            }
                        });
                    }
                }else if(ret.eventType=='show'){
                    $api.css($api.dom('#chat_message_body'),'height:'+(api.frameHeight - ret.inputBarHeight - 55)+'px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;');
                }
            }
        });

        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'press'
        }, function(ret, err) {
            if (ret) {
                $api.css($api.dom('#start_del_mai'),'display:block');
                // 开始录音
                $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.gif');

                var time = new Date().getTime();
                api.startRecord({
                    path: 'fs://lemon/chat/chat_record_'+time+'.amr'
                });

            }
        });


        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'move_out'
        }, function(ret, err) {
            if (ret) {
                $api.css($api.dom('#start_del_mai'),'display:none');
                $api.css($api.dom('#end_del_mai'),'display:block');

                api.stopRecord(function(ret, err) {});
                $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
            }
        });

        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'move_out_cancel'
        }, function(ret, err) {
            if (ret) {
                $api.css($api.dom('#start_del_mai'),'display:none');
                $api.css($api.dom('#end_del_mai'),'display:none');

                api.stopRecord(function(ret, err) {});
                $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
            }
        });

        UIChatBox.addEventListener({
            target: 'recordBtn',
            name: 'press_cancel'
        }, function(ret, err) {
            if (ret) {
                $api.css($api.dom('#start_del_mai'),'display:none');
                $api.css($api.dom('#end_del_mai'),'display:none');
                // 发送语音
                api.stopRecord(function(ret, err) {
                    if (ret) {
                        var path = ret.path;
                        var duration = ret.duration;

                        send_rong('video',target_user_id,path,duration);
                        $api.attr($api.dom('#chat_yin'),'src','./image/chat_yin.png');
                    }
                });

            }
        });


        // 统一接收融云会话加
        api.addEventListener({
            name: 'get_rong_message_data'
        }, function(rrr, eee) {

            var ret = rrr.value;

            if(ret.result.message.conversationType=='PRIVATE' && ret.result.message.senderUserId==target_user_id){

                $lemon.css('#user_msg_time','display:none');

                // 接受消息
                var rong = api.require('rongCloudIM');
                rong.clearMessagesUnreadStatus({
                    conversationType: 'PRIVATE',
                    targetId:target_user_id
                }, function(ret, err) {
                });

                if(api.systemType=='ios'){
                    if(ret.result.message.receivedStatus=='LISTENED'){
                        var read_state = 1;
                    }else{
                        var read_state = 0;
                    }
                }else{
                    if(ret.result.message.isListened==true){
                        var read_state = 1;
                    }else{
                        var read_state = 0;
                    }
                }
                if(ret.result.message.objectName=='RC:TxtMsg'){
                    chat_message_html.list.push({
                        message_id:ret.result.message.messageId,
                        user_id:target_user_id,
                        user_name:'',
                        head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
                        user_msg:emotion_replace(ret.result.message.content.text),
                        user_image:'',
                        image_url:'',
                        user_video:'',
                        duration:'',
                        msg_type:'RC:TxtMsg',
                        read_state:ret.result.message.receivedStatus,
                    });
                }else if(ret.result.message.objectName=='RC:VcMsg'){
                    chat_message_html.list.push({
                        message_id:ret.result.message.messageId,
                        user_id:target_user_id,
                        user_name:'',
                        head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
                        user_msg:'',
                        user_image:'',
                        image_url:'',
                        user_video:ret.result.message.content.voicePath,
                        duration:ret.result.message.content.duration,
                        msg_type:'RC:VcMsg',
                        read_state:ret.result.message.receivedStatus,
                    });
                }else if(ret.result.message.objectName=='RC:ImgMsg'){

                    chat_message_html.list.push({
                        message_id:ret.result.message.messageId,
                        user_id:target_user_id,
                        user_name:'',
                        head_portrait:$lemon.db_select_user(target_user_id,'user_img'),
                        user_msg:'',
                        user_image:ret.result.message.content.thumbPath,
                        image_url:ret.result.message.content.imageUrl,
                        user_video:'',
                        duration:'',
                        msg_type:'RC:ImgMsg',
                        read_state:ret.result.message.receivedStatus,
                    });
                }

                setTimeout(function(){
                    $api.css($api.dom('#chat_message_body'),'display:block');
                    var div = document.getElementById('chat_message_body');
                       div.scrollTop = div.scrollHeight;
                   },300);
            }

        });

        // 监听键盘
        $api.setStorage('s_frameHeight',api.frameHeight);

        UIChatBox.addEventListener({
            target: 'inputBar',
            name: 'move'
        }, function(ret, err) {
            if (ret) {
                var win_height = ret.panelHeight;
                $api.css($api.dom('#chat_message_body'),'height:'+(api.frameHeight - ret.inputBarHeight - 55)+'px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;');

                setTimeout(function(){
                    var div = document.getElementById('chat_message_body');
                       div.scrollTop = div.scrollHeight;
                   },100);
            }
        });

        function send_rong(type,target_id,target_msg,duration){
            var rong = api.require('rongCloudIM');
            if(type=='text'){
                rong.sendTextMessage({
                    conversationType: 'PRIVATE',
                    targetId: target_user_id,
                    text: target_msg,
                    extra:'{userInfo:{nickName:"自定义用户名称"}}'
                }, function(ret, err) {
                    if(ret.status=='success'){
                        var data = ret.result.message;
                        if(data){
                            chat_message_html.list.push({
                                message_id:data.messageId,
                                user_id:get_user_id,
                                user_name:'',
                                head_portrait:get_user_head_portrait,
                                user_msg:emotion_replace(target_msg),
                                user_image:'',
                                image_url:'',
                                user_video:'',
                                duration:'',
                                msg_type:'RC:TxtMsg',
                                read_state:'READ',
                            });

                            setTimeout(function(){
                                var div = document.getElementById('chat_message_body');
                                   div.scrollTop = div.scrollHeight;
                               },300);
                        }
                    }
                });

            }else if(type=='video'){

                rong.sendVoiceMessage({
                    conversationType: 'PRIVATE',
                    targetId: target_user_id,
                    voicePath: target_msg,
                    duration: duration,
                    extra:'{userInfo:{nickName:"自定义用户名称"}}'
                }, function(ret, err) {
                    if(ret.status=='success'){

                        rong.setMessageReceivedStatus({
                            messageId:ret.result.message.messageId,
                            receivedStatus: 'LISTENED'
                        }, function(ret, err) {
                        });

                        var data = ret.result.message;
                        chat_message_html.list.push({
                            message_id:data.messageId,
                            user_id:get_user_id,
                            user_name:'',
                            head_portrait:get_user_head_portrait,
                            user_msg:'',
                            user_image:'',
                            image_url:'',
                            user_video:target_msg,
                            duration:duration,
                            msg_type:'RC:VcMsg',
                            read_state:'READ',
                        });

                        setTimeout(function(){
                            var div = document.getElementById('chat_message_body');
                               div.scrollTop = div.scrollHeight;
                           },300);
                    }
                });

            }else if(type=='image'){

                rong.sendImageMessage({
                    conversationType: 'PRIVATE',
                    targetId: target_user_id,
                    imagePath:target_msg,
                    extra:'{userInfo:{nickName:"自定义用户名称"}}'
                }, function(ret, err) {
                    if(ret.status=='success'){
                        var data = ret.result.message;
                        chat_message_html.list.push({
                            message_id:data.messageId,
                            user_id:get_user_id,
                            user_name:'',
                            head_portrait:get_user_head_portrait,
                            user_msg:'',
                            user_image:target_msg,
                            image_url:target_msg,
                            user_video:'',
                            duration:'',
                            msg_type:'RC:ImgMsg',
                            read_state:'READ',
                        });

                        setTimeout(function(){
                            var div = document.getElementById('chat_message_body');
                               div.scrollTop = div.scrollHeight;
                           },300);
                    }
                });

            }

        }

        // 表情字典替换
        function emotion_replace(str){
            var face = {
                    "[微笑]":"./libs/img/emotion/Expression_1.png",
                    "[撇嘴]":"./libs/img/emotion/Expression_2.png",
                    "[色]":"./libs/img/emotion/Expression_3.png",
                    "[发呆]":"./libs/img/emotion/Expression_4.png",
                    "[得意]":"./libs/img/emotion/Expression_5.png",
                    "[流泪]":"./libs/img/emotion/Expression_6.png",
                    "[害羞]":"./libs/img/emotion/Expression_7.png",
                    "[闭嘴]":"./libs/img/emotion/Expression_8.png",
                    "[睡]":"./libs/img/emotion/Expression_9.png",
                    "[大哭]":"./libs/img/emotion/Expression_10.png",
                    "[尴尬]":"./libs/img/emotion/Expression_11.png",
                    "[发怒]":"./libs/img/emotion/Expression_12.png",
                    "[调皮]":"./libs/img/emotion/Expression_13.png",
                    "[呲牙]":"./libs/img/emotion/Expression_14.png",
                    "[惊讶]":"./libs/img/emotion/Expression_15.png",
                    "[难过]":"./libs/img/emotion/Expression_16.png",
                    "[酷]":"./libs/img/emotion/Expression_17.png",
                    "[冷汗]":"./libs/img/emotion/Expression_18.png",
                    "[抓狂]":"./libs/img/emotion/Expression_19.png",
                    "[吐]":"./libs/img/emotion/Expression_20.png",
                    "[偷笑]":"./libs/img/emotion/Expression_21.png",
                    "[愉快]":"./libs/img/emotion/Expression_22.png",
                    "[白眼]":"./libs/img/emotion/Expression_23.png",
                    "[傲慢]":"./libs/img/emotion/Expression_24.png",
                    "[饥饿]":"./libs/img/emotion/Expression_25.png",
                    "[困]":"./libs/img/emotion/Expression_26.png",
                    "[恐惧]":"./libs/img/emotion/Expression_27.png",
                    "[流汗]":"./libs/img/emotion/Expression_28.png",
                    "[憨笑]":"./libs/img/emotion/Expression_29.png",
                    "[悠闲]":"./libs/img/emotion/Expression_30.png",
                    "[奋斗]":"./libs/img/emotion/Expression_31.png",
                    "[咒骂]":"./libs/img/emotion/Expression_32.png",
                    "[疑问]":"./libs/img/emotion/Expression_33.png",
                    "[嘘]":"./libs/img/emotion/Expression_34.png",
                    "[晕]":"./libs/img/emotion/Expression_35.png",
                    "[疯了]":"./libs/img/emotion/Expression_36.png",
                    "[衰]":"./libs/img/emotion/Expression_37.png",
                    "[骷髅]":"./libs/img/emotion/Expression_38.png",
                    "[敲打]":"./libs/img/emotion/Expression_39.png",
                    "[再见]":"./libs/img/emotion/Expression_40.png",
                    "[擦汗]":"./libs/img/emotion/Expression_41.png",
                    "[抠鼻]":"./libs/img/emotion/Expression_42.png",
                    "[鼓掌]":"./libs/img/emotion/Expression_43.png",
                    "[糗大了]":"./libs/img/emotion/Expression_44.png",
                    "[坏笑]":"./libs/img/emotion/Expression_45.png",
                    "[左哼哼]":"./libs/img/emotion/Expression_46.png",
                    "[右哼哼]":"./libs/img/emotion/Expression_47.png",
                    "[哈欠]":"./libs/img/emotion/Expression_48.png",
                    "[鄙视]":"./libs/img/emotion/Expression_49.png",
                    "[委屈]":"./libs/img/emotion/Expression_50.png",
                    "[快哭了]":"./libs/img/emotion/Expression_51.png",
                    "[阴险]":"./libs/img/emotion/Expression_52.png",
                    "[亲亲]":"./libs/img/emotion/Expression_53.png",
                    "[吓]":"./libs/img/emotion/Expression_54.png",
                    "[可怜]":"./libs/img/emotion/Expression_55.png",
                    "[菜刀]":"./libs/img/emotion/Expression_56.png",
                    "[西瓜]":"./libs/img/emotion/Expression_57.png",
                    "[啤酒]":"./libs/img/emotion/Expression_58.png",
                    "[篮球]":"./libs/img/emotion/Expression_59.png",
                    "[乒乓]":"./libs/img/emotion/Expression_60.png",
                    "[咖啡]":"./libs/img/emotion/Expression_61.png",
                    "[饭]":"./libs/img/emotion/Expression_62.png",
                    "[猪头]":"./libs/img/emotion/Expression_63.png",
                    "[玫瑰]":"./libs/img/emotion/Expression_64.png",
                    "[凋谢]":"./libs/img/emotion/Expression_65.png",
                    "[嘴唇]":"./libs/img/emotion/Expression_66.png",
                    "[爱心]":"./libs/img/emotion/Expression_67.png",
                    "[心碎]":"./libs/img/emotion/Expression_68.png",
                    "[蛋糕]":"./libs/img/emotion/Expression_69.png",
                    "[闪电]":"./libs/img/emotion/Expression_70.png",
                    "[炸弹]":"./libs/img/emotion/Expression_71.png",
                    "[刀]":"./libs/img/emotion/Expression_72.png",
                    "[足球]":"./libs/img/emotion/Expression_73.png",
                    "[瓢虫]":"./libs/img/emotion/Expression_74.png",
                    "[便便]":"./libs/img/emotion/Expression_75.png",
                    "[月亮]":"./libs/img/emotion/Expression_76.png",
                    "[太阳]":"./libs/img/emotion/Expression_77.png",
                    "[礼物]":"./libs/img/emotion/Expression_78.png",
                    "[拥抱]":"./libs/img/emotion/Expression_79.png",
                    "[强]":"./libs/img/emotion/Expression_80.png",
                    "[弱]":"./libs/img/emotion/Expression_81.png",
                    "[握手]":"./libs/img/emotion/Expression_82.png",
                    "[胜利]":"./libs/img/emotion/Expression_83.png",
                    "[抱拳]":"./libs/img/emotion/Expression_84.png",
                    "[勾引]":"./libs/img/emotion/Expression_85.png",
                    "[拳头]":"./libs/img/emotion/Expression_86.png",
                    "[差劲]":"./libs/img/emotion/Expression_87.png",
                    "[爱你]":"./libs/img/emotion/Expression_88.png",
                    "[NO]":"./libs/img/emotion/Expression_89.png",
                    "[OK]":"./libs/img/emotion/Expression_90.png",
                    "[爱情]":"./libs/img/emotion/Expression_91.png",
                    "[飞吻]":"./libs/img/emotion/Expression_92.png",
                    "[跳跳]":"./libs/img/emotion/Expression_93.png",
                    "[发抖]":"./libs/img/emotion/Expression_94.png",
                    "[怄火]":"./libs/img/emotion/Expression_95.png",
                    "[转圈]":"./libs/img/emotion/Expression_96.png",
                    "[磕头]":"./libs/img/emotion/Expression_97.png",
                    "[回头]":"./libs/img/emotion/Expression_98.png",
                    "[跳绳]":"./libs/img/emotion/Expression_99.png",
                    "[投降]":"./libs/img/emotion/Expression_100.png",
                    "[激动]":"./libs/img/emotion/Expression_101.png",
                    "[街舞]":"./libs/img/emotion/Expression_102.png",
                    "[献吻]":"./libs/img/emotion/Expression_103.png",
                    "[左太极]":"./libs/img/emotion/Expression_104.png",
                    "[右太极]":"./libs/img/emotion/Expression_105.png",
                    "[gif动画]":"./libs/img/emotion/Expression_106.png",
                };

            var reg =  /\[.+?\]/g;
            if(str){
                str = str.replace(reg,function(a,b){ 
                    if(face[a]){
                        return '<img style="width:18px; height:18px;vertical-align:text-bottom" src="'+face[a]+'">';  
                    }else{
                        return str;
                    }
                });
                return str;
            }else{
                return str;
            }

        }

    };
    </script>

特别说明

注意,该模块必须使用融云配置好相关参数

该模块需要集成 rongCloudIM 模块 和 UIChatBox模块 + imageBrowser模块,支持语音+图片+表情文字的聊天窗口,使用时注意添加以上模块