UIChatInput

open show popupBoard popupKeyboard value addEventListener reloadExtraBoard setSwitchBtnIcon

模块概述

UIChatInput 模块是一个聊天输入框模块，开发者可自定义该输入框的功能。通过 open 接口可在当前 window 底部打开一个输入框，该输入框的生命属于当前 window 所有。该模块在UIChatBox的基础上进行了一些修改，大部分功能是一致的

本模块的主要功能有：

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

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

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

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

5，自定义显示录音按钮：

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

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

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

open

打开聊天输入框

open({parmas}, callback(ret))

params

placeholder：

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

autoFocus：

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

maxRows：

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

emotionPath：

  • 类型：字符串
  • 描述：自定义表情文件夹（表情图片所在的文件夹，须同时包含一个与该文件夹同名的配置文件）的路径（本地路径，fs://、widget://）。.json文件内的 name 值必须与表情文件夹内表情图片名对应。另附：
  • .json配置文件格式如下：
  • .json配置文件所在目录：

texts：

  • 类型：JSON 对象
  • 描述：（可选项）聊天输入框模块可配置的文本
  • 内部字段：
  1. {
  2.     recordBtn: {                        //（可选项）JSON对象；录音按钮文字内容
  3.         normalTitle: '按住 说话',        //（可选项）字符串类型；按钮常态的标题，默认：'按住 说话'
  4.         activeTitle: '松开 结束'         //（可选项）字符串类型；按钮按下时的标题，默认：'松开 结束'
  5.     },
  6.     sendBtn: {                         //（可选项）JSON对象；发送按钮文字内容，在 iOS 平台上对键盘内按钮无效
  7.         title: '发送'                   //（可选项）字符串类型；按钮常态的标题，默认：'发送'
  8.     }
  9. }

styles：

  • 类型：JSON 对象
  • 描述：模块各部分的样式集合
  • 内部字段：
  1. {    
  2.     topDivider:{                        //(可选项)顶部分割线配置
  3.         width:3,                        //(可选项)顶部分割线的粗细，默认：0 
  4.         color:'#000'                    //(可选项)顶部分割线的颜色；默认：#000 ;支持图片设置(fs:// & widget://)
  5.     },
  6.     inputBar: {                         //（可选项）JSON对象；输入区域（输入框及两侧按钮）整体样式      
  7.         borderColor: '#d9d9d9',         //（可选项）字符串类型；输入框区域上下边框的颜色，支持 rgb，rgba，#；默认：'#d9d9d9'
  8.         bgColor: '#f2f2f2'              //（可选项）字符串类型；输入框区域的整体背景色，支持 rgb，rgba，#；默认：'#f2f2f2' 
  9.     },
  10.     inputBox: {                         //（可选项）JSON对象；输入框样式
  11.         borderColor: '#B3B3B3',         //（可选项）字符串类型；输入框的边框颜色，支持 rgb，rgba，#；默认：'#B3B3B3'
  12.         bgColor: '#f2f2f2',             //（可选项）字符串类型；输入框的背景色，支持 rgb，rgba，#；默认：'#f2f2f2'
  13.         boardBgColor: '#f2f2f2',        //（可选项）字符串类型；面板的背景色(表情面板，附加面板)，支持 rgb，rgba，#；默认：'#f2f2f2'
  14.         topMargin:10,          //（可选项）数字类型；输入框距离顶部的边距；默认：10
  16.     },
  17.     emotionBtn: {                       //（可选项）JSON对象；表情按钮样式；不传则不显示表情按钮
  18.         normalImg: 'widget://'          //（可选项）字符串类型；表情按钮常态的背景图片（本地路径，fs://、widget://）；默认：笑脸小图标,
  19.     },
  20.     extrasBtn: {                        //（可选项）JSON对象；附加功能按钮样式，不传则不显示附加功能按钮
  21.         normalImg: 'widget://'          //（可选项）字符串类型；附加功能按钮常态的背景图片（本地路径，fs://、widget://）
  22.     },
  23.     keyboardBtn: {                      //JSON对象；键盘按钮样式
  24.         normalImg: 'widget://'          //字符串类型；键盘按钮常态的背景图片（本地路径，fs://、widget://）；默认：键盘小图标
  25.     },
  26.     switchBtn: {                        //（可选项）JSON对象；输入框左侧按钮样式，不传则不显示左边的语音按钮
  27.         normalImg: 'widget://',         //字符串类型；左侧按钮常态的背景图片（本地路径，fs://、widget://）
  28.         activeImg:''                    //字符串类型；左侧按钮按下的背景图片（本地路径，fs://、widget://）
  29.     },
  30.     recordBtn: {                        //JSON对象；“按住 录音”按钮的样式
  31.         normalBg: '#c4c4c4',            //（可选项）字符串类型；按钮常态的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'#c4c4c4'
  32.         activeBg: '#999999',            //（可选项）字符串类型；按钮按下时的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'#999999'；normalBg 和 activeBg 必须保持一致，同为颜色值，或同为图片路径
  33.         color: '#000',                  //（可选项）字符串类型；按钮标题文字的颜色，支持 rgb，rgba，#，默认：'#000000'
  34.         size: 14                        //（可选项）数字类型；按钮标题文字的大小，默认：14
  35.    },
  36.    recordPanelBtn:{                     //JSON对象；录音面板样式
  37.      normalImg: '',        //（可选项）字符串类型；按钮常态的图片
  38.      activeImg: ''         //（可选项）字符串类型；按钮按下时的图片
  39.      width:100,           //（可选项）数字类型；按钮的宽度，默认：100
  40.      height:100           //（可选项）数字类型；按钮的高度，默认：100
  42.    },
  43.     indicator: {                        //（可选项）JSON对象；表情和附加功能面板的小圆点指示器样式，若不传则不显示该指示器
  44.         target: 'both',                 //（可选项）字符串类型；配置指示器的显示区域；默认：'both'
  45.                                         //取值范围：
  46.                                         //both（表情和附加功能面板皆显示）
  47.                                         //emotionPanel（表情面板显示）
  48.                                         //extrasPanel（附加功能面板显示）
  49.         color: '#c4c4c4',               //（可选项）字符串类型；指示器颜色；支持 rgb、rgba、#；默认：'#c4c4c4'
  50.         activeColor: '#9e9e9e'          //（可选项）字符串类型；当前指示器颜色；支持 rgb、rgba、#；默认：'#9e9e9e'
  51.     },
  52.     sendBtn: {                         //（可选项）JSON对象；发送按钮样式，本参数对 iOS 平台上的键盘内发送按钮无效
  53.         bg: '#4cc518',                 //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：#4cc518
  54.         titleColor: '#ffffff',          //（可选项）字符串类型；发送按钮标题颜色；默认：#ffffff
  55.         activeBg: '#46a91e',            //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：无
  56.         titleSize: 13                    //（可选项）数字类型；发送按钮标题字体大小；默认：13
  57.     }
  58. }

