APICloud平臺的融雲2.0優化
阿新 • • 發佈：2019-02-04
rong.setOnReceiveMessageListener(function (ret, err) { /****1.融雲的訊息以sendEvent的方式通訊到其他頁面****/ api.sendEvent({ name: 'rongMsg', extra: { msgNoti: ret.result.message } }); var notiMsg; var name = getNickNameA($api.getStorage("name" + ret.result.message.senderUserId)); //如果有聊過天 if (name == "匿名者") { name = "有位新朋友"; } /*****2.判斷訊息型別********/ if (ret.result.message.objectName == "RC:TxtMsg") { if (!(ret.result.message.content.text.indexOf("<img"))) { notiMsg = name + "發來了一個表情，快去看看吧"; } else { notiMsg = name + ":" + ret.result.message.content.text; } } else { notiMsg = name + "發來了一張圖片，快去看看吧"; } //在手機通知欄進行狀態列通知 api.notification({ notify: { content: notiMsg } }, function (ret, err) { // console.log(JSON.stringify(ret)); // $api.setStorage("notiID" + ret.result.message.senderUserId, ret.id); }); });
在聊天介面通過如下程式碼接收event方法傳遞來的訊息.
//接收資訊 api.addEventListener({ name: 'rongMsg' }, function (ret, err) { // alert(JSON.stringify(ret)); var msg; msg = ret.value; // console.log(JSON.stringify(msg.msgNoti)); var tag; var para; if (msg.msgNoti.objectName == "RC:TxtMsg") { tag = "TxtMsg"; } else if (msg.msgNoti.objectName == "RC:ImgMsg") { tag = "ImgMsg"; } else if (msg.msgNoti.objectName == "RC:VcMsg") { tag = "VcMsg"; } else if (msg.msgNoti.objectName == "RC:LBSMsg") { tag = "LBSMsg"; } para = { firstSendType: "aui-chat-receiver", secondSendType: "aui-chat-receiver-avatar", thirdSendType: "aui-chat-receiver-cont", fourthSendType: "aui-chat-left-triangle", content: msg.msgNoti.content, tag: tag, receivedTime: getTrueTime(msg.msgNoti.receivedTime), messageDirection: "RECEIVE", receiveIcon: receiver_icon }; if (!timeTag) { para.receivedTime = ""; } //與他聊天 if (targetId == msg.msgNoti.targetId) { //通過doT進行設定 //如果是文字 if (tag == "TxtMsg") { var interText = doT.template($("#text-message-content-template").text()); $("#message-content").append(interText(para)); } if (tag == "ImgMsg") { var interText = doT.template($("#img-message-content-template").text()); $("#message-content").append(interText(para)); } goBottom(); timeTag = false; } });
二.出現鍵盤聊天frame頁面高度的變化
在專案中的聊天鍵盤用到的是UIChatBox控制元件,這裡我們可以通過監聽他的狀態從而實現對frame高度的改變.<span style="font-size:18px;">/******1.監聽鍵盤聊天框鍵盤彈出,用於調整聊天視窗高度*****/ //move（輸入框所在區域彈動事件） 就是輸入框收起和彈出變化 UIChatBox.addEventListener({ target: 'inputBar', name: 'move' }, function (ret, err) { //api.toast({msg: JSON.stringify(ret),location: 'top'}); //50 //api.toast({msg: JSON.stringify(err),location:'middle'}); //283 //點選輸入框時會話介面高度發生變化 setChatFrameByInputMove(ret.inputBarHeight, ret.panelHeight); }); </span>
function setChatFrameByInputChange(inputBarHeight, panelHeight) {
api.setFrameAttr({
name: 'chat_frm',
rect: {
x: 0,
y: header_h,
w: api.winWidth,
h: api.winHeight - header_h - inputBarHeight - panelHeight - 35,
},
});
setTimeout('setBottom()', 200);
} //進入到底部
function setBottom() {
api.sendEvent({
name: 'chatFrm_goBottom',
extra: {}
});
}上述程式碼可以實現出現聊天鍵盤,改變聊天frame的高度.我的思路是這樣,大家有其他的方法可以評論中貼出來一起討論.
三.優化聊天文字資訊中的表情符號
整個聊天介面使用的是AUI中的聊天UI,在此感謝流浪男提供了這麼好的前端UI框架! var sourcePath = "widget://image/emotion";//表情存放目錄
var emotionData;//儲存表情
//表情符轉換為表情
function transText(text, imgWidth, imgHeight) {
//表情大小定義為18*18
var imgWidth = 18;
var imgHeight = 18;
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);
}
}
});
}
之後在sendTextMessage方法中,將文字用transText方法進行轉換.
<span style="white-space:pre"> </span>rong.sendTextMessage({
conversationType: 'PRIVATE',
targetId: targetId,
text: transText(msg_txt, 15, 15),
extra: ''
}, function (ret, err) {<span style="white-space:pre"> </span>});