【APICloud系列|28】 UIChatBox 模組（聊天輸入框）的實現
阿新 • • 發佈：2021-01-01
技術標籤：APICloud系列UIChatBox聊天輸入框APICloud
導讀：UIChatBox 模組是一個聊天輸入框模組，開發者可自定義該輸入框的功能
專案結構：
config.xml
<?xml version="1.0" encoding="UTF-8"?> <widget id="A6909001303255" version="0.0.1"> <name>UIChatbox</name> <description/> <author email="[email protected]" href="https://blog.csdn.net/weixin_41937552">58DCDC</author> <content src="index.html"/> <preference name="appBackground" value="rgba(255, 255, 255, 1)"/> <preference name="windowBackground" value="rgba(0,0,0,0)"/> <preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/> <preference name="autoLaunch" value="true"/> <preference name="autoUpdate" value="true"/> <preference name="smartUpdate" value="false"/> <preference name="fullScreen" value="false" /> <preference name="debug" value="true"/> <preference name="statusBarAppearance" value="true"/> <permission name="location"/> <permission name="internet"/> <access origin="*"/> </widget>
index.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" /> <style type="text/css"> body { padding-bottom: 50px; } button {padding: 10px 20px; margin: 8px; } button::after { content: '-' attr( data-name) '( )';} </style> </head> <body> <header> <h1>UIChatBox</h1> <mark>使用前請詳細閱讀 文件 使用規則</mark> </header> <button tapmode onclick="fnOpen( this )" data-name="open"></button> <button tapmode onclick="fnClose( this )" data-name="close"></button> <button tapmode onclick="fnShow( this )" data-name="show"></button> <button tapmode onclick="fnHide( this )" data-name="hide"></button> <button tapmode onclick="fnPopupKeyboard( this )" data-name="popupKeyboard"></button> <button tapmode onclick="fnCloseKeyboard( this )" data-name="closeKeyboard"></button> <button tapmode onclick="fnPopupBoard( this )" data-name="popupBoard"></button> <button tapmode onclick="fnCloseBoard( this )" data-name="closeBoard"></button> <button tapmode onclick="fnValue( this )" data-name="value">設定</button> <button tapmode onclick="fnValue( this )" data-name="value">獲取</button> <button tapmode onclick="fnInsertValue( this )" data-name="insertValue"></button> <button tapmode onclick="fnAddEventListener( this )" data-name="addEventListener">監聽 recordBtn 按鈕</button> <button tapmode onclick="fnAddEventListener( this )" data-name="addEventListener">監聽 inputBar</button> <button tapmode onclick="fnSetPlaceholder( this )" data-name="setPlaceholder"></button> <button tapmode onclick="fnReloadExtraBoard( this )" data-name="reloadExtraBoard"></button> </body> </html> <script type="text/javascript"> var UIChatBox; function apiready(){ UIChatBox = api.require('UIChatBox'); api.setStatusBarStyle({ color: '#2390ce' }); }; function fnClose( el ){ UIChatBox.close(); } function fnShow( el ){ UIChatBox.show(); } function fnHide( el ){ UIChatBox.hide(); } function fnPopupBoard( el){ UIChatBox.popupBoard({ target:'extras' }); } function fnPopupKeyboard( el){ UIChatBox.popupKeyboard(); } function fnCloseKeyboard( el){ UIChatBox.closeKeyboard(); } function fnCloseBoard( el){ UIChatBox.closeBoard(); } function fnValue( el){ if( el.innerHTML === '設定' ){ UIChatBox.value({ msg: '使用 value 設定新值' }); }else{ UIChatBox.value(function(ret, err){ if( ret ){ alert( JSON.stringify( ret ) ); }else{ alert( JSON.stringify( err ) ); } }); } } function fnInsertValue( el){ UIChatBox.insertValue({ msg: '使用 insertValue 插入的新值' }); } function fnAddEventListener( el){ if( el.innerHTML === '監聽 recordBtn 按鈕' ){ UIChatBox.addEventListener({ target: 'recordBtn', name: 'press' }, function( ret, err ){ if( ret ){ alert( JSON.stringify( ret ) ); }else{ alert( JSON.stringify( err ) ); } }); }else{ UIChatBox.addEventListener({ target: 'inputBar', name: 'move' }, function( ret, err ){ if( ret ){ alert( JSON.stringify( ret ) ); }else{ alert( JSON.stringify( err ) ); } }); } } function fnSetPlaceholder( el){ UIChatBox.setPlaceholder({ placeholder: '修改了佔位提示內容' }); } function fnReloadExtraBoard( el){ UIChatBox.reloadExtraBoard({ extras: { btns: [{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },] } }); } function fnOpen( el ){ UIChatBox.open({ placeholder: '輸入傳送內容', autoFocus: true, emotionPath: 'widget://image/emotion', styles: { extrasBtn: { normalImg: 'widget://image/add1.png' }, speechBtn: { normalImg: 'widget://image/cam1.png' }, indicator: { target: 'extrasPanel', color: '#c4c4c4', activeColor: '#9e9e9e' }, sendBtn: { titleColor: '#4cc518', bg: '#999999' , activeBg: '#46a91e', titleSize: 14 } }, extras: { titleSize: 10, titleColor: '#a3a3a3', btns: [{ title: '圖片', normalImg: 'widget://image/album1.png', activeImg: 'widget://image/album2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '圖片', normalImg: 'widget://image/album1.png', activeImg: 'widget://image/album2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '圖片', normalImg: 'widget://image/album1.png', activeImg: 'widget://image/album2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '圖片', normalImg: 'widget://image/album1.png', activeImg: 'widget://image/album2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '圖片', normalImg: 'widget://image/album1.png', activeImg: 'widget://image/album2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' },{ title: '圖片', normalImg: 'widget://image/album1.png', activeImg: 'widget://image/album2.png' },{ title: '傳送地址', normalImg: 'widget://image/loc1.png', activeImg: 'widget://image/loc2.png' }] } }, function( ret, err ){ if( ret ){ alert( JSON.stringify( ret ) ); }else{ alert( JSON.stringify( err ) ); } }); } </script>
完整程式碼下載地址：https://download.csdn.net/download/weixin_41937552/13993170