hintChatBox

来自于：官方立即使用

open setHintButton setHintButtonListener setAddView setInputFieldListener close show hide becomeFirstResponder resignFirstResponder setMsg getMsg configMsg insertMsg setHintView setPlaceholder

论坛示例

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

概述

hintChatBox 是一个聊天输入框模块，集成了表情，从相册选取图片的功能。开发者可自定义表情集，只需简单配置即可实现自定义表情和添加点击事件。开发者可自定义快捷输入面板，用户可选择快捷输入

open

打开输入框

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

params

bgColor:

  • 类型：字符串
  • 默认值：#f2f2f2
  • 描述：（可选项）输入视图背景色设置，支持 rgb，rgba，#

boardBgColor:

  • 类型：字符串
  • 默认值：#FFFFFF
  • 描述：（可选项）附加功能面板、表情面板背景色设置，支持 rgb，rgba，#

lineColor:

  • 类型：字符串
  • 默认值：#d9d9d9
  • 描述：（可选项）输入框视图最上边的分割线色，支持 rgb，rgba，#

borderColor:

  • 类型：字符串
  • 默认值：#B3B3B3
  • 描述：（可选项）输入框边框色，支持 rgb，rgba，#

fileBgColor:

  • 类型：字符串
  • 默认值：#FFFFFF
  • 描述：（可选项）输入框背景色，支持 rgb，rgba，#

switchButton:

  • 类型：JSON 对象
  • 默认值：无
  • 描述：表情键盘加号的按钮图片，可为空
  • 内部字段：
  1.     {
  2.         faceNormal:        //(可选项)表情按钮背景图片路径，支持widget、fs等本地路径协议,默认纯绿色面板
  3.         faceHighlight:     //(可选项)表情按钮高亮图片路径，支持widget、fs等本地路径协议,
  4.         addNormal:         //(可选项)添加按钮背景图片路径，支持widget、fs等本地路径协议,，默认纯绿色面板
  5.         addHighlight:      //(可选项)添加按钮高亮图片路径，支持widget、fs等本地路径协议,
  6.         keyboardNormal:    //(可选项)键盘按钮背景图片路径，支持widget、fs等本地路径协议,，默认纯绿色面板
  7.         keyboardHighlight: //(可选项)键盘按钮高亮图片路径，支持widget、fs等本地路径协议,
  8.     }

addButtons：

  • 类型：数组
  • 默认值：见内部字段
  • 描述：(可选项)添加界面的按钮信息
  • 内部字段：
  1.     [{
  2.         normal:               //（可选项）常态按钮背景图片，支持widget、fs等本地路径协议，默认绿色面板
  3.         highlight:            //（可选项）高亮按钮背景图片，支持widget、fs等本地路径协议，默认暗色
  4.         title:                //（可选项）按钮标题，默认无
  5.         titleSize:            //（可选项）标题大小，默认10
  6.     }]

pageControl：

  • 类型：JSON 对象
  • 默认值：见内部字段
  • 描述：（可选项）表情和添加界面的页面控制器配置
  • 备注：可不传，不传则没有控制器
  • 内部字段：
  1.     {
  2.         normalColor:        //（可选项）常态色，字符串，默认#c4c4c4
  3.         highlightColor:     //（可选项）选中色，字符串，默认#9e9e9e
  4.     }

sourcePath：

  • 类型：字符串
  • 默认值:无
  • 描述：自定义表情源文件(.json 的文件和图片表情集文件同名且在同一路径下)的路径，不可为空，json 文件格式如下：[{name:’Expression_1’,text:’[微笑]’}]

placeholder：

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

maxLines：

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

