該套代碼為從項目案例中提取的,可以直接拿去使用,主要包含了單聊及消息的處理。主要分三個頁面處理完成,入口首頁(index)、消息列表頁(message)、會話頁面(chat)
index.html 頁面(app入口頁面)
var rong; apiready=function(){ rong = api.require('rongCloud2'); //判斷用戶登錄成功后執行方法 rongCloud(); } function rongCloud(){ //初始化 init(); //消息的監聽,監聽到新消息后將消息廣播出去,在會話頁面監聽接收並判斷 setOnReceiveMessageListener(); //連接融雲服務器 connect(); //監聽獲取某一會話最新消息記錄 api.addEventListener({ name: 'getLatestMessages' }, function(ret){ if(ret && ret.value){ var value = ret.value; getLatestMessages(value.targetId,value.type); } }); //監聽獲取某一會話歷史消息記錄 api.addEventListener({ name: 'getHistoryMessages' }, function(ret){ if(ret && ret.value){ var value = ret.value; getHistoryMessages(value.targetId,value.type,value.oldestMessageId); } }); //監聽發送新消息,監聽完成后將消息再次廣播出去,列表級會話頁面監聽接收 api.addEventListener({ name:'sendMessage' },function(ret){ if(ret && ret.value){ var data = ret.value; //目標id,消息內容,消息類型 sendMessage(data.targetId,data.conversationType,data.objectName,data.message); } }) } //初始化融雲 function init(){ rong.init(function(ret, err){ }); } /** *全局消息監聽 *整個app項目中,所有的消息監聽事件都在此方法中完成,如果正在會話,監聽到消息后通過api.sendEvent方法廣播出去 */ function setOnReceiveMessageListener(){ rong.setOnReceiveMessageListener(function (ret, err) { if(ret){ //將監聽到的消息廣播出去,在會話頁面接收 api.sendEvent({ name: 'setOnReceiveMessageListener', extra: {result:ret.result} }); switch(ret.result.message.objectName){ //文字消息 case 'RC:TxtMsg': var notificationMessage = ret.result.message.content.text; break; //圖片消息 case 'RC:ImgMsg': var notificationMessage = '[圖片]'; break; //語音消息 case 'RC:VcMsg': var notificationMessage = '[語音]'; break; } } }) } /** *連接融雲服務器 *連接成功后使用getConversationList獲取會話列表 */ function connect(){ //根據本地用戶id,從服務器端獲取用戶融雲的token var token = $api.getStorage('rongCloudToken'); rong.connect({ token: ''+token+'' },function(ret, err){ if (ret.status == 'success'){ //連接成功后獲取會話列表 getConversationList(); } }); } //獲取會話列表 function getConversationList(){ rong.getConversationList(function (ret, err) { if(ret.status=='success'){ //廣播會話列表事件 api.sendEvent({ name: 'getConversationList', extra: {result:ret.result,status:ret.status} }); } }) } //獲取某一會話的最新消息記錄 function getLatestMessages(targetId,type){ rong.getLatestMessages({ conversationType: ''+type+'', targetId: ''+targetId+'', count: 20 }, function (ret, err) { if(ret.status=='success'){ //將獲得的歷史消息廣播出去,在會話頁面接收 api.sendEvent({ name: 'backLatestMessages', extra: {result:ret.result,status:ret.status} }); } }) } //獲取某一會話歷史消息記錄 function getHistoryMessages(targetId,type,oldestMessageId){ rong.getHistoryMessages({ conversationType: ''+type+'', targetId: ''+targetId+'', oldestMessageId: ''+oldestMessageId+'', count: 20 }, function (ret, err) { if(ret.status=='success'){ //將獲得的歷史消息廣播出去,在會話頁面接收 api.sendEvent({ name: 'backHistoryMessages', extra: {result:ret.result,status:ret.status} }); } }) } //發送消息 function sendMessage(targetId,conversationType,objectName,message){ switch(objectName){ //文字消息 case 'RC:TxtMsg': rong.sendTextMessage({ conversationType: ''+conversationType+'', targetId: ''+targetId+'', text: ''+message+'', extra: '' }, function (ret, err) { if (ret.status == 'prepare'){ //發送准備,廣播出去,在會話頁面監聽接收 api.sendEvent({ name: 'backSendMessage', extra: {result:ret.result} }); insertMessage(targetId,conversationType,objectName,ret.result); }else if (ret.status == 'success'){ //發送成功的處理 }else if (ret.status == 'error'){ //發送失敗的處理 //api.toast({ msg: err.code }); } }) break; //圖片消息 case 'RC:ImgMsg': rong.sendImageMessage({ conversationType: ''+conversationType+'', targetId: ''+targetId+'', imagePath: ''+message+'', extra: '' }, function (ret, err) { if (ret.status == 'prepare'){ //發送准備,廣播出去,在會話頁面監聽接收 api.sendEvent({ name: 'backSendMessage', extra: {result:ret.result} }); insertMessage(targetId,conversationType,objectName,ret.result); }else if (ret.status == 'progress'){ //廣播圖片的進度 }else if (ret.status == 'success'){ api.sendEvent({ name: 'backSendMessageSuccess', extra: {messageId:ret.result.message.messageId} }); }else if (ret.status == 'error'){ api.toast({ msg: err.code }); } }); break; //語音消息 case 'RC:VcMsg': rong.sendVoiceMessage({ conversationType: ''+conversationType+'', targetId: ''+targetId+'', voicePath: ''+message.path+'', duration: ''+message.duration+'', extra: '' }, function (ret, err) { if (ret.status == 'prepare'){ //發送准備,廣播出去,在會話頁面監聽接收 api.sendEvent({ name: 'backSendMessage', extra: {result:ret.result} }); insertMessage(targetId,conversationType,objectName,ret.result); }else if (ret.status == 'success'){ api.toast({ msg: ret.result.message.messageId }); } else if (ret.status == 'error'){ api.toast({ msg: err.code }); } } ); break; } }
消息列表頁核心代碼
HTML <div class="aui-content"> <ul class="aui-user-view" id="messageList"></ul> </div> JS核心代碼 apiready=function(){ //請求獲取會話列表 api.sendEvent({ name: 'requestConversationList' }); //監聽新消息 api.addEventListener({ name: 'setOnReceiveMessageListener' }, function(ret, err){ if(ret && ret.value){ var result = ret.value.result; if($api.byId("target-"+result.message.targetId)){ //如果存在更新消息內容 //此處也定義個id,更消息內容類型做個判斷 switch(result.message.objectName){ //文字消息 case 'RC:TxtMsg': $api.text($api.byId("targetMessage-"+result.message.targetId),result.message.content.text); break; //圖片消息 case 'RC:ImgMsg': $api.text($api.byId("targetMessage-"+result.message.targetId),"[圖片]"); break; //語音消息 case 'RC:VcMsg': $api.text($api.byId("targetMessage-"+result.message.targetId),"[語音]"); break; } //將當前消息容器移動到頂部 if(result.message.conversationType!='CUSTOMER_SERVICE' && $api.dom("#messageList > li")){ $api.byId("messageList").insertBefore($api.byId("target-"+result.message.targetId),$api.byId("messageList").childNodes[0]); } }else{ //如果不存在寫入 var html=''; if(result.message.conversationType=='CUSTOMER_SERVICE'){ }else if(result.message.conversationType=='PRIVATE'){ html += '<li class="aui-user-view-cell aui-img" id="target-'+result.message.targetId+'" tapmode onclick="openChat('+result.message.targetId+')">'; html += '<img class="aui-img-object aui-pull-left" src="../../image/noavatar.gif" id="avatar-'+result.message.targetId+'">'; html += '<div class="aui-img-body aui-arrow-right">' html += '<span id="realname-'+result.message.targetId+'"></span>'; //此處也定義個id,更消息內容類型做個判斷 switch(result.message.objectName){ //文字消息 case 'RC:TxtMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">'+result.message.content.text+'</p>'; break; //圖片消息 case 'RC:ImgMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">[圖片]</p>'; break; //語音消息 case 'RC:VcMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">[語音]</p>'; break; } html += '</div>'; html += '</li>'; $api.prepend($api.byId("messageList"),html); getUserInfo(result.message.targetId); } api.parseTapmode(); } } }); //監聽會話列表事件 getConversationList api.addEventListener({ name: 'getConversationList' }, function(ret, err){ if(ret && ret.value){ var status = ret.value.status; var result = ret.value.result; if(status=='success'){ //獲取成功后將消息內容插入至容器 var targetIds='', html='', messageList = result; for(var i in messageList){ if(messageList[i].conversationType=='CUSTOMER_SERVICE'){ $api.text($api.byId("targetMessage-"+messageList[i].targetId),messageList[i].latestMessage.text); }else if(messageList[i].conversationType=='PRIVATE'){ //組裝用戶id,批量獲取用戶信息 targetIds += messageList[i].targetId+','; //注意定義容器的id為消息目標id(targetId) html += '<li class="aui-user-view-cell aui-img" id="target-'+messageList[i].targetId+'" tapmode onclick="openChat('+messageList[i].targetId+')">'; html += '<img class="aui-img-object aui-pull-left" src="../image/noavatar.gif" id="avatar-'+messageList[i].targetId+'">'; html += '<div class="aui-img-body aui-arrow-right">' html += '<span id="realname-'+messageList[i].targetId+'">...</span>'; //此處也定義個id,更消息內容類型做個判斷 switch(messageList[i].objectName){ //文字消息 case 'RC:TxtMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">'+messageList[i].latestMessage.text+'</p>'; break; //圖片消息 case 'RC:ImgMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">[圖片]</p>'; break; //語音消息 case 'RC:VcMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+messageList[i].targetId+'">[語音]</p>'; break; } html += '</div>'; html += '</li>'; } } if(targetIds.length>0){ //去掉組裝完用戶id的最后符號 targetIds = targetIds.substring(0,targetIds.length-1); getUserInfos(targetIds); } $api.append($api.byId("messageList"),html); api.parseTapmode(); } } }) //監聽發送的新消息 api.addEventListener({ name: 'backSendMessage' }, function(ret){ if(ret && ret.value){ var result = ret.value.result; if($api.byId("targetMessage-"+result.message.targetId)){ switch(result.message.objectName){ //文字消息 case 'RC:TxtMsg': $api.text($api.byId("targetMessage-"+result.message.targetId),'我:'+result.message.content.text); break; //圖片消息 case 'RC:ImgMsg': $api.text($api.byId("targetMessage-"+result.message.targetId),'我:[圖片]'); break; //語音消息 case 'RC:VcMsg': $api.text($api.byId("targetMessage-"+result.message.targetId),'我:[語音]'); break; } if(result.message.conversationType!='CUSTOMER_SERVICE'){ $api.byId("messageList").insertBefore($api.byId("target-"+result.message.targetId),$api.byId("messageList").childNodes[0]); } }else{ //如果不存在寫入 var html=''; html += '<li class="aui-user-view-cell aui-img" id="target-'+result.message.targetId+'" tapmode onclick="openChat('+result.message.targetId+')">'; html += '<img class="aui-img-object aui-pull-left" src="../../image/noavatar.gif" id="avatar-'+result.message.targetId+'">'; html += '<div class="aui-img-body aui-arrow-right">' html += '<span id="realname-'+result.message.targetId+'"></span>'; //此處也定義個id,更消息內容類型做個判斷 switch(result.message.objectName){ //文字消息 case 'RC:TxtMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">'+result.message.content.text+'</p>'; break; //圖片消息 case 'RC:ImgMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">我:[圖片]</p>'; break; //語音消息 case 'RC:VcMsg': html += '<p class="aui-ellipsis-1" id="targetMessage-'+result.message.targetId+'">我:[語音]</p>'; break; } html += '</div>'; html += '</li>'; $api.prepend($api.byId("messageList"),html); getUserInfo(result.message.targetId); api.parseTapmode(); } } }) } //批量獲取用戶信息 function getUserInfos(userids){ api.ajax({ url: '', method: 'post', timeout: 30, dataType: 'json', returnAll:false, data:{ values:{ userids:userids } } },function(ret,err){ if (ret) { for(var i in ret){ if(ret[i].userid){ if(ret[i].avatar){ $api.attr($api.byId("avatar-"+ret[i].userid),'src',ret[i].avatar); } $api.text($api.byId("realname-"+ret[i].userid),ret[i].realname); } } } }); } //獲取單個用戶信息 function getUserInfo(userid){ api.ajax({ url: '', method: 'post', timeout: 30, dataType: 'json', returnAll:false, data:{ values:{ userid:userid } } },function(ret,err){ if (ret) { if(ret.avatar){ $api.attr($api.byId("avatar-"+ret.userid),'src',ret.avatar); } $api.text($api.byId("realname-"+ret.userid),ret.realname); } }); }
會話(單聊)頁面核心代碼:
結合UIChatBox模塊
var myAvatar, targetId,targetAvatar,targetNickname,oldestMessageId='-1', chatBox, sourcePath = "widget://image/emotion",//表情存放目錄 emotionData;//存儲表情 apiready = function(){ //從本地數據存貯獲取我的頭像 myAvatar = $api.getStorage('avatar'); targetId = api.pageParam.targetId;//傳遞過來的目標用戶id targetAvatar = api.pageParam.targetAvatar;//傳遞過來的目標用戶頭像 targetNickname = api.pageParam.targetNickname;//傳遞過來的目標用戶昵稱 api.parseTapmode();//優化點擊事件(300) //表情圖片處理 getImgsPaths(sourcePath, function (emotion) { emotionData = emotion; }); //獲取最新消息記錄 getLatestMessages(); //監聽來自消息列表的新消息 api.addEventListener({ name: 'setOnReceiveMessageListener' }, function(ret){ if(ret && ret.value){ var result = ret.value.result; //如果當前消息的目標id等於當前會話目標id,寫入 if(result.message.targetId==targetId){ var html = ''; html += '<div class="aui-chat-receiver" id="message-'+result.message.messageId+'">'; html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>'; html += '<div class="aui-chat-receiver-cont">'; html += '<div class="aui-chat-left-triangle"></div>'; switch(result.message.objectName){ //文字消息 case 'RC:TxtMsg': html += '<span>'+transText(result.message.content.text)+'</span>'; break; //圖片消息 case 'RC:ImgMsg': html += '<span class="aui-chat-img chat-img"><img src="'+result.message.content.thumbPath+'" /></span>'; break; //語音消息 case 'RC:VcMsg': html += '<div class="aui-chat-status">'+result.message.content.duration+'s</div>'; html += '<span tapmode onclick="playVoice(\''+result.message.content.voicePath+'\',\''+result.message.messageId+'\')" ><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+result.message.messageId+'"></i></span>'; break; } html += '</div>'; html += '</div>'; $api.append($api.byId("messageList"),html); api.parseTapmode(); //容器自動滾動至底部的處理,加個100毫秒演示防止不成功 setTimeout(function(){ window.scrollTo(0,$api.offset($api.byId("messageList")).h); },100) } } }) //監聽發送的新消息 api.addEventListener({ name: 'backSendMessage' }, function(ret){ if(ret && ret.value){ var result = ret.value.result; //如果當前消息的目標id等於當前會話目標id,寫入 if(result.message.targetId==targetId){ var html = ''; html += '<div class="aui-chat-sender" id="message-'+result.message.messageId+'">'; html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>'; html += '<div class="aui-chat-sender-cont">'; html += '<div class="aui-chat-right-triangle"></div>'; switch(result.message.objectName){ //文字消息 case 'RC:TxtMsg': html += '<span>'+transText(result.message.content.text)+'</span>'; break; //圖片消息 case 'RC:ImgMsg': html += '<div class="aui-chat-status chat-img" id="messageStatus-'+result.message.messageId+'"><i class="aui-iconfont aui-icon-loading aui-chat-progress"></i></div>'; html += '<span class="aui-chat-img"><img src="'+result.message.content.thumbPath+'" /></span>'; break; //語音消息 case 'RC:VcMsg': //alert(JSON.stringify(ret.value.message.content)); html += '<div class="aui-chat-status">'+result.message.content.duration+'s</div>'; html += '<span tapmode onclick="playVoice(\''+result.message.content.voicePath+'\',\''+result.message.messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+result.message.messageId+'"></i></span>'; break; } html += '</div>'; html += '</div>'; $api.append($api.byId("messageList"),html); api.parseTapmode(); window.scrollTo(0,$api.offset($api.byId("messageList")).h); } } }) //監聽發送的新消息是否完成 api.addEventListener({ name: 'backSendMessageSuccess' }, function(ret){ if(ret && ret.value){ if($api.byId("messageStatus-"+ret.value.messageId)){ $api.remove($api.byId("messageStatus-"+ret.value.messageId)); } } }) //下拉加載歷史消息 api.setRefreshHeaderInfo({ visible: true, loadingImg: 'widget://image/ptr_pull.png', bgColor: '#ffffff', textColor: '#ff7372', textDown: '下拉加載', textLoading: '加載中', textUp: '松開加載', showTime: false }, function(ret, err){ api.refreshHeaderLoading(); //發送一個獲取歷史消息的事件 api.sendEvent({ name: 'getHistoryMessages', extra: {targetId:targetId,type:'PRIVATE',oldestMessageId:oldestMessageId} }); api.refreshHeaderLoadDone(); //從服務器加載數據,完成后調用api.refreshHeaderLoadDone()方法恢復組件到默認狀態 }); //監聽獲取歷史消息 api.addEventListener({ name: 'backHistoryMessages' }, function(ret){ if(ret && ret.value.result){ var result = ret.value.result; var myUserid = $api.getStorage('userid'); //重新排序 var messageList = result.sort(getSortFun('asc', 'sentTime')); oldestMessageId = messageList[0].messageId; var html = ''; for(var i in messageList){ if(messageList[i].senderUserId==myUserid){ //當前發送用戶 html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">'; html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>'; html += '<div class="aui-chat-sender-cont">'; html += '<div class="aui-chat-right-triangle"></div>'; }else{ html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">'; html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>'; html += '<div class="aui-chat-receiver-cont">'; html += '<div class="aui-chat-left-triangle"></div>'; } switch(messageList[i].objectName){ //文字消息 case 'RC:TxtMsg': html += '<span>'+transText(messageList[i].content.text)+'</span>'; break; //圖片消息 case 'RC:ImgMsg': html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.thumbPath+'" /></span>'; break; //語音消息 case 'RC:VcMsg': //html += '<span>[語音消息]</span>'; html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>'; html += '<span tapmode onclick="playVoice(\''+messageList[i].content.voicePath+'\',\''+messageList[i].messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+messageList[i].messageId+'"></i></span>'; break; } html += '</div>'; html += '</div>'; } $api.prepend($api.byId("messageList"),html); api.parseTapmode(); } }); //chatbox部分 chatBox = api.require('UIChatBox'); openChatBox(); //監聽鍵盤聊天框鍵盤彈出,用於調整聊天窗口高度 chatBox.addEventListener({ target: 'inputBar', name: 'move' }, function(ret,err){ if(ret.panelHeight>0){ api.setFrameAttr({ name: 'chat_private_frm', rect:{ h:api.frameHeight-ret.panelHeight } }); }else{ api.setFrameAttr({ name: 'chat_private_frm', rect:{ h:api.frameHeight } }); } setTimeout(function(){ window.scrollTo(0,$api.offset($api.byId("messageList")).h); },200) }); //監聽按下錄音 chatBox.addEventListener({ target: 'recordBtn', name: 'press' }, function(ret,err){ api.startRecord({ //path: 'fs://1.amr' }); }); //監聽松開錄音鍵 chatBox.addEventListener({ target: 'recordBtn', name: 'press_cancel' }, function(ret,err){ //松開后停止錄音 api.stopRecord( function(ret,err){ if (ret && ret.duration > 0) { api.sendEvent({ name:'sendMessage', extra: { targetId:targetId, objectName:'RC:VcMsg', conversationType:'PRIVATE', message:ret } }) } } ); }); } //獲取最新消息記錄 function getLatestMessages(){ //通過sendEvent方法從message_list中獲取當前會話歷史消息,發送目標id,消息類型,最后一條id api.sendEvent({ name: 'getLatestMessages', extra: {targetId:targetId,type:'PRIVATE'} }); //監聽獲取歷史消息 api.addEventListener({ name: 'backLatestMessages' }, function(ret){ //alert(JSON.stringify(ret.value)); if(ret && ret.value.result){ var result = ret.value.result; var myUserid = $api.getStorage('userid'); //重新排序 var messageList = result.sort(getSortFun('asc', 'sentTime')); oldestMessageId = messageList[0].messageId; var html = ''; for(var i in messageList){ if(messageList[i].senderUserId==myUserid){ //當前發送用戶 html += '<div class="aui-chat-sender" id="message-'+messageList[i].messageId+'">'; html += '<div class="aui-chat-sender-avatar"><img src="'+myAvatar+'"></div>'; html += '<div class="aui-chat-sender-cont">'; html += '<div class="aui-chat-right-triangle"></div>'; }else{ html += '<div class="aui-chat-receiver" id="message-'+messageList[i].messageId+'">'; html += '<div class="aui-chat-receiver-avatar"><img src="'+targetAvatar+'"></div>'; html += '<div class="aui-chat-receiver-cont">'; html += '<div class="aui-chat-left-triangle"></div>'; } switch(messageList[i].objectName){ //文字消息 case 'RC:TxtMsg': html += '<span>'+transText(messageList[i].content.text)+'</span>'; break; //圖片消息 case 'RC:ImgMsg': html += '<span class="aui-chat-img chat-img"><img src="'+messageList[i].content.thumbPath+'" /></span>'; break; //語音消息 case 'RC:VcMsg': //html += '<span>[語音消息]</span>'; html += '<div class="aui-chat-status">'+messageList[i].content.duration+'s</div>'; html += '<span tapmode onclick="playVoice(\''+messageList[i].content.voicePath+'\',\''+messageList[i].messageId+'\')"><i class="aui-iconfont aui-icon-sound" id="messageVoice-'+messageList[i].messageId+'"></i></span>'; break; } html += '</div>'; html += '</div>'; } $api.prepend($api.byId("messageList"),html); api.parseTapmode(); setTimeout(function(){ window.scrollTo(0,$api.offset($api.byId("messageList")).h); },300) } }); } //排序函數 function getSortFun(order, sortBy) { var ordAlpah = (order == 'asc') ? '>' : '<'; var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1'); return sortFun; } //表情處理 function transText(text, imgWidth, imgHeight){ var imgWidth = imgWidth || 24; var imgHeight = imgHeight || 24; var regx= /\[(.*?)\]/gm; var textTransed = text.replace(regx,function(match){ var imgSrc = emotionData[match]; if( !imgSrc){ /* 說明不對應任何表情,直接返回即可.*/ return match; } var img = "<img src='" + imgSrc+ "' width='" + imgWidth + "' height ='" + imgHeight +"' />"; return img; }); return textTransed; } /*獲取所有表情圖片的名稱和真實URL地址,以JSON對象形式返回。其中以表情文本為 屬性名,以圖片真實路徑為屬性值*/ function getImgsPaths(sourcePathOfChatBox, callback){ var jsonPath = sourcePathOfChatBox + "/emotion.json";//表情的JSON數組 api.readFile({ path: jsonPath },function(ret,err){ if(ret.status){ var emotionArray = JSON.parse(ret.data); var emotion = {}; for(var i in emotionArray){ var emotionItem = emotionArray[i]; var emotionText = emotionItem["text"]; var emotionUrl = "../image/emotion/"+emotionItem["name"]+".png"; emotion[emotionText] = emotionUrl; } /*把emotion對象 回調出去*/ if("function" === typeof(callback)){ callback(emotion); } } }); } function openChatBox(){ chatBox.open({ placeholder: '', maxRows: 4, emotionPath: 'widget://image/emotion', texts: { recordBtn: { normalTitle: '按住 說話', activeTitle: '松開 結束' } }, styles: { inputBar: { borderColor: '#d9d9d9', bgColor: '#f2f2f2' }, inputBox: { borderColor: '#B3B3B3', bgColor: '#FFFFFF' }, emotionBtn: { normalImg: 'widget://image/chatBox/face1.png' }, extrasBtn: { normalImg: 'widget://image/chatBox/add1.png' }, keyboardBtn: { normalImg: 'widget://image/chatBox/key1.png' }, speechBtn: { normalImg: 'widget://image/chatBox/key3.png' }, recordBtn: { normalBg: '#c4c4c4', activeBg: '#999999', color: '#000', size: 14 }, indicator: { target: 'both', color: '#c4c4c4', activeColor: '#9e9e9e' } }, extras: { titleSize: 10, titleColor: '#a3a3a3', btns: [{ title: '圖片', normalImg: 'widget://image/chatBox/album1.png', activeImg: 'widget://image/chatBox/album2.png' },{ title: '拍照', normalImg: 'widget://image/chatBox/cam1.png', activeImg: 'widget://image/chatBox/cam2.png' }] } }, function(ret){ //點擊附加功能面板 if(ret.eventType == 'clickExtras'){ //alert("用戶點擊了第"+ ret.index +"個按鈕"); if(ret.index==0){ //圖片 api.getPicture({ sourceType: 'library', encodingType: 'jpg', mediaValue: 'pic', destinationType: 'url', allowEdit: true, quality: 70, targetWidth:320, saveToPhotoAlbum: false }, function(ret, err){ if (ret) { api.sendEvent({ name:'sendMessage', extra: { targetId:targetId, objectName:'RC:ImgMsg', conversationType:'PRIVATE', message:ret.data } }) } }); }else if(ret.index==1){ //圖片 api.getPicture({ sourceType: 'camera', encodingType: 'jpg', mediaValue: 'pic', destinationType: 'url', allowEdit: true, quality: 70, targetWidth:640, saveToPhotoAlbum: false }, function(ret, err){ if (ret) { api.sendEvent({ name:'sendMessage', extra: { targetId:targetId, objectName:'RC:ImgMsg', conversationType:'PRIVATE', message:ret.data } }) } }); } } //點擊發送按鈕 if(ret.eventType == 'send' && ret.msg){ //通過sendEvent將發送內容廣博,消息頁面接收並廣播回來 //單聊文字消息類型 api.sendEvent({ name:'sendMessage', extra: { targetId:targetId, objectName:'RC:TxtMsg', conversationType:'PRIVATE', message:ret.msg } }) //alert('輸入的內容是:'+ transText(ret.msg)); } }); }