apicloud+融雲實現即時通信

時間 2019-11-10

標籤 apicloud 實現即時通信简体版

原文原文鏈接

　　請尊重做者的辛勤勞動！！！ javascript

使用apicloud開發已經快2個月了，起初的目的就是爲了實現安卓和蘋果的兼容，屬於一個試驗項目，究竟apicloud是否可以知足公司的要求？最終看來仍是不錯的，使用apicloud+融雲實現了相似微信即時通信的功能。看到有不少後來的人依然在這塊掙扎，我就把本身的實現思路和成果分享出來和你們一塊兒交流一下，我也是第一次作手機開發，有不少經驗不足的地方，但願你們可以直接指出來，我也不斷完善本身的產品。
    此次沒有使用本地數據庫，全部數據都是從融雲和服務器獲取，會影響性能，下一步會把數據本地化處理，再將優化後的代碼和你們交流。
    具體實現的思路，說的可能會有些混亂，但願你們能諒解~
    1、功能說明：
    1. 登陸功能：相似微信，登陸後記住當前人帳號和密碼，記在了Storage裏，可能會有安全性問題，想在第二版優化時保存在數據庫中；
    2. 通信錄功能：相似微信，包括羣組及好友列表
    3. 歷史會話列表：相似微信，包括羣組及我的的歷史會話列表
    4. 發送內容：包括文本、語音和圖片
    2、使用的模塊
        包括：fs、imageBrowser、bubbleMenu、listContact、UIMediaScanner、rongCloud、UIChatBox
    3、實現思路：
    PS：這裏借鑑了「流浪男」的一篇文章，感謝他的對我實現思路的重大啓發，原文：http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=8715
           使用論壇中的aui.css樣式
            感謝技術客服技術支持-M 的辛勤幫助
            感謝吳勇兄弟的幫助
    1. 登陸操做，登陸時訪問服務器（本身的雲服務器）獲取token，服務器使用的是java的sdk獲取token，組裝token和人員的全部信息json返回到app，保存在storage裏，後期會存到本地數據庫中；
    2. 主界面，包括4個菜單，分別爲會話歷史頁面、通信錄頁面、應用頁面和我的設置頁面，全部的和融雲相關的業務邏輯都在hh_index_window裏面初始化，其餘頁面獲取數據時，都是採起監聽模式獲取數據；
    3. 會話歷史頁面：hh_index_window.html

