## 聊天界面
## 相关代码
```
<!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"/>
<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;}*/
</style>
<body>
<div class="aui-content aui-content-padded" id="message-content">
<p class="aui-text-center history-date">7-16 20:00</p>
<div class="aui-chat-sender">
<div class="aui-chat-sender-avatar"><img src="../../image/demo2.png"></div>
<div class="aui-chat-sender-cont">
<div class="aui-chat-right-triangle"></div>
<span>Hello!!</span>
</div>
</div>
<div class="aui-chat-receiver">
<div class="aui-chat-receiver-avatar"><img src="../../image/demo.png"></div>
<div class="aui-chat-receiver-cont">
<div class="aui-chat-left-triangle"></div>
<span>你好！</span>
</div>
</div>
<div class="aui-chat-sender">
<div class="aui-chat-sender-avatar"><img src="../../image/demo2.png"></div>
<div class="aui-chat-sender-cont">
<div class="aui-chat-right-triangle"></div>
<span>nice to meet you!</span>
</div>
</div>
<div class="aui-chat-receiver">
<div class="aui-chat-receiver-avatar"><img src="../../image/demo2.png"></div>
<div class="aui-chat-receiver-cont">
<div class="aui-chat-left-triangle"></div>
<span>很高兴见到你！</span>
</div>
</div>
<div class="aui-chat-sender">
<div class="aui-chat-sender-avatar"><img src="../../image/demo.png"></div>
<div class="aui-chat-sender-cont">
<div class="aui-chat-right-triangle"></div>
<span>如果文字太长了会是什么效果，再多一点再多一点</span>
</div>
</div>
<div class="aui-chat-receiver">
<div class="aui-chat-receiver-avatar"><img src="../../image/demo2.png"></div>
<div class="aui-chat-receiver-cont">
<div class="aui-chat-left-triangle"></div>
<div class="aui-chat-status"><i class="aui-iconfont aui-icon-loading aui-chat-progress"></i></div>
<span>如果想自定义气泡颜色，修改aui-chat-receiver-cont背景和aui-chat-left-triangle的border-color</span>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript">
apiready = function() {
api.parseTapmode();
// 聊天输入模块
chatBox = api.require('UIChatBox');
fnOpen(this);
}
// 打开聊天框
function fnOpen(el) {
chatBox.open({
placeholder : '输入发送内容',
autoFocus : false,
emotionPath : 'widget://image/chatbox/emotion',
texts : {
recordBtn : {
normalTitle : '按住 说话',
activeTitle : '松开 结束'
}
},
styles : {
extrasBtn : {
normalImg : 'widget://image/chatbox/add1.png'
},
speechBtn : {
normalImg : 'widget://image/chatbox/cam1.png'
},
indicator : {
target : 'extrasPanel',
color : '#c4c4c4',
activeColor : '#9e9e9e'
},
sendBtn : {
titleColor : '#4cc518',
bg : '#fff',
activeBg : '#46a91e',
titleSize : 14
}
},
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'
}, {
title : '位置',
normalImg : 'widget://image/chatbox/loc1.png',
activeImg : 'widget://image/chatbox/loc2.png'
}]
}
}, function(ret, err) {
if (ret.eventType == 'clickExtras') {
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
// }
// })
}
});
} else if (ret.index == 2) {
//位置
api.openWin({
name : 'xxl',
url : 'xxl',
delay : 300,
slidBackEnabled : false,
pageParam : {
targetId : targetId
},
animation : {
type : 'fade'
}
})
}
}
// 点击发送按钮
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));
} else {
// alert(JSON.stringify(err));
}
});
}
</script>
</html>
```
- APP模块
- 欢迎页
- 头部模块
- 底部模块
- 图文列表
- 商品展示
- 文字列表
- 内容页一
- 评论页
- N宫格
- 获得上一级的栏目名称
- 搜索模块
- 图标
- 幻灯模块
- 消息页
- 个人中心
- 个人中心—我的收藏
- 个人中心—资料修改
- 个人中心—我的钱包（账户）
- 咨询页面
- APP模板
- 注册 页面一
- 注册 页面二
- 登录 页面一
- 登录 页面二
- 忘记密码 页面一
- 会员中心 首页一
- 会员中心 首页二
- 会员中心 首页三
- 会员中心 资料修改
- 申请审核步骤
- 商品订单一
- 游戏页面
- 新闻列表页
- 图文列表页
- 商品列表页
- 商品详情页
- 聊天
- 消息列表
- 聊天界面
- 发布需求
- 前端框架
- CSS Framework
- trim 字符处理
- dom 选择器
- 样式
- evt 事件
- 选择元素
- 属性
- 文本
- 位置
- json
- 设置
- 提示
- AJAX
- storage 本地存储
- API对象
- 常用函数
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用图片
- asd