今天完成了公司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'// 用户2token: '用户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'),'
 ' + ret.value.msg + ' 
');
});

监听页面接收消息

api.addEventListener({name: 'receiveMsg'
}, function(ret, err) {// 收到消息后, 添加消息内容到页面$api.append($api.dom('.main'),'
' + ret.value.msg + '
');
});

基本功能已经实现，效果如图

）=

欢迎访问博客

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！