php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<meta name="format-detection" content="telephone=no"/>
<title>會話列表</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
.span_name {
width: 20%;
/*font-size: 18px;*/
/*text-align: center;*/
display: inline-block;
/*word-break: keep-all;*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>

<ul class="aui-user-view">




<div id="hhlist_div"></div>
<script type="text/html" id="hhlist_script">
<% if(result.length == 0){ %>
<div style="text-align:center;color:#666;"><span>您尚未會話記錄，快去找小夥伴們聊天吧~~</span></div>
<% }else{ %>
<%for(var i=0; i<result.length; i++) {%>

<li id="<%=result[i].targetId %>" alt="<%=result[i].conversationType %>" class="aui-user-view-cell aui-img" onclick="openHhList('<%=result[i].targetId %>','<%=result[i].latestMessageId %>','<%=result[i].person_name %>','<%=result[i].conversationType %>','hh_index');">
<img class="aui-img-object aui-pull-left" src="<%=result[i].avatar_url %>">
<div class="aui-img-body">
<span><span class="span_name"><%=result[i].person_name %></span><em><%=g_time.getTime(result[i].receivedTime,1) %></em></span>
<% if(result[i].objectName == 'RC:VcMsg') { %>
<p class='aui-ellipsis-1'>[語音]</p>
<% } %>
<% if(result[i].objectName == 'RC:TxtMsg') { %>
<p class='aui-ellipsis-1'><%=result[i].latestMessage.text %></p>
<% } %>
<% if(result[i].objectName == 'RC:ImgMsg') { %>
<p class='aui-ellipsis-1'>[圖片]</p>
<% } %>
</div>
<% if(result[i].unreadMessageCount > 0) { %>
<div style="height:0px;">
<div class="circle">
<p class="circle_p"><%=result[i].unreadMessageCount %></p>
<input type="hidden" class="unread_count" value="<%=result[i].unreadMessageCount %>"/>
</div>
</div>
<% } %>
</li>
<%}%>
<% } %>

</script>
</ul>


<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/template.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>

<script type="text/javascript" src="../../script/hammer.min.js"></script>
<script type="text/javascript" src="../../script/base_config.js"></script>
<script type="text/javascript" src="../../script/huihua/hh_index_window.js"></script>
</body>
</html>

/*
* 把全部的融雲類的處理所有放在消息列表頁，而後經過APICloud的api.sendEvent和api.addEventListener 來處理融雲的一些事件。
記住除了消息列表頁其餘頁面不要作融雲的任何連接處理
*/
//定義融雲
var rong;
//內容高度
var rect_h;
//header高度
var header_h;

apiready = function() {
api.showProgress({
title : '加載中...',
modal : false
});
rect_h = api.pageParam.rect_h;
header_h = api.pageParam.header_h;

//加載融雲模塊
rong = api.require('rongCloud');
//融雲初始化
rongCloud();

//監聽來自會話頁面發送消息的事件
api.addEventListener({
name : 'sendMessage'
}, function(ret) {
if (ret && ret.value) {
var value = ret.value;
switch(value.type) {
case 'text':
sendMessage('' + value.type + '', '' + value.targetId + '', '' + value.content + '', '' + value.extra + '', '' + value.conversationType + '');
break;
case 'pic':
//判斷是照相仍是選擇，選擇是數組，照相是一個
switch(value.pic_source) {
case 'camera':
sendPicture('' + value.targetId + '', '' + value.imgSrc + '', '' + value.extra + '', '' + value.conversationType + '');
break;
case 'album':
// alert(JSON.stringify(value));
var img_list = value.img_list;
for (var i = 0; i < img_list.length; i++) {
// alert(value.img_list.image_list[i].path+'123123');
//圖片真實地址
var img_temp = img_list[i].path;
var img_url;
//文件後綴名，如：png，jpg, mp4
var suffix = img_list[i].suffix;
var obj_scan = api.require('UIMediaScanner');
if (api.systemType == 'ios') {
//虛擬路徑轉真實路徑
obj_scan.transPath({
path : img_temp
}, function(ret) {
//發送圖片格式
if (suffix == 'png' || suffix == 'jpg') {
sendPicture('' + value.targetId + '', '' + ret.path + '', '' + value.extra + '', '' + value.conversationType + '');
}
});
} else if (api.systemType = "android") {
// api.alert({
// msg:img_temp
// },function(ret,err){
// //coding...
// });
//發送圖片格式
if (suffix == 'png' || suffix == 'jpg') {
sendPicture('' + value.targetId + '', '' + img_temp + '', '' + value.extra + '', '' + value.conversationType + '');
}
}

}
break;
}
break;
case 'voi':
sendVoice('' + value.targetId + '', '' + value.voicePath + '', '' + value.duration + '', '' + value.extra + '', '' + value.conversationType + '');
break;
}
}
});

//監聽來自會話頁面獲取歷史會話的事件
api.addEventListener({
name : 'getHistory'
}, function(ret) {
if (ret && ret.value) {
var value = ret.value;
getHistoryMessagesById(value.type, value.target_id, value.old_msg_id, value.msg_count);
}
});

//監聽來自通信錄頁面獲取最新會話id的事件
api.addEventListener({
name : 'getOldMessageId'
}, function(ret) {
if (ret && ret.value) {
var value = ret.value;
getLatestMessagesById(value.conver_type, value.target_id, value.count, function(mes_list) {
var old_msg_id = -1;
if (getJsonObjLength(mes_list) != 0) {
old_msg_id = mes_list[0].messageId;
}
//發送target_id獲取最新會話id
api.sendEvent({
name : 'setOldMessageId',
extra : {
old_msg_id : old_msg_id
}
});
});

}
});

//監聽來註銷頁面的事件
api.addEventListener({
name : 'logout'
}, function(ret) {
rong.disconnect(false);
});

//系統消息未讀使用
// var messages = Math.floor((Math.random()*10)+1);
// document.getElementById("messages").innerHTML = messages;
}
/*
* 打開會話頁面
* 周楓
* 2015-08-03
*/
function openHhList(target_id, old_msg_id, person_name, conver_type, h_from) {
//清除未讀信息
cleanMsg(target_id, conver_type);
getCoversationList();
//若是是羣組，則獲取羣組人員姓名json
if (conver_type == "GROUP") {
getGroupInfoById(target_id);
}

api.openWin({
name : 'hh_chat_window',
url : 'hh_chat_window.html',
bounces : true,
animation : 'push',
delay : 1,
scrollToTop : true,
pageParam : {
'targetId' : target_id,
'old_msg_id' : old_msg_id + 1,
'conver_type' : conver_type,
'person_name' : person_name,
'header_h' : header_h,
'conver_type' : conver_type,
'h_from' : h_from
},
rect : {
x : 0,
y : 'auto',
w : 'auto',
h : 'auto'
}
});
$api.addEvt($api.byId('back'), 'click', function() {
api.closeWin();
});
// });
}

/**
* 打開消息列表頁面
* 周楓
* 2015.08.17
*/
function openNewsList() {
api.openWin({
name : 'xx_index_window',
url : 'xx_index_window.html',
bounces : true,
animation : 'push',
delay : 1,
scrollToTop : true,
pageParam : {
'header_h' : header_h
},
rect : {
x : 0,
y : 'auto',
w : 'auto',
h : 'auto'
}
});
}

/*
* 融雲初始化
* 周楓
* 2015-08-03
*/
function rongCloud() {
var token = $api.getStorage('mytoken');
//融雲初始化
rong.init(function(ret, err) {
if (ret.status == "success") {
api.execScript({
name : 'index',
script : 'setTitle("會話");'
});
} else {
api.execScript({
name : 'index',
// frameName : 'hh_index',
script : 'setTitle("鏈接失敗");'
});
}
});
//監聽新消息
receiveMessageListener();
//鏈接
rong.connect({
token : '' + token + ''
}, function(ret, err) {
if (ret.status == 'success') {
//清空全部會話
// clearConversations();
//消息列表
getCoversationList();
//初始化當前人員羣組信息
// initPersonGroup();
// quitGroup();
} else {
var err_code = err.code;
switch(err_code) {
case "-1":
api.toast({
msg : "對不起，客戶端發生未知錯誤！",
location : 'middle'
});
break;
case "2002":
api.toast({
msg : "對不起，客戶端數據包不完整，請求數據包有缺失！",
location : 'middle'
});
break;
case "2003":
api.toast({
msg : "對不起，服務器不可用！",
location : 'middle'
});
break;
case "2004":
api.toast({
msg : "對不起，請從新向身份認證服務器獲取 Token！",
location : 'middle'
});
break;
case "2005":
api.toast({
msg : "對不起，多是錯誤的 App Key，或者 App Key 被服務器積極拒絕！",
location : 'middle'
});
break;
case "2006":
api.toast({
msg : "對不起，服務端數據庫錯誤！",
location : 'middle'
});
break;
case "5004":
api.toast({
msg : "對不起，服務器超時！",
location : 'middle'
});
break;
case "-10000":
api.toast({
msg : "對不起，未調用 init 方法進行初始化！",
location : 'middle'
});
break;
case "-10002":
api.toast({
msg : "對不起，輸入參數錯誤！",
location : 'middle'
});
break;
}
}
});
}

/*
* 監聽新消息
當有新消息傳來時，利用sendEvent發出一個事件，同時傳遞消息內容，能夠在會話頁面進行一次監聽接收
* 周楓
* 2015-08-03
*/
function receiveMessageListener() {
rong.setOnReceiveMessageListener(function(ret, err) {
// api.alert({
// msg:JSON.stringify(ret)
// },function(ret,err){
// //coding...
// });
if (ret.status == "success") {
//發送事件
api.sendEvent({
name : 'getNewMessage',
extra : {
data : ret.result.message
}
})
// cleanMsg(ret.result.message.targetId,ret.result.message.conversationType);
getCoversationList();
}
})
}

/*
* 獲取會話消息列表
* 周楓
* 2015-08-03
*/
function getCoversationList() {
//消息列表
rong.getConversationList(function(ret, err) {
if (ret.status == 'success') {
sendConListReJson(ret, function(list_json) {
beforeRender(list_json);
// api.alert({
// msg:JSON.stringify(list_json)
// });

var html_type = template.render('hhlist_script', list_json);
document.getElementById('hhlist_div').innerHTML = html_type;
api.hideProgress();
//未讀總條數，顯示在APP右上角
var unread_sum = 0;
var unread_arr = $api.domAll('.unread_count');
for (var i = 0; i < unread_arr.length; i++) {
var unread_count = parseInt($api.val(unread_arr[i]));
unread_sum = unread_sum + unread_count;
}
//設置應用圖標右上角數字，支持全部iOS手機，以及部分Android手機，如小米和三星的某些型號
api.setAppIconBadge({
badge : unread_sum
});

var aui_img = $api.domAll('.aui-user-view-cell');
//若是以前有系統消息，須要改爲從1開始循環，去掉系統消息
for (var i = 0; i < aui_img.length; i++) {
(function(i) {
var id = $api.attr(aui_img[i], "id");
//長按刪除，3秒
var myHanmer = new Hammer($api.byId(id));
myHanmer.on("press", function(e) {
api.confirm({
title : "提示",
msg : "確認刪除當前會話嗎？",
buttons : ["取消", "肯定"]
}, function(ret, err) {
if (1 == ret.buttonIndex) {
return;
} else {
//刪除會話
clearMessageById($api.attr(myHanmer.input.target, 'id'), $api.attr(myHanmer.input.target, 'alt'));
}
});
// alert($api.attr(myHanmer.input.target,'id'));
});
})(i);
}
});
} else {
var errJson = JSON.stringify(err);
// api.alert({
// msg : "err=" + errJson
// });
}
});
}

/**
* 獲取某一會話的最新消息記錄
*/
function getLatestMessagesById(conver_type, target_id, count, callback) {
rong.getLatestMessages({
conversationType : conver_type,
targetId : target_id + '',
count : parseInt(count)
}, function(ret, err) {
if (ret.status == "success") {
callback(ret.result);
} else {
api.alert({
msg : '獲取某一會話的最新消息記錄失敗'
});
}
})
}

/**
* 獲取歷史聊天記錄
* 周楓
* 2015.08.20
*/
function getHistoryMessagesById(conver_type, target_id, old_msg_id, msg_count) {
rong.getHistoryMessages({
conversationType : conver_type,
targetId : target_id,
oldestMessageId : parseInt(old_msg_id),
count : msg_count
}, function(ret, err) {
if (ret.status == 'success') {
// alert('222:' + JSON.stringify(ret.result));
api.sendEvent({
name : 'setHistory',
extra : {
data : ret.result
}
});
} else {
api.alert({
msg : '對不起，獲取歷史會話信息失敗'
});
}
})
}

/*
*發送消息的函數
注意要放在消息列表頁，不要放在會話頁面
在會話頁面利用sendEvent發出一個發送消息的事件，在消息列表頁監聽
* 周楓
* 2015-08-03
*/
function sendMessage(type, targetId, content, extra, conversationType) {
// api.alert({
// msg: 'type:'+type+',targetId:'+targetId+',content:'+content+',conversationType:'+conversationType
// },function(ret,err){
// //coding...
// });
rong.sendTextMessage({
conversationType : '' + conversationType + '',
targetId : '' + targetId + '',
text : '' + content + '',
extra : '' + extra + ''
}, function(ret, err) {
if (ret.status == 'prepare') {
//單聊準備發送，向會話頁面發送正在發送消息事件
api.sendEvent({
name : 'insertSendMessage',
extra : {
data : ret.result
}
})
//清除未讀信息
cleanMsg(ret.result.message.targetId, conversationType);
} else if (ret.status == 'success') {
//成功後處理
getCoversationList();
} else if (ret.status == 'error') {
//失敗
api.alert({
msg : '發送信息失敗：' + err.msg
});
}
});
}

/**
* 發送圖片消息
* 周楓
* 2015.08.11
* @param {Object} sendMsg
*/
function sendPicture(target_id, img_url, extra, conversationType) {
// api.alert({
// msg : 'img_url:' + img_url + ',target_id:' + target_id
// }, function(ret, err) {
// //coding...
// });
rong.sendImageMessage({
conversationType : conversationType,
targetId : target_id,
imagePath : img_url,
extra : extra
}, function(ret, err) {
if (ret.status == 'prepare') {
//單聊準備發送，向會話頁面發送正在發送消息事件
api.sendEvent({
name : 'insertSendMessage',
extra : {
data : ret.result
}
})
//清除未讀信息
cleanMsg(ret.result.message.targetId, conversationType);
} else if (ret.status == 'progress') {

} else if (ret.status == 'success') {

} else if (ret.status == 'error') {
var err_code = err.code;
switch(err_code) {
case -2:
api.alert({
msg : '對不起，圖片發送失敗'
});
break;
case -1:
api.alert({
msg : '對不起，圖片發送失敗，未知錯誤'
});
break;
case 3001:
api.alert({
msg : '對不起，圖片發送失敗，服務器超時'
});
break;
case 405:
api.alert({
msg : '對不起，圖片發送失敗，您在黑名單中'
});
break;
case -10000:
api.alert({
msg : '對不起，圖片發送失敗，未調用 init 方法進行初始化'
});
break;
case -10001:
api.alert({
msg : '對不起，圖片發送失敗，未調用 connect 方法進行鏈接'
});
break;
case -10002:
api.alert({
msg : '對不起，圖片發送失敗，輸入參數錯誤'
});
break;
}
}
});
}

/*
* 發送語音消息
* 周楓
* 2015.08.12
*
*/
function sendVoice(target_id, voicePath, duration, extra, conversationType) {
rong.sendVoiceMessage({
conversationType : conversationType,
targetId : target_id,
voicePath : voicePath,
duration : parseInt(duration),
extra : extra
}, function(ret, err) {
if (ret.status == 'prepare') {
//單聊準備發送，向會話頁面發送正在發送語音事件
api.sendEvent({
name : 'insertSendMessage',
extra : {
data : ret.result
}
})
//清除未讀信息
cleanMsg(target_id, conversationType);
} else if (ret.status == 'success') {

} else if (ret.status == 'error') {
var err_code = err.code;
switch(err_code) {
case -2:
api.alert({
msg : '對不起，語音發送失敗'
});
break;
case -1:
api.alert({
msg : '對不起，圖片發送失敗，未知錯誤'
});
break;
case 3001:
api.alert({
msg : '對不起，圖片發送失敗，服務器超時'
});
break;
case 405:
api.alert({
msg : '對不起，圖片發送失敗，您在黑名單中'
});
break;
case -10000:
api.alert({
msg : '對不起，圖片發送失敗，未調用 init 方法進行初始化'
});
break;
case -10001:
api.alert({
msg : '對不起，圖片發送失敗，未調用 connect 方法進行鏈接'
});
break;
case -10002:
api.alert({
msg : '對不起，圖片發送失敗，輸入參數錯誤'
});
break;
}
}
});
}

/*
* 發送會話歷史列表返回增長頭像和姓名和時間的json
* 周楓
* 2015-08-05
*/
function sendConListReJson(con_list, callback) {
api.ajax({
url : BASE_URL_ACTION + '/rongcloud/getConListReList',
method : 'post',
dataType : 'json',
data : {
values : {
"con_list" : con_list,
"ip_addr" : BASE_SERVER_IP,
"app_type" : BASE_APP_TYPE
}
}
}, function(ret, err) {
if (ret) {
if (ret.status == 'success') {
$api.setStorage('hh_index_list', ret.result);
callback(ret);
} else {
api.alert({
msg : '對不起，獲取會話列表失敗'
});
}

}
});
}

/*
* 清空某一會話的全部聊天消息記錄
* 周楓
* 2015-08-05
*/
function clearMessageById(user_id, conver_type) {
//首先移除會話列表
rong.removeConversation({
conversationType : conver_type,
targetId : user_id
}, function(ret, err) {
if (ret.status == 'success') {
//再真實刪除聊天記錄
rong.clearMessages({
conversationType : conver_type,
targetId : user_id
}, function(ret, err) {
if (ret.status == 'success') {
// api.toast({
// msg : '操做成功',
// duration : 1000,
// location : 'middle'
// });
//從新獲取會話列表
getCoversationList();
}
});
}
})
}

/*
* 清空全部會話及會話消息
* 周楓
* 2015-08-05
*/
function clearConversations() {
rong.clearConversations({
conversationTypes : ['PRIVATE', 'GROUP', 'SYSTEM']
}, function(ret, err) {
if (ret.status == 'success') {

} else {
api.alert({
msg : '對不起，刪除失敗'
});
}
//從新獲取會話列表
getCoversationList();
})
}

/*
* 清除未讀信息紅點和條數
* 周楓
* 2015-08-03
*/
function cleanMsg(target_id, conver_type) {
rong.getHistoryMessages({
conversationType : conver_type,
targetId : target_id,
oldestMessageId : -1,
count : 1
}, function(ret, err) {
if (ret.status != "success") {
api.alert({
msg : '清除未讀信息失敗'
});
}
})
}

/**
* 廢棄，由於融雲初始化有問題
* 同步當前用戶所屬的羣組信息到融雲服務器
* PS:因爲apicloud的參數問題，因此暫時啓用了
* 周楓
* 2015.08.24
*/
function initPersonGroup() {
var person_id = $api.getStorage('person_id');
var identity_id = $api.getStorage('identity');
var ip_addr = BASE_SERVER_IP;
//獲取當前人員羣組信息
api.ajax({
url : BASE_URL_ACTION + '/group/queryMyGroupForApp?person_id=' + person_id + '&identity_id=' + identity_id + '&ip_addr=' + ip_addr,
method : 'get',
dataType : 'text'
}, function(ret, err) {
var p_group = eval('(' + ret + ')');
if (p_group.success == true) {
//同步當前用戶所屬的羣組信息到融雲服務器
rong.syncGroup({
groups :
// p_group.groups
[{
// groupId : '975',
// groupName : '張福才',
// portraitUri : '../../image/person/group.png'
id : '975',
name : '張福才',
portraitUrl : '../../image/person/group.png'
}, {
// groupId : '976',
// groupName : '張福才2',
// portraitUri : '../../image/person/group.png'
id : '976',
name : '張福才2',
portraitUrl : '../../image/person/group.png'
}]
}, function(ret, err) {
api.toast({
msg : JSON.stringify(ret)
});
})
} else {
api.alert({
msg : '初始化羣組信息失敗:' + p_group.info
});
}
});
}

function beforeRender(data) {
var g_time = new getTimeTemplate();
//g_time爲想在template的標籤中執行的函數
data.g_time = g_time;
}

    這個頁面主要包括加載融雲的初始化和各類操做，全部函數都有註釋就不解釋了，總之，其餘頁面使用數據時都是使用監聽獲取數據的
    4. 會話頁面，包括hh_chat_window.html和hh_chat_frame.html兩個頁面，相關代碼寫在對應的js中
    hh_chat_window.html

css

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<meta name="format-detection" content="telephone=no"/>
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />

</head>
<style>
.history-date {
font-size: 12px;
}
#message-content {
overflow-y: auto;
}
#wrap {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
.topbar {
background: #1abc9c;
height: 50px;
/*border-bottom: 1px solid #DDDFE3;*/
line-height: 50px;
text-align: center;
display: none;
color: #ffffff;
font-size: 18px;
}
.activebar {
display: block;
}
.back {
position: absolute;
padding: 1px 10px 0px 10px;
height: 29px;
font-size: 15px;
/*color: #EFEDED;*/
/*z-index: 99999;*/
}
.mTitle {
width: 50%;
font-size: 18px;
text-align: center;
display: inline-block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div id="wrap">
<header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header">
<div id="cloud" class="topbar activebar">
<div id="back" class="back" onclick="back();" tapmode="">
<i class="aui-iconfont aui-icon-left"></i>
</div>
<div class="mTitle" id="mTitle"></div>
<a id='menu' class="aui-iconfont aui-icon-friends aui-pull-right" style="display:none;" onclick="showGroupListById();"></a>
</div>
</header>
<div class="aui-content aui-content-padded" id="message-content">
<p class="aui-text-center history-date"></p>
</div>
</div>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/base_config.js" ></script>
<script type="text/javascript" src="../../script/huihua/hh_chat_window.js"></script>
</body>
</html>

hh_chat_window.js

html

var header_t;
//頂部header高度
var header_h;
//發送id
var target_id;

var conver_type;
var h_from;
var person_name;
apiready = function() {
//定位header位置，留出上面電池等空隙，蘋果須要
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
header_t = $api.offset($api.byId('cloud'));
header_h = api.pageParam.header_h;
//當前會話用戶id和當前會話歷史消息從消息列表頁點擊傳遞進來
target_id = api.pageParam.targetId;
//真實姓名
person_name = api.pageParam.person_name;

conver_type = api.pageParam.conver_type;

//從哪一個頁面進入的聊天界面
h_from = api.pageParam.h_from;
initHeaer();

//當前target_id的最大會話id
var old_msg_id = api.pageParam.old_msg_id;
//打開聊天內容frame頁面
api.openFrame({
name : 'hh_chat_frame',
scrollToTop : true,
allowEdit : true,
url : '../../html/huihua/hh_chat_frame.html',
pageParam : {
'target_id' : target_id,
'old_msg_id' : old_msg_id,
'conver_type' : conver_type
},
rect : {
x : 0,
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h - 50,
},
//頁面是否彈動爲了下拉刷新使用
bounces : true
});

//安卓關閉
if (api.systemType == 'android') {
backFromChatForAndroid();
}

//加載uichatbox模塊
initUichatbox();

};

/**
* 安卓點擊返回的時候
* 周楓
* 2015.08.31
*/
function backFromChatForAndroid() {
api.addEventListener({
name : "keyback"
}, function(ret, err) {
back();
});
}

/**
*返回會話列表頁面
* 周楓
* 2015.08.08
*/
function back() {
switch(h_from) {
case 'hh_index':
//清楚紅點
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'cleanMsg("' + target_id + '","' + conver_type + '");'
});
//從新獲取會話列表
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'getCoversationList();'
});
break;
case 'txl_index':
//清楚紅點
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'cleanMsg("' + target_id + '","' + conver_type + '");'
});
//從新獲取會話列表
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'getCoversationList();'
});
api.execScript({
name : 'index',
frameName : 'txl_index',
script : 'loadData();'
});
api.execScript({
name : 'index',
frameName : 'txl_index',
script : 'showMyself();'
});

