UIChatBar

open show popupBoard popupKeyboard value addEventListener reloadExtraBoard

模块概述

UIChatBar 模块是一个聊天输入框模块，开发者可自定义该输入框的功能。通过 open 接口可在当前 window 底部打开一个输入框，该输入框的生命属于当前 window 所有。当输入框获取焦点后，会自动弹动到软键盘之上。开发者可通过监听输入框距离底部弹动的高度，来改变聊天对话界面的高度，从而实现类似 QQ 聊天页面的功能。

本模块的主要功能有：

1，自定义表情集：open 接口的 emotionPath 参数

2，自定义输入框最大自适应高度：open 接口的 maxRows 参数

3，输入框占位提示文字：open 接口的 placeholder 参数

4，自定义是否显示附件功能按钮：

5，手动弹出、关闭软键盘功能

6，输入框插入、获取当前文本

7，动态刷新附加功能面板

功能详情参考接口参数。

模块预览图如下：

open

打开聊天输入框

open({parmas}, callback(ret))

params

placeholder：

  • 类型：字符串
  • 描述：（可选项）输入框的占位提示文本

autoFocus：

  • 类型：布尔
  • 描述：（可选项）输入框是否自动获取焦点，并弹出键盘
  • 默认值：false

maxRows：

  • 类型：数字
  • 描述：（可选项）输入框显示的最大行数（高度自适应）
  • 默认值：4

texts：

  • 类型：JSON 对象
  • 描述：（可选项）聊天输入框模块可配置的文本
  • 内部字段：

styles：

  • 类型：JSON 对象
  • 描述：模块各部分的样式集合
  • 内部字段：
  2.     inputBar: {                         //（可选项）JSON对象；输入区域（输入框及两侧按钮）整体样式      
  3.         borderColor: '#d9d9d9',         //（可选项）字符串类型；输入框区域上下边框的颜色，支持 rgb，rgba，#；默认：'#d9d9d9'
  4.         bgColor: '#f2f2f2'              //（可选项）字符串类型；输入框区域的整体背景色，支持 rgb，rgba，#；默认：'#f2f2f2' 
  5.     },
  6.     inputBox: {                         //（可选项）JSON对象；输入框样式
  7.         borderColor: '#B3B3B3',         //（可选项）字符串类型；输入框的边框颜色，支持 rgb，rgba，#；默认：'#B3B3B3'
  8.         bgColor: '#FFFFFF'              //（可选项）字符串类型；输入框的背景色，支持 rgb，rgba，#；默认：'#FFFFFF'
  9.         cornerRadius:5.0,               //(可选项)数字类型；输入框的圆角度；默认：5.0
  10.         placeholderTextColor:'',        //(可选项)字符串类型；输入框的提示文字颜色；默认：系统颜色
  11.         textColor: '#fff' ,                    //(可选项)字符串类型；输入框文字颜色；默认：'#fff'
  12.     },
  13.    customBtn: {                       //（可选项）JSON对象；自定义按钮样式；不传则不显示自定义按钮
  14.         normalImg: 'widget://'          //（可选项）字符串类型；自定义按钮常态的背景图片（本地路径，fs://、widget://）；
  15.     },
  16.     extrasBtn: {                        //（可选项）JSON对象；附加功能按钮样式，不传则不显示附加功能按钮
  17.         normalImg: 'widget://'          //（可选项）字符串类型；附加功能按钮常态的背景图片（本地路径，fs://、widget://）
  18.     },
  19.     keyboardBtn: {                      //JSON对象；键盘按钮样式
  20.         normalImg: 'widget://'          //字符串类型；键盘按钮常态的背景图片（本地路径，fs://、widget://）；默认：键盘小图标
  21.     },
  22.     speechBtn: {                        //（可选项）JSON对象；输入框左侧按钮样式，不传则不显示左边的语音按钮
  23.         normalImg: 'widget://'          //字符串类型；左侧按钮常态的背景图片（本地路径，fs://、widget://）
  24.     },
  25.     recordBtn: {                        //JSON对象；“按住 录音”按钮的样式
  26.         normalBg: '#c4c4c4',            //（可选项）字符串类型；按钮常态的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'#c4c4c4'
  27.         activeBg: '#999999',            //（可选项）字符串类型；按钮按下时的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'#999999'；normalBg 和 activeBg 必须保持一致，同为颜色值，或同为图片路径
  28.         color: '#000',                  //（可选项）字符串类型；按钮标题文字的颜色，支持 rgb，rgba，#，默认：'#000000'
  29.         size: 14                        //（可选项）数字类型；按钮标题文字的大小，默认：14
  30.     },
  31.     indicator: {                        //（可选项）JSON对象；自定义和附加功能面板的小圆点指示器样式，若不传则不显示该指示器
  32.         target: 'both',                 //（可选项）字符串类型；配置指示器的显示区域；默认：'both'
  33.                                         //取值范围：
  34.                                         //both（自定义和附加功能面板皆显示）
  35.                                         //emotionPanel（自定义面板显示）
  36.                                         //extrasPanel（附加功能面板显示）
  37.         color: '#c4c4c4',               //（可选项）字符串类型；指示器颜色；支持 rgb、rgba、#；默认：'#c4c4c4'
  38.         activeColor: '#9e9e9e'          //（可选项）字符串类型；当前指示器颜色；支持 rgb、rgba、#；默认：'#9e9e9e'
  39.     },
  40.     sendBtn: {                         //（可选项）JSON对象；发送按钮样式，本参数对 iOS 平台上的键盘内发送按钮无效
  41.         bg: '#4cc518',                 //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：#4cc518
  42.         titleColor: '#ffffff',          //（可选项）字符串类型；发送按钮标题颜色；默认：#ffffff
  43.         activeBg: '#46a91e',            //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：无
  44.         titleSize: 13                    //（可选项）数字类型；发送按钮标题字体大小；默认：13
  45.     }
  46. }

