UIChatTools

来自于：官方立即使用

open setAppendButton faceListener addFace imageListener toolsListener recorderListener startTimer close show hide popupKeyboard closeKeyboard popupBoard closeBoard value insertValue chatBoxListener setPlaceHolder clearText cancelRecord

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

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

本模块的主要功能有：

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

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

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

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

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

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

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

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

功能详情参考接口参数。

模块预览图如下：

UIChatTools

本模块源码已开源：https://github.com/apicloudcom/APICloud-Modules/UIChatTools

模块接口

open

打开聊天输入框

open({parmas}, callback(ret, err))

params

chatBox：

  • 类型：JSON 对象
  • 描述：（可选项）聊天输入框配置
  • 内部字段：
  1. {
  2.     placeholder: '',       //（可选项）字符串类型；占位提示文本，不传则无占位符
  3.     autoFocus: false,     //（可选项）布尔类型；是否在打开时自动获取焦点，并弹出键盘；默认：false
  4.     maxRows: 6             //（可选项）数字类型；显示的最大行数（高度自适应），超过最大行数则可上下滚动查看；默认：6
  5. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）聊天输入框样式配置
  • 内部字段：
  1. {
  2.     bgColor: '#D1D1D1',   //（可选项）字符串类型；模块背景色配置，支持rgb、rgba、#；默认：#D1D1D1
  3.     margin: 10,           //（可选项）数字类型；输入框左右边距；默认：10
  4.     mask: {               //（可选项）JOSN 对象；聊天框以外区域的遮罩层配置，若不传则无遮罩层
  5.        bgColor:'rgba(0,0,0,0.5)',//（可选项）字符串类型；遮罩层背景色配置，支持rgb、rgba、#；默认：rgba(0,0,0,0.5)
  6.     }             
  7. }

useFacePath：

  • 类型：布尔类型
  • 描述：（可选项）返回文本中表情是否以路径返回。仅Android有效。
  • 默认：false

isShowAddImg：

  • 类型：布尔类型
  • 描述：（可选项）是否显示表情面板中的加号按钮
  • 默认：true

tools：

  • 类型：JSON 对象
  • 描述：聊天输入框下工具栏配置
  • 内部字段：
  1. {
  2.     h: 44,          //（可选项）数字类型；工具栏高度；默认：44
  3.     iconSize: 30,   //（可选项）数字类型；工具栏每个按钮的图标大小；默认：30
  4.     recorder: {     //（可选项）JSON 对象；录音按钮配置，若不传则工具栏无录音按钮，本功能需配合recorderListener 接口使用
  5.        normal: '',  //字符串类型；常态下的图标，要求本地路径（fs、widget）
  6.        selected: '' //字符串类型；选中后的图标，要求本地路径（fs、widget），同按下时高亮状态公用同一个图标
  7.     },
  8.     image: {        //（可选项）JSON 对象；选图片按钮配置，若不传则工具栏无选图按钮，本功能需配合imageListener 接口使用
  9.        normal: '',  //字符串类型；常态下的图标，要求本地路径（fs、widget）
  10.        selected: '' //字符串类型；选中后的图标，要求本地路径（fs、widget），同按下时高亮状态公用同一个图标
  11.     },
  12.     video: {        //（可选项）JSON 对象；录像按钮配置，若不传则工具栏无录像按钮，本功能需配合toolsListener 接口使用
  13.        normal: '',  //字符串类型；常态下的图标，要求本地路径（fs、widget）
  14.        selected: '' //字符串类型；选中后的图标，要求本地路径（fs、widget），同按下时高亮状态公用同一个图标
  15.     },
  16.     packet: {       //（可选项）JSON 对象；红包按钮配置，若不传则工具栏无红包按钮，本功能需配合toolsListener 接口使用
  17.        normal: '',  //字符串类型；常态下的图标，要求本地路径（fs、widget）
  18.        selected: '' //字符串类型；选中后的图标，要求本地路径（fs、widget），同按下时高亮状态公用同一个图标
  19.     },
  20.     face: {         //（可选项）JSON 对象；表情按钮配置，若不传则工具栏无表情按钮，本功能需配合 faceListener、addFace 接口以及 emotions 参数使用
  21.        normal: '',  //字符串类型；常态下的图标，要求本地路径（fs、widget）
  22.        selected: '' //字符串类型；选中后的图标，要求本地路径（fs、widget），同按下时高亮状态公用同一个图标
  23.     },
  24.     append: {       //（可选项）JSON 对象；附加按钮配置，若不传则工具栏无附加按钮，本功能需配合 setAppendButton 接口使用
  25.        normal: '',  //字符串类型；常态下的图标，要求本地路径（fs、widget）
  26.        selected: '' //字符串类型；选中后的图标，要求本地路径（fs、widget），同按下时高亮状态公用同一个图标
  27.     }
  28. }

emotions：

  • 类型：数组
  • 描述：表情包源文件夹路径组成的数组
  • 注意：
  1.     1，本参数必须在 tools -> face 参数有值时有效
  2.     2，表情包源文件就是表情图片所在的文件夹，须同时包含一个与该文件夹同名的 .json 配置文件
  3.     3，表情包源文件路径必须是本地路径，如：fs://、widget://
  4.     4，.json 文件内的 name 值必须与表情文件夹内表情图片名对应，emoji 表情除外。
  5.     5，本数组的第一个路径值必须是普通表情包路径，其余路径为附加表情包路径
  6.     6，表情包源文件内必须包含一个通该文件夹同名的 .png 图标，用来显示在表情面板表情索引导航条
  • 内部字段示例：
  1.     ['widget://res/emotions/basic','widget://res/emotions/append1','widget://res/emotions/append2']
  • 普通表情包.json配置文件格式如下：
  1.     [
  2.             {   
  3.             label:"常用表情",
  4.             emotions:[
  5.                         {"name": "Expression_1","text": "[微笑]"},
  6.                 {"name": "Expression_2","text": "[撇嘴]"},
  7.                 {"name": "Expression_3","text": "[色]"}
  8.                       ] 
  9.          },
  10.              {
  11.             label:'全部表情',
  12.                  emotions:[
  13.                 {"name": "Expression_11","text": "[尴尬]"},
  14.                 {"name": "Expression_12","text": "[发怒]"},
  15.                 {"name": "Expression_13","text": "[调皮]"},
  16.                 {"name": "Expression_14","text": "[呲牙]"},
  17.                 {"name": "Expression_15","text": "[惊讶]"},
  18.                 {"name": "Expression_16","text": "[难过]"},
  19.                 {"name": "Expression_17","text": "[酷]"},
  20.                 {"name": "Expression_18","text": "[冷汗]"},
  21.                 {"name": "Expression_19","text": "[抓狂]"},
  22.                 {"name": "Expression_20","text": "[吐]"}
  23.                  ]
  24.         },
  25.              {
  26.                  label:"emoji表情",
  27.             emotions:[
  28.                         {"name": "😀","text": "😀"},
  29.                         {"name": "😁","text": "😁"},
  30.                         {"name": "😂","text": "😂"}
  31.                  ]
  32.         }
  33. ]
  • 附加表情包.json配置文件格式如下：
  1. [
  2.         {"name": "Expression_1","text": "[微笑]"},
  3.         {"name": "Expression_2","text": "[撇嘴]"},
  4.         {"name": "Expression_3","text": "[色]"},
  5.         {"name": "Expression_4","text": "[发呆]"},
  6.         {"name": "Expression_5","text": "[得意]"},
  7.         {"name": "Expression_6","text": "[流泪]"},
  8.         {"name": "Expression_7","text": "[害羞]"},
  9.         {"name": "Expression_8","text": "[闭嘴]"},
  10.         {"name": "Expression_9","text": "[睡]"},
  11.         {"name": "Expression_10","text": "[大哭]"}
  12. ]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',  //字符串类型；回调的事件类型，
  3.                         //取值范围：
  4.                         //show：模块打开成功并显示在屏幕上
  5.                         //send：用户点击表情面板、键盘面板（在android 平台上表示输入框右边发送按钮）发送按钮
  6.     msg: ''             //字符串类型；当 eventType 为 send 时，此参数返回输入框的内容，否则无返回值
  7. }

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.open({
  3.     chatBox: {
  4.         placeholder: '聊天内容',     
  5.         autoFocus: false,  
  6.         maxRows: 6     
  7.     },
  8.     styles: {
  9.         bgColor: '#D1D1D1',   
  10.         margin: 10,           
  11.         mask: {               
  12.            bgColor:'rgba(0,0,0,0.5)'
  13.         }             
  14.     },
  15.     tools: {
  16.         h: 44,          
  17.         iconSize: 30,   
  18.         recorder: {     
  19.            normal: 'fs://UIChatTolls/recorder.png',  
  20.            selected: 'fs://UIChatTolls/recorder1.png' 
  21.         },
  22.         image: {        
  23.            normal: 'fs://UIChatTolls/image.png',  
  24.            selected: 'fs://UIChatTolls/image1.png' 
  25.         },
  26.         video: {        
  27.            normal: 'fs://UIChatTolls/video.png',  
  28.            selected: 'fs://UIChatTolls/video1.png' 
  29.         },
  30.         packet: {       
  31.            normal: 'fs://UIChatTolls/packet.png',  
  32.            selected: 'fs://UIChatTolls/packet1.png' 
  33.         },
  34.         face: {         
  35.            normal: 'fs://UIChatTolls/face.png',  
  36.            selected: 'fs://UIChatTolls/face1.png' 
  37.         },
  38.         append: {       
  39.            normal: 'fs://UIChatTolls/append.png',  
  40.            selected: 'fs://UIChatTolls/append1.png'
  41.         }
  42.     },
  43.     emotions:['widget://res/emotions/basic','widget://res/emotions/append1','widget://res/emotions/append2']
  44. }, function(ret) {
  45.     if (ret) {
  46.         api.alert({msg:JSON.stringify(ret)});
  47.     } 
  48. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setAppendButton

设置附加功能按钮，仅当 open 接口内 tools->append 参数有值时，本接口有效

setAppendButton({params}, callback(ret))

params

styles：

  • 类型：JSON 对象
  • 描述：（可选项）附加功能面板按钮样式配置
  • 内部字段：
  1. {
  2.     row: 2,            //（可选项）数字类型；每页显示按钮行数；默认：2
  3.     column: 4,         //（可选项）数字类型；每页显示按钮的列数；默认：4
  4.     iconSize: 30,      //（可选项）数字类型；按钮图标大小；默认：30
  5.     titleSize: 13,     //（可选项）数字类型；按钮下标题文字大小；默认：13
  6.     titleColor: ''     //（可选项）字符串类型；按钮下标题文字颜色；默认：#000
  7. }

buttons：

  • 类型：数组
  • 描述：附加功能面板按钮信息集合，可分页显示
  • 内部字段：
  1. [{
  2.     normal: '',       //字符串类型；按钮常态下的背景图标路径，要求本地路径（fs、widget）
  3.     highlight: '',    //字符串类型；按钮被点击时高亮状态的背景图标路径，要求本地路径（fs、widget）
  4.     title: ''         //字符串类型；按钮下边的标题文字
  5. }]

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      index: 0     //数字类型；用户点击按钮的索引（从零开始）
  3. }

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.setAppendButton({
  3.     styles: {
  4.         row: 2,         
  5.         column: 4,         
  6.         iconSize: 30,      
  7.         titleSize: 13,   
  8.         titleColor: ''     
  9.     },
  10.     buttons: [
  11.        {
  12.             normal: 'fs://UIChatTools/append1.png',       
  13.             highlight: 'fs://UIChatTools/append11.png',    
  14.             title: '电话'       
  15.        },{
  16.             normal: 'fs://UIChatTools/append2.png',       
  17.             highlight: 'fs://UIChatTools/append21.png',    
  18.             title: '收藏' 
  19.        },{
  20.             normal: 'fs://UIChatTools/append3.png',       
  21.             highlight: 'fs://UIChatTools/append31.png',    
  22.             title: '发红包' 
  23.        },{
  24.             normal: 'fs://UIChatTools/append2.png',       
  25.             highlight: 'fs://UIChatTools/append21.png',    
  26.             title: '收藏' 
  27.        },{
  28.             normal: 'fs://UIChatTools/append3.png',       
  29.             highlight: 'fs://UIChatTools/append31.png',    
  30.             title: '发红包' 
  31.        },{
  32.             normal: 'fs://UIChatTools/append2.png',       
  33.             highlight: 'fs://UIChatTools/append21.png',    
  34.             title: '收藏' 
  35.        },{
  36.             normal: 'fs://UIChatTools/append3.png',       
  37.             highlight: 'fs://UIChatTools/append31.png',    
  38.             title: '发红包' 
  39.        },{
  40.             normal: 'fs://UIChatTools/append2.png',       
  41.             highlight: 'fs://UIChatTools/append21.png',    
  42.             title: '收藏' 
  43.        },{
  44.             normal: 'fs://UIChatTools/append3.png',       
  45.             highlight: 'fs://UIChatTools/append31.png',    
  46.             title: '发红包' 
  47.        },{
  48.             normal: 'fs://UIChatTools/append2.png',       
  49.             highlight: 'fs://UIChatTools/append21.png',    
  50.             title: '收藏' 
  51.        },{
  52.             normal: 'fs://UIChatTools/append3.png',       
  53.             highlight: 'fs://UIChatTools/append31.png',    
  54.             title: '发红包' 
  55.        },{
  56.             normal: 'fs://UIChatTools/append2.png',       
  57.             highlight: 'fs://UIChatTools/append21.png',    
  58.             title: '收藏' 
  59.        }
  60.     ]
  61. }, function(ret) {
  62.    api.alert({msg:'点击了第'+ret.index+'个按钮'});
  63. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

faceListener

表情面板相关功能事件的监听，仅当 open 接口内 tools->face 参数有值时，本接口有效

faceListener({params}, callback(ret, err))

params

name：

  • 类型：字符串
  • 描述：事件的目标对象
  • 取值范围：
    • face：表情点击事件（开发者可在此事件的回调里发送点击的表情）
    • appendFace：表情面板上附件按钮点击事件（开发者可在此事件里通过addFace接口添加附加表情包）

callback(ret)

ret：

  • 类型：JSON 对象
  • 描述：所监听到的事件
  • 内部字段：
  1. {
  2.      emoticonName: 'append1',  //字符串类型；表情包文件夹名字，仅当 name 为 face 时本参数有值
  3.      text:'[么么哒]'            //字符串类型；用户所点击的表情的 text 内容，仅当 name 为 face 时本参数有值
  4. }

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.faceListener({
  3.     name: 'face'
  4. }, function(ret) {
  5.    api.alert({msg:JSON.stringify(ret)});
  6. });
  8. var UIChatTools = api.require('UIChatTools');
  9. UIChatTools.faceListener({
  10.     name: 'appendFace'
  11. }, function(ret) {
  13.    // 
  14.    if(ret.emoticonName == undefined){
  15.      //打开添加表情页面
  16.        api.openWin({
  17.             name: 'face',
  18.             url: './face.html'
  19.     });
  20.     //选择表情后调用addFace接口添加表情包
  21.     var UIChatTools = api.require('UIChatTools');
  22.     UIChatTools.addFace({
  23.         path: 'fs://newFace'
  24.     });
  25.    } else{
  26.     // 点击表情
  27.    }
  29. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addFace

添加表情包，仅当 open 接口内 tools->face 参数有值时，本接口有效

addFace({params}, callback(ret, err))

params

path：

  • 类型：字符串
  • 描述：表情包文件夹路径，表情包格式规范要求同 open 内附加表情包格式规范一致

callback(ret)

ret：

  • 类型：JSON 对象
  • 描述：所监听到的事件
  • 内部字段：
  1. {
  2.      status: true  //布尔类型；是否添加成功，true|false
  3. }

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.addFace({
  3.     path: 'fs://newFace'
  4. }, function(ret) {
  5.    api.alert({msg:JSON.stringify(ret)});
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

imageListener

选择图片相关功能事件的监听，仅当 open 接口内 tools->image 参数有值时，本接口有效

imageListener({params}, callback(ret, err))

callback(ret)

ret：

  • 类型：JSON 对象
  • 描述：所监听到的事件
  • 内部字段：
  1. {
  2.      eventType: album, // 字符串类型，事件返回类型取值范围如下：
  3.                // album
  4.                // edit
  5.                // send
  6.      images:[]     //数组类型；用户选择的图片绝对路径（iOS平台上会把所选择系统相册内图片拷贝到app沙箱缓冲目录下）组成的数组，仅当 eventType 为 edit 或 send 时本参数有值
  7. }

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.imageListener(function(ret){
  3.     alert(JSON.stringify(ret));
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

toolsListener

用户点击工具栏内某个按钮事件的监听

toolsListener(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 描述：用户点击工具栏按钮的监听事件
  • 内部字段：
  1. {
  2.       eventType:'recorder'    //字符串类型；监听到的事件类型，取值范围如下：
  3.                               //recorder：用户点击录音按钮事件
  4.                               //image：用户点击选择图片按钮事件
  5.                               //video：用户点击视频按钮事件
  6.                               //packet：用户点击钱包按钮的事件
  7.                               //face：用户点击表情按钮的事件
  8.                               //append：用户点击附件功能按钮事件
  9. }

示例代码

  1. //监听 talkback 按钮
  2. var UIChatTools = api.require('UIChatTools');
  3. UIChatTools.toolsListener(function(ret) {
  4.    if (ret.eventType == 'packet') {
  5.       api.openWin({
  6.             name: 'packet',
  7.             url: './packet.html',
  8.             pageParam: {
  9.                 name: '发红包'
  10.             }
  11.         });
  12.    }
  13. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

recorderListener

录音相关功能事件的监听，仅当 open 接口内 tools->recorder 参数有值时，本接口有效

recorderListener(callback(ret, err))

callback(ret)

ret：

  • 类型：JSON 对象
  • 描述：所监听到的事件
  1. {
  2.     eventType: press, // 取值范围如下：
  3.               // press 对讲按钮按下触发，仅在按下talkback按钮时有效
  4.               // auditionTouchOn 触摸到左侧试听按钮时触发（仅在按下talkback时有效）
  5.               // audition 试听
  6.               // send 发送  仅在按下record按钮时有效
  7.               // cancel 取消 
  8.               // shortTime 按下时间太短，仅在按下talkback时有效
  9.               // start 开始 仅在按下录音按钮时有效
  10.               // stop  停止 仅在按下录音按钮时有效
  11.     target: talkback  // 取值范围如下：
  12.               // talkback 对讲按钮
  13.               // record 录音按钮
  15. }

示例代码

  1. //监听 talkback 按钮
  2. var UIChatTools = api.require('UIChatTools');
  3. UIChatTools.recorderListener(function(ret) {
  4.     if(ret.eventType == 'press' && ret.target == 'talkback'){
  5.         alert('按下录音');
  6.     }
  8.     if(ret.eventType == 'start' && ret.target == 'record'){
  9.         alert('开始录音');
  10.     }
  11. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

startTimer

开始录音后开启录音计时器，使录音页面计时器开始计时。本接口仅能在 recorderListener 监听 target 为 talkback/record，name 为 press/start 时的监听回调函数内调用

startTimer()

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.startTimer();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭聊天输入框

close()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘

popupKeyboard()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘

closeKeyboard()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupBoard

弹出表情、附加功能面板

popupBoard({params})

params

target:

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeBoard

收起表情、附加功能面板

closeBoard()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

value

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

value({params}, callback(ret, err))

params

msg：

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

callback(ret, err)

ret：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

insertValue

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

insertValue({params})

params

index：

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

msg：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

chatBoxListener

添加输入框相关事件的监听

chatBoxListener({params}, callback(ret))

params

name：

  • 类型：字符串
  • 描述：监听的事件类型
  • 取值范围：
    • move：输入框弹动事件
    • change：输入框高度改变事件
    • valueChanged：输入框内容改变事件

callback(ret)

ret：

  • 类型：JSON 对象
  • 描述：监听事件返回目标值，注意：模块分为三分部分：1，输入框（chatBox）及其所占区域；2，工具栏（tools）；3，键盘（及表情面包、附件功能面板、录音面板、图片选择面板）所占区域
  • 内部字段：
  1. {
  2.     chatBoxHeight: 60,     //数字类型；输入框所占区域的高度，仅当监听 move 和 change 事件时本参数有值
  3.     panelHeight: 300 ,     //数字类型；工具栏下边缘距离屏幕底部（键盘及表情面板、附件功能面板、录音面板、图片选择面板所占区域）的高度，仅当监听 move 和 change 事件时本参数有值
  4.     value: ''              //字符串类型；输入框当前内容，仅当 name 为 valueChanged 时有值
  5. }

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.chatBoxListener({
  3.         name:'move'
  4. }, function(ret){
  5.     alert(JSON.stringify(ret));
  6. });            
  7. UIChatTools.chatBoxListener({
  8.            name:'change'
  9. }, function(ret){
  10.     alert(JSON.stringify(ret));
  11. });
  12. UIChatTools.chatBoxListener({
  13.            name:'valueChanged'
  14. }, function(ret){
  15.     alert(JSON.stringify(ret));
  16. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setPlaceholder

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

setPlaceholder({params})

params

placeholder：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearText

清空输入框文本

clearText()

示例代码

  1. var UIChatTools = api.require('UIChatTools');
  2. UIChatTools.clearText();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

cancelRecord

取消录音

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段:
  1. {
  2.    eventType: 'cancelRecord'        //字符串；返回事件类型；暂仅返回 "cancelRecord"
  3. }

示例代码

  1. var UIChatInput = api.require('UIChatTools');
  2. UIChatInput.cancelRecord(function(ret){
  3.     alert(JSON.stringify(ret));
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本