break;
case 'txl_content':
//清楚紅點
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'cleanMsg("' + target_id + '","' + conver_type + '");'
});
//從新獲取會話列表
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'getCoversationList();'
});

api.execScript({
name : 'txl_content_window',
frameName : 'txl_content_frame',
script : 'loadData();'
});
api.execScript({
name : 'txl_content_window',
frameName : 'txl_content_frame',
script : 'showMyself();'
});

break;
}

api.closeWin();
}

function reloadTxlIndex() {
// api.alert({
// msg : '11111'
// }, function(ret, err) {
// //coding...
// });
api.execScript({
name : 'index',
frameName : 'txl_index',
script : 'loadData();'
});
}

/**
*加載uichatbox模塊
* 周楓
* 2015.08.08
*/
function initUichatbox() {
//引入chatbox
var chatBox = api.require('UIChatBox');
//獲取表情存放路徑
var sourcePath = BASE_EMOTION_PATH;
//表情存放目錄
var emotionData;
//存儲表情
getImgsPaths(sourcePath, function(emotion) {
emotionData = emotion;
})
chatBox.open({
placeholder : '',
//輸入框顯示的最大行數（高度自適應）
maxRows : 4,
//自定義表情文件夾（表情圖片所在的文件夾，須同時包含一個與該文件夾同名的.json配置文件）的路徑
//.json文件內的 name 值必須與表情文件夾內表情圖片名對應
emotionPath : sourcePath,
//聊天輸入框模塊可配置的文本
texts : {
//（可選項）JSON對象；錄音按鈕文字內容
recordBtn : {
//（可選項）字符串類型；按鈕常態的標題，默認：'按住說話'
normalTitle : '按住說話',
//（可選項）字符串類型；按鈕按下時的標題，默認：'鬆開結束'
activeTitle : '鬆開結束'
}
},
//模塊各部分的樣式集合
styles : {
//（可選項）JSON對象；輸入區域（輸入框及兩側按鈕）總體樣式
inputBar : {
borderColor : '#d9d9d9',
bgColor : '#f2f2f2'
},
//（可選項）JSON對象；輸入框樣式
inputBox : {
borderColor : '#B3B3B3',
bgColor : '#FFFFFF'
},
//JSON對象；表情按鈕樣式
emotionBtn : {
normalImg : BASE_CHATBOX_PATH + '/chatBox_face1.png'
},
//（可選項）JSON對象；附加功能按鈕樣式，不傳則不顯示附加功能按鈕
extrasBtn : {
normalImg : BASE_CHATBOX_PATH + '/chatBox_add1.png'
},
//JSON對象；鍵盤按鈕樣式
keyboardBtn : {
normalImg : BASE_CHATBOX_PATH + '/chatBox_key1.png'
},
//（可選項）JSON對象；輸入框左側按鈕樣式，不傳則不顯示左邊的語音按鈕
speechBtn : {
normalImg : BASE_CHATBOX_PATH + '/chatBox_key1.png'
},
//JSON對象；「按住錄音」按鈕的樣式
recordBtn : {
//（可選項）字符串類型；按鈕常態的背景，支持rgb，rgba，#，圖片路徑（本地路徑，fs://，widget://）；默認：'#c4c4c4'
normalBg : '#c4c4c4',
//（可選項）字符串類型；按鈕按下時的背景，支持rgb，rgba，#，圖片路徑（本地路徑，fs://，widget://）；默認：'#999999'；
//normalBg 和 activeBg 必須保持一致，同爲顏色值，或同爲圖片路徑
activeBg : '#999999',
color : '#000',
size : 14
},
//（可選項）JSON對象；表情和附加功能面板的小圓點指示器樣式，若不傳則不顯示該指示器
indicator : {
//（可選項）字符串類型；配置指示器的顯示區域；默認：'both'
//取值範圍：
//both（表情和附加功能面板皆顯示）
//emotionPanel（表情面板顯示）
//extrasPanel（附加功能面板顯示）
target : 'both',
color : '#c4c4c4',
activeColor : '#9e9e9e'
}
},
//（可選項）點擊附加功能按鈕，打開的附加功能面板的按鈕樣式，配合 extrasBtn 一塊兒使用，若 extrasBtn 參數內 normalImg 屬性不傳則此參數可不傳
extras : {
titleSize : 10,
titleColor : '#a3a3a3',
//數組類型；附加功能按鈕的樣式
btns : [{
title : '圖片',
//（可選項）字符串類型；按鈕常態的背景圖片
normalImg : BASE_CHATBOX_PATH + '/chatBox_album1.png',
//（可選項）字符串類型；按鈕按下時的背景圖片
activeImg : BASE_CHATBOX_PATH + '/chatBox_album2.png'
}, {
title : '拍照',
normalImg : BASE_CHATBOX_PATH + '/chatBox_cam1.png',
activeImg : BASE_CHATBOX_PATH + '/chatBox_cam2.png'
}]
}
}, function(ret, err) {
//字符串類型；回調的事件類型，
//取值範圍：
//show（該模塊打開成功）
//send（用戶點擊發送按鈕）
//clickExtras（用戶點擊附加功能面板內的按鈕）
//數字類型；當 eventType 爲 clickExtras 時，此參數爲用戶點擊附加功能按鈕的索引，不然爲 undefined
//字符串類型；當 eventType 爲 send 時，此參數返回輸入框的內容，不然返回 undefined

//點擊附加功能面板
if (ret.eventType == 'clickExtras') {
var c_index = ret.index;
switch(c_index) {
case 0:
// api.confirm({
// title : "提示",
// msg : "您想要從哪裏選取圖片 ?",
// buttons : ["如今照", "相冊選", "取消"]
// }, function(ret, err) {
// //定義圖片來源類型
// var sourceType;
// if (1 == ret.buttonIndex) {/* 打開相機*/
// sourceType = "camera";
// } else if (2 == ret.buttonIndex) {
// sourceType = "album";
// } else {
// return;
// }
//相冊選
getPicture("album");
// });
break;
case 1:
//如今照
getPicture("camera");
break;
}

}
//點擊發送按鈕
if (ret.eventType == 'send') {
/*
*1.用戶輸入文字或表情
*/
/*用戶輸入表情或文字*/
/*使用讀文件方法，讀json*/
var sendMsg = transText(ret.msg);
if ($api.trimAll(sendMsg).length != 0) {
//發送消息的函數，後面會有介紹
//發送消息
// chat(sendMsg);
api.execScript({
name : '',
frameName : 'hh_chat_frame',
script : 'sendText("' + sendMsg + '","' + conver_type + '")'
});
/*將文字中的表情符號翻譯成圖片，並可自定義圖片尺寸*/
function transText(text, imgWidth, imgHeight) {
var imgWidth = imgWidth || 30;
var imgHeight = imgHeight || 30;
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;
});
textTransed = transferBr(textTransed);
return textTransed;
}

} else {
//爲ipad寫的
api.toast({
msg : '對不起，消息不能爲空',
duration : 2000,
location : "middle"
});
}

}
});