extras：

  • 类型：JSON 对象
  1. {
  2.     titleSize: 10,                  //（可选项）数字类型；标题文字大小，默认：10
  3.     isAdaptScreenSize:true          // (可选项) 布尔类型；附加功能按钮的样式是否自适应屏幕大小布局，改参数为false时，则每一行固定显示四个,若为true，则根据屏幕大小自动适配 默认：true
  4.     btns: [{                        //数组类型；附加功能按钮的样式
  5.         title: '图片',              //（可选项）字符串类型；附加功能按钮的标题内容   
  6.     titleColor: '#a3a3a3',          //（可选项）字符串类型；标题文字颜色，支持 rgb、rgba、#；默认：'#a3a3a3'               
  7.         normalImg: '',              //（可选项）字符串类型；按钮常态的背景图片（本地路径，fs://、widget://）
  8.         activeImg: ''               //（可选项）字符串类型；按钮按下时的背景图片（本地路径，fs://、widget://）   
  9.     }]
  10. }

recordType：

  • 类型：字符串
  • 描述：（可选项）点击左边录音按钮所展示的类型
  • 默认：“按住 录音”按钮的样式
  • 取值范围：
    • pressRecord (“按住 录音”按钮的样式)
    • recordPanel (录音面板)

isClose：

  • 类型：布尔值
  • 描述：（可选项）点击空白区域是否关闭整个模块(包括键盘)
  • 默认：false

callback(ret)

ret：

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

