今天完成了公司app的聊天界面的收發消息功能，結合融雲2和UIChatTools模塊實現，只是實現了基本功能，好多細節還沒有實現，廢話不多說，上代碼
輸入框頁面（win）
先引入所需模塊
// 融雲模塊
var rong = api.require('rongCloud2');
//聊天界面模塊
var UIChatTools = api.require('UIChatTools');
初始化聊天輸入框UIChatTools模塊
// 聊天界面
function chatTools() {
UIChatTools.open({
chatBox: {
placeholder: '聊天內容',
autoFocuse: true,
maxRows: 6
},
styles: {
bgColor: '#D1D1D1',
margin: 10,
},
tools: {
h: 35,
iconSize: 30,
recorder: {
normal: 'fs://UIChatTolls/recorder.png',
selected: 'fs://UIChatTolls/recorder1.png'
},
image: {
normal: 'fs://UIChatTolls/image.png',
selected: 'fs://UIChatTolls/image1.png'
},
video: {
normal: 'fs://UIChatTolls/video.png',
selected: 'fs://UIChatTolls/video1.png'
},
face: {
normal: 'fs://UIChatTolls/face2.png',
selected: 'fs://UIChatTolls/face1.png'
},
append: {
normal: 'fs://UIChatTolls/append.png',
selected: 'fs://UIChatTolls/append1.png'
}
},
// 表情
// emotions:['widget://image/chatPage/emoticons/basic','widget://image/chatPage/emoticons/append1','widget://image/chatPage/emoticons/append2']
}, function(ret) {
if (ret) {
if (ret.eventType === 'send') {
// 發送消息
sendMsg(ret.msg);
}
}
});
// 附加按鈕
UIChatTools.setAppendButton({
styles: {
row: 2,
column: 4,
iconSize: 50,
titleSize: 13,
titleColor: '#f00'
},
buttons: [
{
normal: 'widget://image/chatPage/album2.png',
highlight: 'widget://image/chatPage/album2.png',
title: '電話'
},{
normal: 'widget://image/chatPage/album2.png',
highlight: 'widget://image/chatPage/album2.png',
title: '收藏'
},{
normal: 'widget://image/chatPage/album2.png',
highlight: 'widget://image/chatPage/album2.png',
title: '發紅包'
}
]
}, function(ret) {
api.alert({msg:'點擊了第'+ret.index+'個按鈕'});
});
// 監聽功能按鈕
UIChatTools.toolsListener(function(ret) {
if (ret.eventType == 'video') {
api.alert({
title: 'title',
msg: 'video',
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
});
// 接入融雲
rongyun();
}
接入融雲
// 接入融雲
function rongyun () {
rong.init(function(ret, err) {
if (ret.status == 'error')
api.toast({ msg: err.code });
});
// 監聽接收消息
receiveMsg();
rong.connect(
{
// 用戶1
// token: '用戶1token'
// 用戶2
token: '用戶2token'
},function(ret, err) {
if (ret.status == 'success') api.toast({ msg: ret.result.userId });
});
}
監聽接收消息
// 監聽接收消息
function receiveMsg() {
rong.setOnReceiveMessageListener(function(ret, err) {
// 由於聊天框界面和聊天內容不是一個頁面所以要使用事件監聽的方式通知聊天內容頁面，傳遞參數
api.sendEvent({
name: 'receiveMsg',
extra: {
msg: ret.result.message.content.text
}
});
})
}
發送消息
function sendMsg(msg) {
var sendMsg;
rong.sendTextMessage({
conversationType: 'PRIVATE',
targetId: 'testUser1',
text: msg,
extra: ''
}, function(ret, err) {
if (ret.status == 'prepare') {
// 獲取發送的消息內容
sendMsg = ret.result.message.content.text;
}
else if (ret.status == 'success') {
// 廣播發送消息事件
api.sendEvent({
name: 'sendMsg',
extra: {
msg: sendMsg
}
});
}
else if (ret.status == 'error') {
api.alert({
title: 'title',
msg: err.code,
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
});
}
聊天內容頁面（Frame）
監聽發送消息
api.addEventListener({
name: 'sendMsg'
}, function(ret, err) {
// 發送消息后, 添加消息內容到頁面
$api.append($api.dom('.main'),'<div class="oneself clearfix"><img class="fr" src="../../image/tx_2.jpg"><p class="fr"> ' + ret.value.msg + ' </p></div>');
});
監聽頁面接收消息
api.addEventListener({
name: 'receiveMsg'
}, function(ret, err) {
// 收到消息后, 添加消息內容到頁面
$api.append($api.dom('.main'),'<div class="other clearfix"><img class="fl" src="../../image/tx_2.jpg"><p class="fl">' + ret.value.msg + '</p></div>');
});