//加載錄音按鈕事件
/**
press（按下錄音按鈕）
press_cancel（鬆開錄音按鈕）
move_out（按下錄音按鈕後，從按鈕移出）
move_out_cancel（按下錄音按鈕後，從按鈕移出並鬆開按鈕）
move_in（move_out 事件後，從新移入按鈕區域）
*/
chatBox.addEventListener({
target : 'recordBtn',
name : 'press'
}, function(ret, err) {
//開始錄音
startRecord();
});
//（鬆開錄音按鈕）
chatBox.addEventListener({
target : 'recordBtn',
name : 'press_cancel'
}, function(ret, err) {
stopRecord();
});
//move_out（按下錄音按鈕後，從按鈕移出）
chatBox.addEventListener({
target : 'recordBtn',
name : 'move_out'
}, function(ret, err) {
api.execScript({
name : '',
frameName : 'hh_voice_window',
script : 'moveOut()'
});
});
//move_out_cancel（按下錄音按鈕後，從按鈕移出並鬆開按鈕）
chatBox.addEventListener({
target : 'recordBtn',
name : 'move_out_cancel'
}, function(ret, err) {
api.stopRecord(function(ret, err) {
if (ret) {
removefile(ret.path);
}
});
api.closeFrame({
name : 'hh_voice_window'
});
});
//move_in（move_out 事件後，從新移入按鈕區域）
chatBox.addEventListener({
target : 'recordBtn',
name : 'move_in'
}, function(ret, err) {
api.execScript({
name : '',
frameName : 'hh_voice_window',
script : 'moveIn()'
});
});
//輸入框綁定
/**
*
move（輸入框所在區域彈動事件）
change（輸入框所在區域高度改變）
showRecord（用戶點擊左側語音按鈕）
showEmotion（用戶點擊表情按鈕）
showExtras（用戶點擊右側附加功能按鈕，若是 open 時傳了 extras 參數纔會有此回調）

*/
//move（輸入框所在區域彈動事件）就是輸入框收起和彈出變化
chatBox.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);
});

//change（輸入框所在區域高度改變）
chatBox.addEventListener({
target : 'inputBar',
name : 'change'
}, function(ret, err) {
// api.toast({msg: JSON.stringify(ret),location: 'top'}); //50
// api.toast({msg: JSON.stringify(err),location: 'middle'}); //283
//點擊輸入框時會話界面高度發生變化
setChatFrameByInputChange(ret.inputBarHeight, ret.panelHeight);
});
}

/**
*發送消息
* 周楓
* 2015.08.08
* @param {Object} sendMsg
*/
//function chat(sendMsg) {
// //向會話列表頁發送消息事件
// api.sendEvent({
// name : 'sendMessage',
// extra : {
// type : 'text',
// targetId : '' + target_id + '',
// content : sendMsg,
// conversationType : 'PRIVATE',
// extra : ''
// }
// })
//}

/**
* 刪除文件
* 周楓
* 2015.08.10
* @param {Object} path
*/
function removefile(path) {
var fs = api.require('fs');
fs.remove({
path : path
}, function(ret, err) {
if (ret.status != true) {
// api.alert({
// msg : err.msg
// }, function(ret, err) {
// //coding...
// });
}
});
}

/**
*開始錄音
* 周楓
* 2015.08.10
*/
function startRecord() {
api.openFrame({
name : 'hh_voice_window',
url : '../../html/huihua/hh_voice_window.html',
scrollToTop : true,
rect : {
x : 0,
y : 0,
w : api.winWidth,
h : api.winHeight - 50,
},
});
//點擊後播放開啓錄音的聲音
api.startPlay({
path : 'widget://res/LowBattery.mp3'
}, function() {
api.startRecord();
});
}

/**
* 結束錄音
* path:'', //字符串，返回的音頻地址
duration:0 //數字類型，音頻的時長
* 周楓
* 2015.08.10
*/
function stopRecord() {
api.stopRecord(function(ret, err) {
if (ret) {
if (ret.duration == 0) {
api.execScript({
name : '',
frameName : 'hh_voice_window',
script : 'moveShort()'
});
removefile(ret.path);
} else {
api.sendEvent({
name : 'setVoice',
extra : {
voice_result : ret,
conver_type : conver_type
}
});
// api.execScript({
// name : '',
// frameName : 'hh_chat_frame',
// script : 'sendVoi("' + ret.path + '",' + ret.duration + ')'
// });
//
// sendVoiceMessage(mytoken, ret.path, ret.duration);
// $api.val($api.byId("record_hid"), ret.path);
}
setTimeout("api.closeFrame({name: 'hh_voice_window'})", 400);
}
});
}

/**
* 點擊輸入框時會話界面高度發生變化
* inputBarHeight: 50, //數字類型；輸入框及左右按鈕總體區域的高度，僅當監聽 inputBar 的 move 和 change 事件時本參數有值
panelHeight: 300 //數字類型；輸入框下邊緣距離屏幕底部的高度，僅當監聽 inputBar 的 move 和 change 事件時本參數有值
* 周楓
* 2015.08.10
*/
function setChatFrameByInputMove(inputBarHeight, panelHeight) {
if (inputBarHeight > 0) {//輸入框打開時
api.setFrameAttr({
name : 'hh_chat_frame',
rect : {
x : 0,
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h - inputBarHeight - panelHeight - 35,
},
});
} else {//關閉時
api.setFrameAttr({
name : 'chatFrame',
rect : {
x : 0,
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h - inputBarHeight - 35,
},
});
}
setTimeout('setBottom()', 200);
}