leftButton：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：（可选项）输入框左边按钮设置
  • 备注：若不传则不显示左边按钮
  • 内部字段：
  1. {
  2.     hint：{              //快捷文字提示面板设置，不可为空
  3.        bg：              //（可选项）面板背景设置，支持 rgb，rgba，#，img，默认白色
  4.        borderLineColor:,//（可选项）字符串类型；提示面板分割线颜色
  5.           buttons：[{      //提示面板导航按钮组成的数组
  6.               normal:   //按钮常态下的背景图片
  7.               selected: //点击后背景图片
  8.        }]
  9.         hints：
  10.         [{            //快捷提示文面板设置，数组对象，与buttons按序一一对应
  11.              size：    //（可选项）快捷文字大小，数字类型，默认12
  12.             color:   //（可选项）快捷文字颜色，默认黑色，支持 rgb，rgba，#
  13.             contents://快捷文字内容组成的数组，数组对象
  14.             normal:  //快捷提示文字开头标注图标，支持widget，fs，等本地路径
  15.             selected://快捷提示文字开头选中标注图标，支持widget，fs,等本地路径
  16.         }]
  17.         activeBtn:  //数字类型；leftBtn显示的当前活跃按钮的索引，小于buttons数组元素总数；默认值为0
  18. }
  19.    }

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1.     {
  2.         eventType：       //回调事件类型，字符串，取值范围如下：
  3.                            show:    //模块视图打开成功
  4.                            send:    //用户点击发送按钮事件
  5.                           addBtn：  //用户点击右边加号按钮事件的回调，如果open时传了addButtons参数才有次类型的回调
  6.                           faceBtn： //用户点击表情按钮事件的回调
  7.                           leftBtn： //用户点击左边按钮事件的回调
  8.                           addBoard：//用户点击添加面板内按钮的事件的回调
  9.         click:           //是否是点击事件的回调，布尔类型 deprecated
  10.         index:           //若eventType为addBoard（或者click为true），则此参数为用户点击按钮的下标，否则undefined
  11.         msg:             //返回输入的文字
  12.         btnStatus:       //字符串类型；当eventType为leftBtn时，本字段表示按钮状态，取值范围如下：
  13.                            normal:  //未被选中的状态
  14.                            selected://选中后的状态
  15.     }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.open({
  3.     switchButton: {
  4.         faceNormal: 'widget://image/chatBox_face1.png',
  5.         addNormal: 'widget://image/chatBox_add1.png',
  6.         keyboardNormal: 'widget://image/chatBox_key1.png'
  7.     },
  8.     sourcePath: 'widget://image/emotion',
  9.     addButtons: [{
  10.         normal: 'widget://image/chatBox_album1.png',
  11.         title: '相册'
  12.     }, {
  13.         normal: 'widget://image/chatBox_album1.png',
  14.         title: '相册'
  15.     }]
  16. }, function(ret, err) {
  17.     if (ret) {
  18.         alert(JSON.stringify(ret));
  19.     } else {
  20.         alert(JSON.stringify(err));
  21.     }
  22. });

补充说明

打开输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setHintButton

设置设置指定提示按钮为活跃状态项

setHintButton({params})

params

index：

  • 类型：数字
  • 默认值：0
  • 描述：（可选项）指定的索引

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setHintButton({
  3.     index: 2
  4. });

补充说明

配合open接口使用，若open接口无leftButton参数，此接口无意义

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setHintButtonListener

设置提示面板上提示按钮的监听

