[技术分享] 融云开发案例核心代码分享

该套代码为从项目案例中提取的，可以直接拿去使用，主要包含了单聊及消息的处理。主要分三个页面处理完成，入口首页（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));
}
});
}