/**
* 輸入框內文字行數，現設置爲最多4行
* inputBarHeight: 50, //數字類型；輸入框及左右按鈕總體區域的高度，僅當監聽 inputBar 的 move 和 change 事件時本參數有值
panelHeight: 300 //數字類型；輸入框下邊緣距離屏幕底部的高度，僅當監聽 inputBar 的 move 和 change 事件時本參數有值
* 周楓
* 2015.08.10
*/
function setChatFrameByInputChange(inputBarHeight, panelHeight) {
api.setFrameAttr({
name : 'hh_chat_frame',
rect : {
x : 0,
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h - inputBarHeight - panelHeight - 35,
},
});
setTimeout('setBottom()', 200);
}

function setBottom() {
api.execScript({
name : '',
frameName : 'hh_chat_frame',
script : 'goBottom()'
});
}

/**
* 經過系統相冊或拍照獲取圖片和視頻
sourceType：（可選項）圖片源類型，從相冊、圖片庫或相機獲取圖片， library：圖片庫，camera：相機，album：相冊
encodingType：（可選項）返回圖片類型，jpg或png，默認值：png
mediaValue：（可選項）媒體類型，圖片或視頻，pic：圖片，video：視頻
destinationType：（可選項）返回數據類型，指定返回圖片地址或圖片通過base64編碼後的字符串
allowEdit：（可選項）是否能夠選擇圖片後進行編輯，只支持iOS，默認值：false
quality：（可選項）圖片質量，只針對jpg格式圖片（0-100整數），默認值：50
targetWidth：（可選項）壓縮後的圖片寬度，圖片會按比例適配此寬度，默認值：原圖寬度
targetHeight：（可選項）壓縮後的圖片高度，圖片會按比例適配此高度，默認值：原圖高度
saveToPhotoAlbum：（可選項）拍照或錄製視頻後是否保存到相冊，默認值：false
callback
{
data:"", //圖片路徑
base64Data:"", //base64數據，destinationType爲base64時返回
duration:0 //視頻時長（數字類型）
}
* 經過系統相冊或拍照獲取圖片和視頻
* 周楓
* 2015.08.11
* @param {Object} sourceType
*/
function getPicture(sourceType) {
switch(sourceType) {
case 'camera':
//獲取一張圖片
api.getPicture({
sourceType : sourceType,
encodingType : 'png',
mediaValue : 'pic',
allowEdit : false,
quality : 80,
// targetWidth : 100,
// targetHeight : 1280,
saveToPhotoAlbum : true
}, function(ret, err) {
if (ret) {
var imgSrc = ret.data;
if (imgSrc != "") {
api.sendEvent({
name : 'setPicurl',
extra : {
imgSrc : imgSrc,
pic_source : 'camera',
conver_type : conver_type
}
});
}
// sendPic(imgSrc);
}
});
break;
case 'album':
//UIMediaScanner 是一個多媒體掃描器，可掃描系統的圖片、視頻等多媒體資源
var obj = api.require('UIMediaScanner');
obj.open({
//（可選項）圖片顯示的列數，須大於1
column : 4,
//（可選項）圖片排序方式,asc（舊->新）,desc（新->舊）
sort : {
key : 'time',
order : 'desc'
},
//（可選項）模塊各部分的文字內容
texts : {
stateText : '已選擇*項',
cancelText : '取消',
finishText : '完成'
},
styles : {
bg : '#fff',
mark : {
icon : '',
position : 'top_right',
size : 20
},
nav : {
bg : '#eee',
stateColor : '#000',
stateSize : 18,
cancleBg : 'rgba(0,0,0,0)',
cancelColor : '#000',
cancelSize : 18,
finishBg : 'rgba(0,0,0,0)',
finishColor : '#000',
finishSize : 18
}
}
}, function(ret) {
//callback
// list: [{ //數組類型；返回選定的資源信息數組
//path: '', //字符串類型；資源路徑，返回資源在本地的絕對路徑
//thumbPath: '', //字符串類型；縮略圖路徑，返回資源在本地的絕對路徑
//suffix: '', //字符串類型；文件後綴名，如：png，jpg, mp4
//size: 1048576, //數字類型；資源大小，單位（Bytes）
//time: '2015-06-29 15:49' //字符串類型；資源建立時間，格式：yyyy-MM-dd HH:mm:ss
//}]
if (ret) {
if (getJsonObjLength(ret.list) != 0) {
api.sendEvent({
name : 'setPicurl',
extra : {
image_list : ret.list,
pic_source : 'album',
conver_type : conver_type
}
});
}
}
});
break;
}

}

/**
* 根據羣組id獲取羣組信息頁面
* 周楓
* 2015.09.11
*/
function showGroupListById() {
getGroupListById(function(group_list) {
api.openWin({
name : 'hh_group_window',
url : 'hh_group_window.html',
bounces : true,
animation : 'push',
delay : 1,
scrollToTop : true,
pageParam : {
'targetId' : target_id,
'header_h' : header_h,
'group_list' : group_list,
'group_name' : person_name
},
rect : {
x : 0,
y : 'auto',
w : 'auto',
h : 'auto'
}
});
});
}

function getGroupListById(callback) {
api.ajax({
url : BASE_URL_ACTION + '/dsjxt/getPersonInfoByGroupId?groupId=' + target_id + '&app_type=' + BASE_APP_TYPE,
method : 'get',
dataType : 'text'
}, function(ret, err) {
var obj = eval('(' + ret + ')');
if (obj) {
callback(obj);
}
});
}

function initHeaer() {
//若是是羣組會話，則顯示右上角羣組成員
if (conver_type == 'GROUP') {
$api.css($api.byId('menu'), 'display:inline;');
}
$api.html($api.byId('mTitle'), person_name);
}

hh_chat_frame.html

html5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<meta name="format-detection" content="telephone=no"/>
<title>會話頁面frame</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
.history-date { font-size: 12px; text-align: center;}
.pic_thumb { max-width:100px;}
</style>
</head>
<body>
<div class="aui-content aui-content-padded" style="padding-top:10px; padding-bottom: 10px;" id="message-content">


 

</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript" src="../../script/base_config.js"></script>
<script type="text/javascript" src="../../script/huihua/hh_chat_frame.js"></script>
</html>

hh_chat_frame.js
java

//最後一條消息的 Id，獲取此消息以前的 count 條消息，沒有消息第一次調用應設置爲: -1
var old_msg_id = -1;
//定義發送人
var target_id;

var conver_type;