setHintButtonListener(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     index：      //提示按钮在列表中的下标，数字类型
  3.     eventType：  //事件类型，取值范围如下：
  4.                   open： //打开提示面板事件
  5.                   close： //关闭提示面板事件
  6.                   click： //点击提示面板内按钮事件
  7. }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setHintButtonListener(function(ret, err) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

补充说明

配合 open 接口的 leftButton 参数使用

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setAddView

设置刷新添加按钮面板上的按钮

setAddView({params})

params

addButtons：

  • 类型：数组
  • 默认值：无
  • 描述：（可选项）添加界面的按钮信息
  • 备注：不传则不刷新
  • 内部字段：
  1.     [{
  2.         normal:                 //常态按钮背景图片，可为空，默认绿色面板
  3.         highlight:               //高亮按钮背景图片，可为空，默认暗色
  4.         title:                   //按钮标题，可为空，默认无
  5.         titleSize:                //标题大小，可为空，默认10
  6.         titleColor:               //标题颜色，可为空，默认#a3a3a3
  7.     }]

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setAddView();

补充说明

配合 open 接口使用

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setInputFieldListener

设置输入框监听

setInputFieldListener(callBack( ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1.     {
  2.          eventType:    //输入框弹动事件，取值范围见输入框弹动事件类型
  3.          inputFieldH： //输入框的高度，数字类型
  4.          chatViewH：   //输入框下边缘距离屏幕底边的高度，数字类型
  5.     }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setInputFieldListener(function(ret, err) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

补充说明

配合open接口使用

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭聊天输入框

close()

示例代码

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

补充说明

关闭聊天输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

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

补充说明

显示聊天输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

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

补充说明

隐藏聊天输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

becomeFirstResponder

弹出键盘

becomeFirstResponder(callBack( ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1.     {
  2.         status:           //操作状态码
  3.     }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.becomeFirstResponder(function(ret, err) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

resignFirstResponder

隐藏键盘

resignFirstResponder(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1.     {
  2.         status:           //操作状态码
  3.     }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.resignFirstResponder(function(ret, err) {
  3.     if (ret.status) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

setMsg

设置输入框内的文字

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

params

msg:

  • 类型：字符串
  • 默认值：空字符串
  • 描述：(可选项)要设置的输入框内的文字内容

callback( ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1.     {
  2.         status:           //布尔类型，操作是否成功状态值
  3.     }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setMsg({
  3.     msg: '设置的文字'
  4. }, function(ret, err) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     } else {
  8.         alert(JSON.stringify(err));
  9.     }
  10. });

补充说明

设置输入框内的文字

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

getMsg

获取当前输入框内的文字

getMsg(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1.     {
  2.         msg:           // 字符串类型，获取到的当前输入框内的文字
  3.     }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.getMsg(function(ret, err) {
  3.     if (ret.status) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

补充说明

获取当前输入框内的文字

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

configMsg

配置当前输入框内的文字

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

params

msg:

  • 类型：字符串
  • 默认值：无
  • 描述：(可选项)要设置的输入框内的文字内容

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      status:           // 布尔类型，操作是否成功状态值
  3.      msg:              // 字符串类型，获取到的当前输入框内的文字
  4. }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.configMsg(function(ret, err) {
  3.     if (ret.status) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

insertMsg

向当前输入框内指定位置插入字符串

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

params

index:

  • 类型：数字
  • 默认值：当前输入框内字符串的长度
  • 描述：(可选项)插入当前输入框内字符串的位置

msg:

  • 类型：字符串
  • 默认值：空字符串
  • 描述：(可选项)要插入到输入框内的文字内容

示例代码

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

补充说明

无

可用性

iOS系统，Android系统 可提供的1.0.2及更高版本

setHintView

设置刷新提示语面板内容

setHintView({params})

params

hint：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：（可选项）输入框左边按钮刷新
  • 备注：不传或传空则不刷新提示面板内容
  • 内部字段：
  1. {               //（快捷文字提示面板设置
  2.    bg：          //（可选项）面板背景设置，支持 rgb，rgba，#，img，默认白色
  3.    buttons：[{   //提示面板导航按钮组成的数组
  4.      normal:    //（可选项）按钮常态下的背景图片
  5.      selected:  //（可选项）点击后背景图片，
  6.    }]
  7.    hints：[{    //快捷提示文面板设置，数组对象，与buttons对应
  8.       size：    //（可选项）快捷文字大小，默认12
  9.       color:    //（可选项）快捷文字颜色，默认黑色，支持 rgb，rgba，#
  10.       contents: //快捷文字内容组成的数组，数组对象
  11.       normal:   //快捷提示文字开头标注图标，支持widget，fs，等本地路径
  12.       selected: //快捷提示文字开头选中标注图标，支持widget，fs,等本地路径
  13.     }]
  14. }

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setHintView();

补充说明

配合open接口使用

可用性

iOS系统，Android系统 可提供的1.0.1及更高版本

setPlaceholder

设置占位提示文字

setPlaceholder({params})

params

placeholder：

  • 类型：字符串
  • 默认值：空
  • 描述：（可选项）占位提示文字
  • 备注：若不传或传空则表示清空占位提示文字

示例代码

  1. var hintChatBox = api.require('hintChatBox');
  2. hintChatBox.setPlaceholder({
  3.     placeholder: '我是占位提示文字'
  4. });

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

输入框弹动事件类型

输入框弹动事件类型

输入框弹动事件类型。字符串类型

取值范围：

  • move //输入框弹动事件
  • change //输入框高度改变事件