示例代码

  1. var UIChatInput = api.require('UIChatInput');
  2. UIChatInput.open({
  3.     placeholder: '',
  4.     maxRows: 4,
  5.     emotionPath: 'widget://res/img/emotion',
  6.     texts: {
  7.         recordBtn: {
  8.             normalTitle: '按住说话',
  10.         },
  11.         sendBtn: {
  12.             title: 'send'
  13.         }
  14.     },
  15.     styles: {
  16.         inputBar: {
  17.             borderColor: '#d9d9d9',
  18.             bgColor: '#f2f2f2'
  19.         },
  20.         inputBox: {
  21.             borderColor: '#B3B3B3',
  22.             bgColor: '#FFFFFF'
  23.         },
  24.         emotionBtn: {
  25.             normalImg: 'widget://res/img/chatBox_face1.png'
  26.         },
  27.         extrasBtn: {
  28.             normalImg: 'widget://res/img/chatBox_add1.png'
  29.         },
  30.         keyboardBtn: {
  31.             normalImg: 'widget://res/img/chatBox_key1.png'
  32.         },
  33.         switchBtn: {
  34.             normalImg: 'widget://res/img/chatBox_key1.png'
  35.         },
  36.         recordBtn: {
  37.             normalBg: '#c4c4c4',
  38.             activeBg: '#999999',
  39.             color: '#000',
  40.             size: 14
  41.         },
  42.         indicator: {
  43.             target: 'both',
  44.             color: '#c4c4c4',
  45.             activeColor: '#9e9e9e'
  46.         },
  47.         sendBtn: {
  48.             titleColor: '#4cc518',
  49.             bg: '#999999',
  50.             activeBg: '#46a91e',
  51.             titleSize: 14
  52.         }
  53.     },
  54.     extras: {
  55.         titleSize: 10,
  56.         btns: [{
  57.             title: '图片',
  58.             normalImg: 'widget://res/img/chatBox_album1.png',
  59.             activeImg: 'widget://res/img/chatBox_album2.png',
  60.             titleColor: '#a3a3a3',
  61.         }, {
  62.             title: '拍照',
  63.             normalImg: 'widget://res/img/chatBox_cam1.png',
  64.             activeImg: 'widget://res/img/chatBox_cam2.png',
  65.             titleColor: '#a3a3a3',
  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

关闭聊天输入框

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

show()

示例代码

  1. var UIChatInput = api.require('UIChatInput');
  2. UIChatInput.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘

popupKeyboard()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘

closeKeyboard()

示例代码

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

iOS系统，Android系统

可提供的1.0.0及更高版本

popupBoard

弹出表情、附加功能面板

popupBoard({params})

params

target:

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeBoard

收起表情、附加功能面板

closeBoard()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

value

获取或设置聊天输入框的内容

value({params}, callback(ret))

params

msg：

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status: true,        //布尔型；true||false
  3.     msg: ''              //字符串类型；输入框当前内容文本
  4. }

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

insertValue

insertValue({params})

params

index：

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

msg：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

事件监听

addEventListener({params}, callback(ret))

params

target：

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

name：

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

ret：

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

示例代码

  1. //监听 recordBtn 按钮
  2. var UIChatInput = api.require('UIChatInput');
  3. UIChatInput.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 UIChatInput = api.require('UIChatInput');
  16. UIChatInput.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 UIChatInput = api.require('UIChatInput');
  2. UIChatInput.setPlaceholder({
  3.     placeholder: '修改了占位提示内容'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

reloadExtraBoard

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

reloadExtraBoard({params})

params

extras：

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

示例代码

  1. var UIChatInput = api.require('UIChatInput');
  2. UIChatInput.reloadExtraBoard({
  3.     extras: {
  4.         titleSize: 10,
  5.         btns: [{
  6.             title: '图片',
  7.             normalImg: 'widget://res/img/chatBox_album1.png',
  8.             activeImg: 'widget://res/img/chatBox_album2.png',
  9.             titleColor: '#a3a3a3',
  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.         }]
  43.     }
  44. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

switchInputArea

切换输入区域

switchInputArea({params})

params

type：

  • 类型：字符串
  • 描述：输入区域类型
  • 取值范围：
    • record 语音输入
    • text 文本输入

示例代码

  1. var UIChatInput = api.require('UIChatInput');
  2. UIChatInput.switchInputArea({
  3.     type：'record'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setSwitchBtnIcon

设置切换（输入框/录音按钮）按钮的图标

params

path:

  • 类型：JSON对象
  • 描述：切换按钮图标的路径
  1. {
  2.     normalImg:'',    //字符串类型；未选中时的图标 （支持widget:// fs://）
  3.     activeImg:''     //字符串类型；选中时的图标 （支持widget:// fs://）
  4. }

示例代码

  1. var UIChatInput = api.require('UIChatInput');
  2. UIChatInput.setSwitchBtnIcon({
  3.     path:{
  4.         normalImg:'widget://image/switch_normal.png',
  5.         activeImg:'widget://image/switch_selected.png' 
  6.     }
  7. });

iOS系统，Android系统