apiready = function() {
//當前target_id的歷史聊天記錄
var historyMessages = api.pageParam.historyMessages;
target_id = api.pageParam.target_id;
old_msg_id = api.pageParam.old_msg_id;
conver_type = api.pageParam.conver_type;
//頁面加載時獲取歷史信息
setTimeout('initGetHistory("' + target_id + '", "' + old_msg_id + '", "' + conver_type + '", ' + 10 + ')', '200');
setTimeout('goBottom()', 500);
//監聽收到新消息寫入
api.addEventListener({
name : 'getNewMessage'
}, function(ret) {
if (ret && ret.value) {
//監聽成功
var newMessageData = ret.value;
// api.alert({
// msg : JSON.stringify(newMessageData)
// });
// api.alert({msg:newMessageData.data.objectName });
//根據targetId和當前會話用戶id判斷一下，若是相等則寫入
if (newMessageData.data.targetId == target_id) {
//獲取會話列表頁數據
var hh_index_list = $api.getStorage('hh_index_list');
//會話頭像
var receive_img;

for (var i = 0; i < hh_index_list.length; i++) {
if ((newMessageData.data.targetId == target_id) && (hh_index_list[i].targetId == newMessageData.data.senderUserId)) {
receive_img = hh_index_list[i].avatar_url;
break;
}
if ((newMessageData.data.targetId == target_id) && (hh_index_list[i].targetId != newMessageData.data.senderUserId)) {
receive_img = BASE_URL_ACTION + '/html/thumb/Material/0D/0D7B3741-0C3D-D93C-BA3D-74668271F934.jpg@50w_50h_100Q_1x.jpg';
}
}
//若是是羣組則顯示發送人姓名
if (newMessageData.data.conversationType == "GROUP") {
var group_data = $api.getStorage('group_data');
var sender_name = group_data[newMessageData.data.senderUserId];
switch(newMessageData.data.objectName) {
case 'RC:TxtMsg':
$api.append($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-title"><em>' + sender_name + '</em></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + newMessageData.data.content.text + '</span></div></div>');
break;
case 'RC:ImgMsg':
$api.append($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-title"><em>' + sender_name + '</em></div><div class="aui-chat-receiver-img"><div class="aui-chat-left-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + newMessageData.data.content.imageUrl + '\')" src="' + newMessageData.data.content.thumbPath + '"></span></div></div>');
break;
case 'RC:VcMsg':
// alert('11111111111111111' + JSON.stringify(newMessageData));
var con = "";
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-title"><em>' + sender_name + '</em></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + newMessageData.data.content.duration + '\'\'<img id="voice_' + newMessageData.data.messageId + '" alt="97" src="../../image/chatBox/mrecelog.png" width="40px" height="30px" onclick="playVoice(\'' + newMessageData.data.messageId + '\',\'' + newMessageData.data.content.voicePath + '\',1);"/></span></div></div>';
// alert(con);
$api.append($api.byId("message-content"), con);
break;
}
} else {
switch(newMessageData.data.objectName) {
case 'RC:TxtMsg':
$api.append($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + newMessageData.data.content.text + '</span></div></div>');
break;
case 'RC:ImgMsg':
$api.append($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-img"><div class="aui-chat-left-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + newMessageData.data.content.imageUrl + '\')" src="' + newMessageData.data.content.thumbPath + '"></span></div></div>');
break;
case 'RC:VcMsg':
// alert('11111111111111111' + JSON.stringify(newMessageData));
var con = "";
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + newMessageData.data.content.duration + '\'\'<img id="voice_' + newMessageData.data.messageId + '" alt="97" src="../../image/chatBox/mrecelog.png" width="40px" height="30px" onclick="playVoice(\'' + newMessageData.data.messageId + '\',\'' + newMessageData.data.content.voicePath + '\',1);"/></span></div></div>';
// alert(con);
$api.append($api.byId("message-content"), con);
break;
}
}

}
}
goBottom();
});

//監聽發送新消息寫入,這個事件主要來處理髮送消息插入到會話窗口中
api.addEventListener({
name : 'insertSendMessage'
}, function(ret) {
if (ret && ret.value) {
var newMessageData = ret.value;
//個人頭像
var sender_img = $api.getStorage('avatar_url');
// alert(JSON.stringify(newMessageData));
//RC:TxtMsg：文本消息，RC:VcMsg：語音消息，RC:ImgMsg：圖片消息，RC:LBSMsg：位置消息
switch (newMessageData.data.message.objectName) {
case 'RC:TxtMsg':
//頁面寫入發送消息
$api.append($api.byId("message-content"), '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>' + newMessageData.data.message.content.text + '</span></div></div>');
break;
case 'RC:ImgMsg':
if (api.systemType == 'ios') {
$api.append($api.byId("message-content"), '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-img"><div class="aui-chat-right-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + newMessageData.data.message.content.imageUrl + '\')" src="' + newMessageData.data.message.content.thumbPath + '"></span></div></div>');
} else if (api.systemType == 'android') {
$api.append($api.byId("message-content"), '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-img"><div class="aui-chat-right-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + newMessageData.data.message.content.localPath + '\')" src="' + newMessageData.data.message.content.thumbPath + '"></span></div></div>');
}

break;
case 'RC:VcMsg':
var con = "";
con += '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>' + newMessageData.data.message.content.duration + '\'\'<img id="voice_' + newMessageData.data.message.messageId + '" alt="98" src="../../image/chatBox/msendlog.png" width="40px" height="30px" onclick="playVoice(\'' + newMessageData.data.message.messageId + '\',\'' + newMessageData.data.message.content.voicePath + '\',0);"/></span></div></div>';
$api.append($api.byId("message-content"), con);
break;
}

}
goBottom();
});
//綁定下拉刷新歷史會話事件
api.setRefreshHeaderInfo({
visible : true,
loadingImg : 'widget://image/local_icon_refresh.png',
bgColor : '#F5F5F5',
textColor : '#8E8E8E',
textDown : '下拉加載更多...',
textUp : '鬆開加載...',
showTime : true
}, function(ret, err) {
//從服務器加載數據，完成後調用api.refreshHeaderLoadDone()方法恢復組件到默認狀態
//調用獲取歷史會話監聽
initGetHistory(target_id, old_msg_id, conver_type, 20);
});
//獲取歷史會話監聽，渲染頁面
api.addEventListener({
name : 'setHistory'
}, function(ret) {
// api.alert({
// msg:'333:'+JSON.stringify(ret)
// },function(ret,err){
// //coding...
// });
if (ret && ret.value) {
var historyMessages = ret.value.data;
// api.alert({
// msg:JSON.stringify(historyMessages)
// },function(ret,err){
// //coding...
// });
if (historyMessages != '') {
var con = '';
//倒敘循環會話記錄
for (var i = getJsonObjLength(historyMessages) - 1; i >= 0; i--) {
var targetid = historyMessages[i].targetId;
var content = '';
//文字仍是圖片仍是聲音 RC:TxtMsg：文本消息，RC:VcMsg：語音消息，RC:ImgMsg：圖片消息，RC:LBSMsg：位置消息
var type = historyMessages[i].objectName;
//SEND 仍是 RECEVIE
var dir = historyMessages[i].messageDirection;
var start = historyMessages[i].sentTime;
// var end = new Date();
var g_time = new getTimeTemplate();

//個人頭像
var sender_img = $api.getStorage('avatar_url');
//計算會話時間
if (i == historyMessages.length - 1) {
con += '<div class="aui-chat-sender history-date"><p>' + g_time.getTime(start, 1) + '</p></div>';
} else {
var M1 = historyMessages[i].sentTime;
var M2 = historyMessages[i + 1].sentTime;
if ((M1 - M2) >= 180 * 1000) {
con += '<div class="aui-chat-sender history-date"><p>' + g_time.getTime(start, 1) + '</p></div>';
}
}
//加載會話內容
if (dir == 'SEND') {
switch(type) {
case 'RC:TxtMsg':
con += '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>' + historyMessages[i].content.text + '</span></div></div>';
break;
case 'RC:VcMsg':
con += '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>' + historyMessages[i].content.duration + '\'\'<img id="voice_' + historyMessages[i].messageId + '" alt="98" src="../../image/chatBox/msendlog.png" width="40px" height="30px" onclick="playVoice(\'' + historyMessages[i].messageId + '\',\'' + historyMessages[i].content.voicePath + '\',0);"/></span></div></div>';
break;
case 'RC:ImgMsg':
con += '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="' + sender_img + '"></div><div class="aui-chat-sender-img"><div class="aui-chat-right-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + historyMessages[i].content.imageUrl + '\')" src="' + historyMessages[i].content.thumbPath + '"></span></div></div>'
break;
}

//渲染髮送會話
// $api.prepend($api.byId("message-content"), '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="../../image/person/demo2.png"></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>' + historyMessages[i].content.text + '</span></div></div>');
} else {
//獲取會話列表頁數據
var hh_index_list = $api.getStorage('hh_index_list');
//會話頭像
var receive_img;
for (var j = 0; j < hh_index_list.length; j++) {
if (hh_index_list[j].targetId == historyMessages[i].senderUserId) {
receive_img = hh_index_list[j].avatar_url;
} else {
// receive_img = '../../image/person/demo_m.png';
receive_img = BASE_URL_ACTION + '/html/thumb/Material/0D/0D7B3741-0C3D-D93C-BA3D-74668271F934.jpg@50w_50h_100Q_1x.jpg';
}
}
if (historyMessages[i].conversationType == "GROUP") {
//獲取羣組人員姓名
var group_data = $api.getStorage('group_data');
var sender_name = group_data[historyMessages[i].senderUserId];
switch(type) {
case 'RC:TxtMsg':
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-title"><em>' + sender_name + '</em></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + historyMessages[i].content.text + '</span></div></div>';
break;
case 'RC:VcMsg':
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-title"><em>' + sender_name + '</em></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + historyMessages[i].content.duration + '\'\'<img id="voice_' + historyMessages[i].messageId + '" alt="97" src="../../image/chatBox/mrecelog.png" width="40px" height="30px" onclick="playVoice(\'' + historyMessages[i].messageId + '\',\'' + historyMessages[i].content.voicePath + '\',1);"/></span></div></div>';
break;
case 'RC:ImgMsg':
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-title"><em>' + sender_name + '</em></div><div class="aui-chat-receiver-img"><div class="aui-chat-left-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + historyMessages[i].content.imageUrl + '\')" src="' + historyMessages[i].content.thumbPath + '"></span></div></div>'
break;

//渲染接收會話
// $api.prepend($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="../../image/person/demo2.png"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + historyMessages[i].content.text + '</span></div></div>');
}
} else {
switch(type) {
case 'RC:TxtMsg':
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + historyMessages[i].content.text + '</span></div></div>';
break;
case 'RC:VcMsg':
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + historyMessages[i].content.duration + '\'\'<img id="voice_' + historyMessages[i].messageId + '" alt="97" src="../../image/chatBox/mrecelog.png" width="40px" height="30px" onclick="playVoice(\'' + historyMessages[i].messageId + '\',\'' + historyMessages[i].content.voicePath + '\',1);"/></span></div></div>';
break;
case 'RC:ImgMsg':
con += '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="' + receive_img + '"></div><div class="aui-chat-receiver-img"><div class="aui-chat-left-triangle"></div><span><img class="pic_thumb" onclick="openImage(\'' + historyMessages[i].content.imageUrl + '\')" src="' + historyMessages[i].content.thumbPath + '"></span></div></div>'
break;

//渲染接收會話
// $api.prepend($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="../../image/person/demo2.png"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + historyMessages[i].content.text + '</span></div></div>');
}
}

}
//獲取刷新後最後一條ID
if (i == historyMessages.length - 1) {
old_msg_id = historyMessages[i].messageId;
}
}
// $api.css($api.byId('hh_update_div'), 'display:none;');
// api.alert({
// msg: con
// },function(ret,err){
// //coding...
// });
//加載歷史聊天記錄
$api.prepend($api.byId("message-content"), con);
}

}
//通知頂部下拉刷新數據加載完畢，組件會恢復到默認狀態
api.refreshHeaderLoadDone();
//隱藏進度提示框
api.hideProgress();
if (old_msg_id == -1) {
goBottom();
}
});

// //監聽發送新消息寫入,這個事件主要來處理髮送消息插入到會話窗口中
// api.addEventListener({
// name : 'insertSendMessage'
// }, function(ret) {
// if (ret && ret.value) {
// var newMessageData = ret.value;
// // alert(JSON.stringify(newMessageData));
// //頁面寫入發送消息
// $api.append($api.byId("message-content"), '<div class="aui-chat-sender"><div class="aui-chat-sender-avatar"><img src="../../image/person/demo2.png"></div><div class="aui-chat-sender-cont"><div class="aui-chat-right-triangle"></div><span>' + newMessageData.data.message.content.text + '</span></div></div>');
// }
// });
// //監聽收到新消息寫入
// api.addEventListener({
// name : 'getNewMessage'
// }, function(ret) {
// if (ret && ret.value) {
// //監聽成功
// var newMessageData = ret.value;
// //根據targetId和當前會話用戶id判斷一下，若是相等則寫入
// if (newMessageData.data.targetId == targetId) {
// $api.append($api.byId("message-content"), '<div class="aui-chat-receiver"><div class="aui-chat-receiver-avatar"><img src="../../image/person/demo2.png"></div><div class="aui-chat-receiver-cont"><div class="aui-chat-left-triangle"></div><span>' + newMessageData.data.content.text + '</span></div></div>');
// }
// }
// });
//綁定發送多個圖片的監聽
sendPic();
//發送語音消息
sendVoi();
//從後臺返回到前臺
reAppFromBack();
//下拉刷新數據
// refreshHeaderInfo();
}
/**
*滾動頁面底部
* 周楓
* 2015.08.11
*/
function goBottom() {
document.getElementsByTagName('body')[0].scrollTop = document.getElementsByTagName('body')[0].scrollHeight;
}

/**
* 發送文本消息
* 周楓
* 2015.08.08
* @param {Object} sendMsg
*/
function sendText(sendMsg, conver_type) {
//向會話列表頁發送消息事件
api.sendEvent({
name : 'sendMessage',
extra : {
type : 'text',
targetId : '' + target_id + '',
content : sendMsg,
conversationType : conver_type,
extra : ''
}
})
}

/**
* 發送圖片消息
* 周楓
* 2015.08.11
* @param {Object} img_url
*/
function sendPic() {
api.addEventListener({
name : 'setPicurl'
}, function(ret) {
if (ret && ret.value) {
var value = ret.value;
// alert(JSON.stringify(value));
switch(value.pic_source) {
case 'camera':
//向會話列表頁發送消息事件
api.sendEvent({
name : 'sendMessage',
extra : {
type : 'pic',
targetId : '' + target_id + '',
imgSrc : value.imgSrc,
conversationType : value.conver_type,
pic_source : value.pic_source,
extra : ''
}
})
break;
case 'album':
//向會話列表頁發送消息事件
api.sendEvent({
name : 'sendMessage',
extra : {
type : 'pic',
targetId : '' + target_id + '',
img_list : value.image_list,
conversationType : value.conver_type,
pic_source : value.pic_source,
extra : ''
}
})
break;
}

}
});

}

/**
* 發送語音消息
* 周楓
* 2015.08.12
*/
function sendVoi() {
api.addEventListener({
name : 'setVoice'
}, function(ret) {
if (ret && ret.value) {
var value = ret.value.voice_result;
// alert(JSON.stringify(value));
//向會話列表頁發送消息事件
api.sendEvent({
name : 'sendMessage',
extra : {
type : 'voi',
targetId : '' + target_id + '',
voicePath : value.path,
duration : value.duration,
conversationType : ret.value.conver_type,
extra : ''
}
})
}
});
}

/**
* 展現圖片
* 周楓
* 2015.08.12
* @param {Object} img_url
*/
function openImage(img_url) {
var img_urls = new Array();
img_urls[0] = img_url;
var obj = api.require('imageBrowser');
obj.openImages({
imageUrls : img_urls,
//是否以九宮格方式顯示圖片
showList : false,
activeIndex : 0
});
}

/**
* 播放語音
* 周楓
* 2015.08.12
*/
function playVoice(id, voicePath, whosend) {
var objs = document.getElementsByTagName("img");
for (var i = 0; i < objs.length; i++) {
if (objs[i].alt == '98') {
objs[i].src = '../../image/chatBox/msendlog.png';
} else if (objs[i].alt == '97') {
objs[i].src = '../../image/chatBox/mrecelog.png';
}
}
api.stopPlay();
if (whosend == 0) {
document.getElementById('voice_' + id).src = '../../image/chatBox/msendgif.gif';
} else {
document.getElementById('voice_' + id).src = '../../image/chatBox/mrecegif.gif';
}
api.startPlay({
path : voicePath
}, function() {
if (whosend == 0) {
document.getElementById('voice_' + id).src = '../../image/chatBox/msendlog.png';
} else {
document.getElementById('voice_' + id).src = '../../image/chatBox/mrecelog.png';
}
});
// alert(duration+','+voicePath);
}

/**
* 獲取歷史聊天記錄
* 周楓
* 2015.08.20
* @param {Object} target_id 會話人
* @param {Object} old_msg_id 最新會話id
* @param {Object} conver_type 會話類型
* @param {Object} msg_count 獲取條數
*/
function initGetHistory(target_id, old_msg_id, conver_type, msg_count) {
api.sendEvent({
name : 'getHistory',
extra : {
type : conver_type,
old_msg_id : old_msg_id,
target_id : target_id,
msg_count : msg_count
}
});
}

/**
* 從後臺返回
* 周楓
* 2015.09.02
*/
function reAppFromBack() {
api.addEventListener({
name : 'resume'
}, function(ret, err) {
goBottom();
});
}

//點擊出現氣泡按鈕功能，暫未實現
//window.addEventListener("touchstart", showBubbleMenu);
//
//function showBubbleMenu(event) {
// var touch = event.touches[0];
// var centerX = touch.clientX;
// var centerY = touch.clientY;
// var bubbleMenu = api.require('bubbleMenu');
// var btnArray = [{
// "title" : "複製"
// }, {
// "title" : "刪除"
// }];
//
// bubbleMenu.open({
// centerX : centerX,
// centerY : centerY,
// btnArray : btnArray,
// fixedOn : api.frameName
// }, function(ret, err) {
// var btn = btnArray[ret.index];
// api.toast({
// msg : '您點擊了：' + btn.title + '按鈕',
// location : 'top'
// });
// });
//}

5. 通信錄頁面，包括txl_index_window.html和txl_content_window.html兩部分，具體以下
txl_index_window.html
android

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<meta name="format-detection" content="telephone=no"/>
<title>通信錄列表</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
body {
}
</style>
</head>
<body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/template.js"></script>
<script type="text/javascript" src="../../script/base_config.js"></script>
<script type="text/javascript" src="../../script/tongxunlu/txl_index_window.js"></script>
</body>
</html>

txl_index_window.js
ios

//頂部header高度
var header_h;

//var listContact;
//定義user_id
var person_id;
//定義身份
var person_identity;
var footer_h;

var old_msg_id = -1;
apiready = function() {
//定位header位置，留出上面電池等空隙，蘋果須要
var $header = $api.dom('header');
$api.fixIos7Bar($header);
header_h = api.pageParam.header_h;
footer_h = api.pageParam.footer_h;
//加載 listContact 模塊
listContact = api.require('listContact');
person_id = $api.getStorage('person_id');
person_identity = $api.getStorage('identity');

//監聽來自通信錄頁面獲取最新會話id的事件
api.addEventListener({
name : 'setOldMessageId'
}, function(ret) {

if (ret && ret.value) {
var value = ret.value;
old_msg_id = value.old_msg_id;
}
});
};

/**
* 加載通信錄列表
* 周楓
* 2015.08.18
*/
function loadData() {
//根據用戶ID獲取通信錄數據
getTongXunluByUserId(person_id, person_identity, function(txl_data) {
//打開list
listContact.open({
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h - footer_h,
cellBgColor : '#FFFFFF',
cellHeight : 60,
indicator : { },
data : txl_data,
borderColor: '#DDDFE3'
}, function(ret, err) {
api.hideProgress();
// index: //點擊某個cell所在區域內的cell的下標
// section: //被點擊的cell所在的區域的下標
// key： //被點擊的cell的區域的key
// clickType: //點擊類型，0-cell；1-右邊按鈕；2-左邊的按鈕
// btnIndex: //點擊按鈕時返回其下標
//點擊index值
var r_i = ret.index;
// api.alert({
// msg:'r_i:'+r_i+',key:'+ret.key+',txl_data:'
// },function(ret,err){
// //coding...
// });
//json串長度
// var l_d = getJsonObjLength(txl_data.common);
//安卓下只有common亂序
// if (ret.key == 'common') {
// if (api.systemType == 'android') {
// //算出正確的值，由於安卓有BUG倒敘
// r_i = l_d - (r_i + 1);
// }
// }

//名字
var title = txl_data[ret.key][r_i].title;
//類型： 1：羣組 2：學校 3：班級 4:好友
var t = txl_data[ret.key][r_i].t;
//登陸名,target_id
var target_id = txl_data[ret.key][r_i].login_name;

// api.alert({
// msg: 'target_id：'+target_id+',id：'+id+',title:'+title+',t:'+t+',key:'+ret.key + ",index:" + ret.index+',section:'+ret.section
// });
if (t == 2 || t == 3) {
// hideMyself();
//班級、學校的ID
var id = txl_data[ret.key][r_i].id;
api.openWin({
name : 'txl_content_window',
url : 'txl_content_window.html',
bounces : true,
scrollToTop : true,
animation : 'push',
delay : 1,
pageParam : {
'header_h' : header_h,
'id' : id,
'title' : title,
't' : t
},
rect : {
x : 0,
y : 'auto',
w : 'auto',
h : 'auto'
}
});

} else if (t == 1) {
//初始化羣組數據給融雲服務器
initGroupInfoByUserId(function(init_group_result) {
if (init_group_result.code == '200') {
//羣組
var id = txl_data[ret.key][r_i].id;
api.openWin({
name : 'txl_content_window',
url : 'txl_content_window.html',
bounces : true,
scrollToTop : true,
animation : 'push',
delay : 1,
pageParam : {
'header_h' : header_h,
'id' : id,
'title' : title,
't' : t
},
rect : {
x : 0,
y : 'auto',
w : 'auto',
h : 'auto'
}
});
}
});
} else if (t == 4) {
//發送target_id獲取最新會話id
api.sendEvent({
name : 'getOldMessageId',
extra : {
target_id : target_id,
conver_type : 'PRIVATE',
count : 1
}
});
//打開會話頁面
setTimeout('execHhList("' + target_id + '","' + title + '","PRIVATE");', 500);
}
hideMyself();
closeMyself();
});
});

}

/**
* 根據用戶ID獲取通信錄數據
* 周楓
* 2015.08.21
*/
function getTongXunluByUserId(user_id, user_identity, callback) {
//api.alert({
// msg:user_id+','+user_identity+','+BASE_APP_TYPE
//},function(ret,err){
// //coding...
//});
api.ajax({
url : BASE_URL_ACTION + '/dsjxt/getAddressBookInfo?user_id=' + user_id + '&user_identity=' + user_identity + '&app_type=' + BASE_APP_TYPE,
method : 'get',
dataType : 'text'
}, function(ret, err) {
var obj = eval('(' + ret + ')');
if (obj) {
callback(obj);
}
});
}

/**
* 初始化羣組數據給融雲服務器
* 周楓
* 2015.09.10
*/
function initGroupInfoByUserId(callback) {
var login_name = $api.getStorage('login_name');
var person_id = $api.getStorage('person_id');
var identity = $api.getStorage('identity');
api.ajax({
url : BASE_URL_ACTION + '/rongcloud/initGroupInfoByUserId?login_name=' + login_name + '&identity=' + identity + '&person_id=' + person_id + '&ip_addr=' + BASE_SERVER_IP + '&app_type=' + BASE_APP_TYPE,
method : 'get',
dataType : 'json'
}, function(ret, err) {
if (ret.code != '200') {
api.alert({
msg : "對不起，同步羣組信息失敗。"
});
} else {
callback(ret);
}
});
}

/**
* 關閉列表
* 周楓
* 2015.08.18
*/
function closeMyself() {
listContact.close();
// api.closeWin();
}

function hideMyself() {
listContact.hide();
}

function showMyself() {
listContact.show();
}

/**
* 延遲打開會話聊天界面
* 周楓
* 2015.08.24
* @param {Object} target_id
* @param {Object} title
* @param {Object} conver_type
* target_id, old_msg_id, person_name, conver_type
*/
function execHhList(target_id, title, conver_type) {
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'openHhList("' + target_id + '",' + old_msg_id + ',"' + title + '","' + conver_type + '","txl_index");'
});
}

通信錄內容頁面 txl_content_window.html
web

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<meta name="format-detection" content="telephone=no"/>
<title>會話列表</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
.history-date {
font-size: 12px;
}
#message-content {
overflow-y: auto;
}
#wrap {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
.topbar {
background: #1abc9c;
height: 50px;
/*border-bottom: 1px solid #DDDFE3;*/
line-height: 50px;
text-align: center;
display: none;
color: #ffffff;
font-size: 18px;
}
.activebar {
display: block;
}
.back {
position: absolute;
padding: 1px 10px 0px 10px;
height: 29px;
font-size: 15px;
/*color: #EFEDED;*/
/*z-index: 99999;*/
}
</style>
</head>
<body>
<div id="wrap">
<header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header">
<div id="cloud" class="topbar activebar">
<div id="back" class="back" onclick="back()" tapmode="">
<i class="aui-iconfont aui-icon-left"></i>
</div>
<div class="mTitle" id="mTitle"></div>
</div>
</header>
<div class="aui-content aui-content-padded" id="message-content">
<p class="aui-text-center history-date"></p>
</div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/base_config.js"></script>
<script type="text/javascript" src="../../script/tongxunlu/txl_content_window.js"></script>
</body>