extras：

  • 类型：JSON 对象
  • 描述：（可选项）点击附加功能按钮，打开的附加功能面板的按钮样式，配合 extrasBtn 一起使用，若 extrasBtn 参数内 normalImg 属性不传则此参数可不传
  1. {
  2.     titleSize: 10,                  //（可选项）数字类型；标题文字大小，默认：10
  3.     titleColor: '#a3a3a3',          //（可选项）字符串类型；标题文字颜色，支持 rgb、rgba、#；默认：'#a3a3a3'
  4.     btns: [{                        //数组类型；附加功能按钮的样式
  5.         title: '图片',              //（可选项）字符串类型；附加功能按钮的标题内容                  
  6.         normalImg: '',              //（可选项）字符串类型；按钮常态的背景图片（本地路径，fs://、widget://）
  7.         activeImg: ''               //（可选项）字符串类型；按钮按下时的背景图片（本地路径，fs://、widget://）   
  8.     }]

fixedOn：

  • 类型：字符串
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed:

  • 类型：布尔
  • 默认值：true
  • 描述：是否将模块视图固定到窗口上，不跟随窗口上下滚动，可为空

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',  //字符串类型；回调的事件类型，
  3.                         //取值范围：
  4.                         //show（该模块打开成功）
  5.                         //send（用户点击发送按钮）
  6.                         //clickExtras（用户点击附加功能面板内的按钮）
  7.     index: 0,           //数字类型；当 eventType 为 clickExtras 时，此参数为用户点击附加功能按钮的索引，否则为 undefined
  8.     msg: ''             //字符串类型；当 eventType 为 send 时，此参数返回输入框的内容，否则返回 undefined
  9.                         //customBtnClick(点击自定义按妞)
  10. }

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.open({
  4.     placeholder: '',
  5.     maxRows: 4,
  6.     emotionPath: 'widget://res/img/emotion',
  7.     texts: {
  8.         recordBtn: {
  9.             normalTitle: '按住说话',
  10.             activeTitle: '松开结束'
  11.         },
  12.         sendBtn: {
  13.             title: 'send'
  14.         }
  15.     },
  16.     styles: {
  17.         inputBar: {
  18.             borderColor: '#d9d9d9',
  20.         },
  21.         inputBox: {
  22.             borderColor: '#B3B3B3',
  23.             bgColor: '#FFFFFF'
  24.         },
  25.         customBtn: {
  26.             normalImg: 'widget://res/img/chatBox_face1.png'
  27.         },
  28.         extrasBtn: {
  29.             normalImg: 'widget://res/img/chatBox_add1.png'
  30.         },
  31.         keyboardBtn: {
  32.             normalImg: 'widget://res/img/chatBox_key1.png'
  33.         },
  34.         speechBtn: {
  35.             normalImg: 'widget://res/img/chatBox_key1.png'
  36.         },
  37.         recordBtn: {
  38.             normalBg: '#c4c4c4',
  39.             activeBg: '#999999',
  40.             color: '#000',
  41.             size: 14
  42.         },
  43.         indicator: {
  44.             target: 'both',
  45.             color: '#c4c4c4',
  46.             activeColor: '#9e9e9e'
  47.         },
  48.         sendBtn: {
  49.             titleColor: '#4cc518',
  50.             bg: '#999999',
  51.             activeBg: '#46a91e',
  52.             titleSize: 14
  53.         }
  54.     },
  55.     extras: {
  56.         titleSize: 10,
  57.         titleColor: '#a3a3a3',
  58.         btns: [{
  59.             title: '图片',
  60.             normalImg: 'widget://res/img/chatBox_album1.png',
  61.             activeImg: 'widget://res/img/chatBox_album2.png'
  62.         }, {
  63.             title: '拍照',
  64.             normalImg: 'widget://res/img/chatBox_cam1.png',
  65.             activeImg: 'widget://res/img/chatBox_cam2.png'
  66.         }]
  67.     }
  68. }, function(ret, err) {
  69.     if (ret) {
  70.         alert(JSON.stringify(ret));
  71.     } else {
  72.         alert(JSON.stringify(err));
  73.     }
  74. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭聊天输入框

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘

popupKeyboard()

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.popupKeyboard();

iOS系统，Android系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘

closeKeyboard()

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.closeKeyboard();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupBoard

弹出自定义、附加功能面板

popupBoard({params})

params

target:

  • 类型：字符串
  • 描述：操作的面板类型，取值范围如下：
    • emotion：自定义面板
    • extras：附加功能面板
  • 默认值：emotion

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.popupBoard({
  3.     target: 'extras'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeBoard

收起自定义、附加功能面板

closeBoard()

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.closeBoard();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

value

value({params}, callback(ret))

params

msg：

  • 类型：字符串
  • 描述：（可选项）聊天输入框的内容，若不传则返回输入框的值

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. //设置输入框的值
  3. UIChatBar.value({
  4.     msg: '设置输入框的值'
  5. });
  7. UIChatBox.value(function(ret, err) {
  8.     if (ret) {
  9.         alert(JSON.stringify(ret));
  10.     } else {
  11.         alert(JSON.stringify(err));
  12.     }

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

insertValue

向聊天输入框的指定位置插入内容

insertValue({params})

index：

  • 类型：数字
  • 描述：（可选项）待插入内容的起始位置。注意：中文，全角符号均占一个字符长度；索引从0开始，0表示插入到最前面，1表示插入到第一个字符后面，2表示插入到第二个字符后面，以此类推。
  • 默认值：当前输入框的值的长度

msg：

  • 类型：字符串
  • 描述：（可选项）要插入的内容
  • 默认值：’’

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.insertValue({
  3.     index: 10,
  4.     msg: '这里是插入的字符串'
  5. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

事件监听

addEventListener({params}, callback(ret))

params

target：

  • 类型：字符串
  • 描述：事件的目标对象
  • 取值范围：
    • recordBtn（录音按钮，open 接口的 speechBtn 参数必须传值，否则事件监听无效）
    • inputBar（输入区域，输入框及两侧按钮区域）

name：

  • 类型：字符串
  • 描述：监听的事件类型
  • 取值范围：
    • 适用于 recordBtn 对象
      • press（按下录音按钮）
      • press_cancel（松开录音按钮）
      • move_out（按下录音按钮后，从按钮移出）
      • move_out_cancel（按下录音按钮后，从按钮移出并松开按钮）
      • move_in（move_out 事件后，重新移入按钮区域）
    • 适用于 inputBar 对象
      • move（输入框所在区域弹动事件）
      • change（输入框所在区域高度改变）
      • showRecord（用户点击左侧语音按钮）
      • showEmotion（用户点击表情按钮）
      • showExtras（用户点击右侧附加功能按钮，如果 open 时传了 extras 参数才会有此回调）
      • valueChanged（输入框内容改变事件）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     inputBarHeight: 60,    //数字类型；输入框及左右按钮整体区域的高度，仅当监听 inputBar 的 move 和 change 事件时本参数有值
  3.     panelHeight: 300 ,     //数字类型；输入框下边缘距离屏幕底部的高度，仅当监听 inputBar 的 move 和 change 事件时本参数有值
  4.     value: ''              //字符串类型；输入框当前内容，仅当 target 为 inputBar name 为 valueChanged 时有值
  5. }

示例代码

  1. //监听 recordBtn 按钮
  2. var UIChatBar = api.require('UIChatBar');
  3. UIChatBar.addEventListener({
  4.     target: 'recordBtn',
  5.     name: 'press'
  6. }, function(ret, err) {
  7.     if (ret) {
  8.         alert(JSON.stringify(ret));
  9.     } else {
  10.         alert(JSON.stringify(err));
  11.     }
  12. });
  14. //监听 inputBar 
  15. var UIChatBox = api.require('UIChatBox');
  16. UIChatBox.addEventListener({
  17.     target: 'inputBar',
  18.     name: 'move'
  19. }, function(ret, err) {
  20.     if (ret) {
  21.         alert(JSON.stringify(ret));
  22.     } else {
  23.         alert(JSON.stringify(err));
  24.     }
  25. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setPlaceholder

重设聊天输入框的占位提示文本

setPlaceholder({params})

params

placeholder：

  • 类型：字符串
  • 描述：（可选项）占位提示文本，若不传或传空则表示清空占位提示内容

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.setPlaceholder({
  3.     placeholder: '修改了占位提示内容'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadExtraBoard

重新加载（刷新）附加功能面板，open时必须添加附加功能按钮及其面板参数

reloadExtraBoard({params})

params

extras：

  • 类型：JSON 对象
  • 描述：（可选项）点击附加功能按钮，打开的附加功能面板的按钮样式，配合 extrasBtn 一起使用，若 extrasBtn 参数内 normalImg 属性不传则此参数可不传

示例代码

  1. var UIChatBar = api.require('UIChatBar');
  2. UIChatBar.reloadExtraBoard({
  3.     extras: {
  4.         titleSize: 10,
  5.         titleColor: '#a3a3a3',
  6.         btns: [{
  7.             title: '图片',
  8.             normalImg: 'widget://res/img/chatBox_album1.png',
  9.             activeImg: 'widget://res/img/chatBox_album2.png'
  10.         }, {
  11.             title: '拍照',
  12.             normalImg: 'widget://res/img/chatBox_cam1.png',
  13.             activeImg: 'widget://res/img/chatBox_cam2.png'
  14.         }, {
  15.             title: '拍照',
  16.             normalImg: 'widget://res/img/chatBox_cam1.png',
  17.             activeImg: 'widget://res/img/chatBox_cam2.png'
  18.         }, {
  19.             title: '拍照',
  20.             normalImg: 'widget://res/img/chatBox_cam1.png',
  21.             activeImg: 'widget://res/img/chatBox_cam2.png'
  22.         }, {
  23.             title: '拍照',
  24.             normalImg: 'widget://res/img/chatBox_cam1.png',
  25.             activeImg: 'widget://res/img/chatBox_cam2.png'
  26.         }, {
  27.             title: '拍照',
  28.             normalImg: 'widget://res/img/chatBox_cam1.png',
  29.             activeImg: 'widget://res/img/chatBox_cam2.png'
  30.         }, {
  31.             title: '拍照',
  32.             normalImg: 'widget://res/img/chatBox_cam1.png',
  33.             activeImg: 'widget://res/img/chatBox_cam2.png'
  34.         }, {
  35.             title: '拍照',
  36.             normalImg: 'widget://res/img/chatBox_cam1.png',
  37.             activeImg: 'widget://res/img/chatBox_cam2.png'
  38.         }, {
  39.             title: '拍照',
  40.             normalImg: 'widget://res/img/chatBox_cam1.png',
  41.             activeImg: 'widget://res/img/chatBox_cam2.png'
  42.         }]

iOS系统，Android系统