聊天界面 · APP模塊

## 聊天界面 ![](https://box.kancloud.cn/2016-08-26_57bfeab049f0d.png) ## 相關代碼 ``` <!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> ```