</html>

txl_content_window.js
ajax

//頂部header高度
var header_h;
var id;
var title;
//類型： 1：羣組 2：學校 3：班級 4:好友
var t;
apiready = function() {
//定位header位置，留出上面電池等空隙，蘋果須要
var header = $api.byId('aui-header');
$api.fixStatusBar(header);

header_h = api.pageParam.header_h;
title = api.pageParam.title;
$api.html($api.byId('mTitle'), title);
id = api.pageParam.id;
t = api.pageParam.t;

//安卓關閉
if (api.systemType == 'android') {
backFromChatForAndroid();
}

// api.execScript({
// name:'index',
// frameName : 'txl_index',
// script : 'closeMyself();'
// });

//打開通信錄內容frame頁面
api.openFrame({
name : 'txl_content_frame',
scrollToTop : true,
url : '../../html/tongxunlu/txl_content_frame.html',
pageParam : {
'id' : id,
't' : t,
'header_h' : header_h
},
rect : {
x : 0,
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h,
},
//頁面是否彈動爲了下拉刷新使用
bounces : true
});
}
/**
*返回會話列表頁面
* 周楓
* 2015.08.08
*/
function back() {
api.execScript({
name : 'index',
frameName : 'txl_index',
script : 'showMyself();'
});
api.execScript({
name : 'index',
frameName : 'txl_index',
script : 'loadData();'
});

//關閉羣組頁面
api.execScript({
frameName : 'txl_content_frame',
script : 'closeMyself();'
});
api.closeWin();
}

