UIChatInput

来自于:AC模块工作室立即使用

open close show hide popupBoard closeBoard popupKeyboard closeKeyboard value insertValue addEventListener setPlaceholder reloadExtraBoard switchInputArea 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:

  • 类型:字符串
  • 描述:自定义表情文件夹(表情图片所在的文件夹,须同时包含一个与该文件夹同名的.json配置文件)的路径(本地路径,fs://、widget://)。.json文件内的 name 值必须与表情文件夹内表情图片名对应。另附:表情文件夹资源示例
  • .json配置文件格式如下:
  1. [
  2. {'name': 'Expression_1', 'text': '[微笑]'},
  3. {'name': 'Expression_2', 'text': '[撇嘴]'}
  4. ]
  • .json配置文件所在目录:

emotionPath

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
  15. },
  16. emotionBtn: { //(可选项)JSON对象;表情按钮样式;不传则不显示表情按钮
  17. normalImg: 'widget://' //(可选项)字符串类型;表情按钮常态的背景图片(本地路径,fs://、widget://);默认:笑脸小图标,
  18. },
  19. extrasBtn: { //(可选项)JSON对象;附加功能按钮样式,不传则不显示附加功能按钮
  20. normalImg: 'widget://' //(可选项)字符串类型;附加功能按钮常态的背景图片(本地路径,fs://、widget://)
  21. },
  22. keyboardBtn: { //JSON对象;键盘按钮样式
  23. normalImg: 'widget://' //字符串类型;键盘按钮常态的背景图片(本地路径,fs://、widget://);默认:键盘小图标
  24. },
  25. switchBtn: { //(可选项)JSON对象;输入框左侧按钮样式,不传则不显示左边的语音按钮
  26. normalImg: 'widget://', //字符串类型;左侧按钮常态的背景图片(本地路径,fs://、widget://)
  27. activeImg:'' //字符串类型;左侧按钮按下的背景图片(本地路径,fs://、widget://)
  28. },
  29. recordBtn: { //JSON对象;“按住 录音”按钮的样式
  30. normalBg: '#c4c4c4', //(可选项)字符串类型;按钮常态的背景,支持 rgb,rgba,#,图片路径(本地路径,fs://、widget://);默认:'#c4c4c4'
  31. activeBg: '#999999', //(可选项)字符串类型;按钮按下时的背景,支持 rgb,rgba,#,图片路径(本地路径,fs://、widget://);默认:'#999999';normalBg 和 activeBg 必须保持一致,同为颜色值,或同为图片路径
  32. color: '#000', //(可选项)字符串类型;按钮标题文字的颜色,支持 rgb,rgba,#,默认:'#000000'
  33. size: 14 //(可选项)数字类型;按钮标题文字的大小,默认:14
  34. },
  35. recordPanelBtn:{ //JSON对象;录音面板样式
  36. normalImg: '', //(可选项)字符串类型;按钮常态的图片
  37. activeImg: '' //(可选项)字符串类型;按钮按下时的图片
  38. width:100, //(可选项)数字类型;按钮的宽度,默认:100
  39. height:100 //(可选项)数字类型;按钮的高度,默认:100
  40. },
  41. indicator: { //(可选项)JSON对象;表情和附加功能面板的小圆点指示器样式,若不传则不显示该指示器
  42. target: 'both', //(可选项)字符串类型;配置指示器的显示区域;默认:'both'
  43. //取值范围:
  44. //both(表情和附加功能面板皆显示)
  45. //emotionPanel(表情面板显示)
  46. //extrasPanel(附加功能面板显示)
  47. color: '#c4c4c4', //(可选项)字符串类型;指示器颜色;支持 rgb、rgba、#;默认:'#c4c4c4'
  48. activeColor: '#9e9e9e' //(可选项)字符串类型;当前指示器颜色;支持 rgb、rgba、#;默认:'#9e9e9e'
  49. },
  50. sendBtn: { //(可选项)JSON对象;发送按钮样式,本参数对 iOS 平台上的键盘内发送按钮无效
  51. bg: '#4cc518', //(可选项)字符串类型;发送按钮背景颜色,支持 rgb、rgba、#、img;默认:#4cc518
  52. titleColor: '#ffffff', //(可选项)字符串类型;发送按钮标题颜色;默认:#ffffff
  53. activeBg: '#46a91e', //(可选项)字符串类型;发送按钮背景颜色,支持 rgb、rgba、#、img;默认:无
  54. titleSize: 13 //(可选项)数字类型;发送按钮标题字体大小;默认:13
  55. }
  56. }

extras:

  • 类型:JSON 对象
  • 描述:(可选项)点击附加功能按钮,打开的附加功能面板的按钮样式,配合 extrasBtn 一起使用,若 extrasBtn 参数内 normalImg 属性不传则此参数可不传
  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: '按住说话',
  9. activeTitle: '松开结束'
  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()

示例代码

  1. var UIChatInput = api.require('UIChatInput');
  2. UIChatInput.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. });
  6. //获取输入框的值
  7. UIChatInput.value(function(ret, err) {
  8. if (ret) {
  9. alert(JSON.stringify(ret));
  10. } else {
  11. alert(JSON.stringify(err));
  12. }
  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({
  3. index: 10,
  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对象

callback(ret)

ret:

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

示例代码

  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. });
  13. //监听 inputBar
  14. var UIChatInput = api.require('UIChatInput');
  15. UIChatInput.addEventListener({
  16. target: 'inputBar',
  17. name: 'move'
  18. }, function(ret, err) {
  19. if (ret) {
  20. alert(JSON.stringify(ret));
  21. } else {
  22. alert(JSON.stringify(err));
  23. }
  24. });

可用性

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系统

可提供的1.0.0及更高版本