/**
* 安卓點擊返回的時候
* 周楓
* 2015.08.31
*/
function backFromChatForAndroid() {
api.addEventListener({
name : "keyback"
}, function(ret, err) {
back();
});
}

txl_content_frame.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<meta name="format-detection" content="telephone=no"/>
<title>會話列表</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
body{

}
</style>
</head>
<body>
<div id="txl_data" style="display:none; text-align: center";>暫無數據</div>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/base_config.js"></script>
<script type="text/javascript" src="../../script/tongxunlu/txl_content_frame.js"></script>
</body>

</html>

txl_content_frame.js

//var listContact;
var id;
var header_h;
var user_id, user_identity;
//類型： 1：羣組 2：學校 3：班級 4:好友
var t;
var old_msg_id = -1;
apiready = function() {
//加載 listContact 模塊
listContact = api.require('listContact');
id = api.pageParam.id;
t = api.pageParam.t;
user_id = $api.getStorage('person_id');
user_identity = $api.getStorage('identity');
header_h = api.pageParam.header_h;
loadData();

//監聽來自通信錄頁面獲取最新會話id的事件
api.addEventListener({
name : 'setOldMessageId'
}, function(ret) {

if (ret && ret.value) {
var value = ret.value;
old_msg_id = value.old_msg_id;
}
});
};

/**
* 加載通信錄列表
* 周楓
* 2015.08.18
*/
function loadData() {
getGroupInfo(function(group_list) {
// api.alert({
// msg:JSON.stringify(group_list)
// },function(ret,err){
// //coding...
// });

//根據用戶ID獲取通信錄數據
// getTongXunluByUserId(person_id, person_identity, function(txl_data) {
//打開list
listContact.open({
y : header_h,
w : api.winWidth,
h : api.winHeight - header_h,
cellBgColor : '#FFFFFF',
cellHeight : 60,
borderColor: '#DDDFE3',
indicator : { },
groupTitle:{
size : 12
},
data : group_list
}, function(ret, err) {

//點擊index值
var r_i = ret.index;
//聊天類型
var conver_type = group_list[ret.key][r_i].conver_type;
//名字
var title = group_list[ret.key][r_i].title;
var target_id;
//登陸名,target_id
switch(conver_type) {
case "PRIVATE":
target_id = group_list[ret.key][r_i].login_name;
break;
case "GROUP":
target_id = group_list[ret.key][r_i].id;
//根據id獲取羣組內人員信息
getGroupInfoById(target_id);
break;
}
// api.alert({
// msg:target_id
// },function(ret,err){
// //coding...
// });
//發送target_id獲取最新會話id
api.sendEvent({
name : 'getOldMessageId',
extra : {
target_id : target_id,
conver_type : conver_type,
count : 1
}
});
//打開會話頁面
setTimeout('execHhList("' + target_id + '","' + title + '","' + conver_type + '");', 500);
});
// });
});

}

/**
* 獲取羣組信息，包括學校教師，班級學生，羣組列表
* 周楓
* 2015.08.25
*/
function getGroupInfo(callback) {
// api.alert({
// msg: 't:'+t+',id:'+id+',user_id:'+user_id+',user_identity:'+user_identity
// },function(ret,err){
// //coding...
// });
api.ajax({
url : BASE_URL_ACTION + '/dsjxt/getGroupInfo?t=' + t + '&id=' + id + '&user_id=' + user_id + '&user_identity=' + user_identity +'&app_type=' + BASE_APP_TYPE,
method : 'get',
dataType : 'text'
}, function(ret, err) {
var obj = eval('(' + ret + ')');
if (getJsonObjLength(obj) == 0) {
$api.css($api.byId("txl_data"), "display:block;");
} else {
if (obj) {
callback(obj);
}
}
});
}

/**
* 延遲打開會話聊天界面
* 周楓
* 2015.08.24
* @param {Object} target_id
* @param {Object} title
* @param {Object} conver_type
* target_id, old_msg_id, person_name, conver_type
*/
function execHhList(target_id, title, conver_type) {
closeMyself();
hideMyself();
api.execScript({
name : 'index',
frameName : 'hh_index',
script : 'openHhList("' + target_id + '",' + old_msg_id + ',"' + title + '","' + conver_type + '","txl_content");'
});
}

/**
* 關閉列表
* 周楓
* 2015.08.18
*/
//function closeMyself() {
////api.alert({
////msg:'123123'
////},function(ret,err){
//// //coding...
////});
// listContact.close();
// api.closeFrame();
//}

/**
* 關閉列表
* 周楓
* 2015.08.18
*/
function closeMyself() {
listContact.close();
// api.closeWin();
}

function hideMyself() {
listContact.hide();
}

function showMyself() {
listContact.show();
}

我會常常的訪問論壇，我也剛使用不久，但願你們可以多給些建議，多交流，咱們一塊兒作得更好。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。