chatBox

open setInputFieldListener show becomeFirstResponder setMsg configMsg setPlaceholder

概述

chatBox是一个聊天输入框模块，集成了表情，从相册选取图片的功能。开发者可自定义表情集，只需简单配置即可实现自定义表情和添加点击事件。chatBox 模块已停止更新，建议使用 模块，此模块已停止更新。

open

打开输入框

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

bgColor:

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

lineColor:

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

borderColor:

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

fileBgColor:

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

switchButton:

  • 类型：JSON 对象
  • 默认值：无
  • 描述：表情键盘加号的按钮图片
  • 内部字段：

sourcePath：

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

addButtons：

  • 类型：数组
  • 默认值：无
  • 描述：（可选项）添加界面的按钮信息
  • 备注：若switchButton内addNormal不传则此参数可不传且不显示右边添加按钮
  • 内部字段：
  2.     highlight:           //（可选项）高亮按钮背景图片，默认暗色
  3.     title:               //（可选项）按钮标题，默认无
  4.     titleSize:           //（可选项）标题大小，默认10
  5.     titleColor:          //（可选项）标题颜色，默认#a3a3a3
  6. }]

pageControl：

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

fixedOn：

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

placeholder：

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

maxLines：

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

leftButton：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：（可选项）输入框左边按钮设置
  • 备注：不传则不显示左边按钮
  • 内部字段：
  1. {
  2.         normal:               //左边按钮背景图片,支持 widget 等本地协议
  3.         selected:             //左边按钮选中后背景图片,支持 widget 等本地协议
  4.         record:{              //录音按钮设置 
  5.             normal:           //（可选项）按钮常态背景图片,支持 rgb，rgba，#，img,默认#c4c4c4
  6.             highlight:        //（可选项）钮按下时背景图片,支持 rgb，rgba，#，img,默认#999999,若normal为颜色值则highlight不支持img，若normal为img则highlight不支持色值，normal和highlight应保持一致，若为颜色值则必须同为颜色值，若为img则同为img
  7.             normalTitle：     //（可选项）按钮常态时的标题，默认'按住 说话'
  8.             highlightTitle：  //（可选项）按钮按下时的标题，默认'松开 结束'
  9.             titleColor：      //（可选项）按钮标题文字的颜色，支持 rgb，rgba，#，默认#000000
  10.             titleSize：       //（可选项）按钮标题文字的大小，数字类型，默认14
  11.           }
  12. }

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. }

示例代码

  1. var addButtonAry = [];
  2. for (var i = 0; i < 3; i++) {
  3.     addButtonAry[i] = {
  4.         normal: "widget://image/chatBox_album1.png",
  5.         title: "相册"
  6.     };
  7. }
  8. var chatBox = api.require('chatBox');
  9. chatBox.open({
  10.     switchButton: {
  12.         faceHighlight: "widget://image/chatBox_face1.png",
  13.         addNormal: "widget://image/chatBox_add1.png",
  14.         addHighlight: "widget://image/chatBox_add1.png",
  15.         keyboardNormal: "widget://image/chatBox_key1.png",
  16.         keyboardHighlight: "widget://image/chatBox_key1.png"
  17.     },
  18.     sourcePath: "widget://image/emotion",
  19.     addButtons: addButtonAry
  20. }, function(ret, err) {
  21.     if (ret.click) {
  22.         api.alert({
  23.             msg: "用户点击了第" + ret.index + "个按钮"
  24.         });
  25.     } else {
  26.         api.alert({
  27.             title: '输入的内容是',
  28.             msg: ret.msg,
  29.             buttons: ['确定']
  30.         });
  31.     }
  32. });

补充说明

打开输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setRecordButtonListener

设置录音按钮监听

setRecordButtonListener(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.  eventType:  //输入框左边按钮触发事件，取值范围如下：
  3.                   touch_in                //点击录音按钮下按事件
  4.                   move_out            //点击录音按钮后手指移出按钮的rect事件
  5.                   move_out_cancel        //点击录音按钮后手指移出按钮的rect后松开事件
  6.                   move_in             //move_out事件后手指重新移动进录音按钮的rect事件
  7. }

示例代码

补充说明

配合open接口内的leftButton参数使用，调用此接口必须在open内传leftButton参数，否则此接口无意义

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

setInputFieldListener

设置输入框监听

setInputFieldListener(callback(ret, err))

callback(ret, err)

ret：

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

示例代码

  1. var chatBox = api.require('chatBox');
  2. chatBox.setInputFieldListener(function(ret, err) {
  3.     api.alert({
  4.         msg: ret.eventType + '*' + ret.h
  5.     });
  6. });

补充说明

配合open接口使用

可用性

可提供的1.0.2及更高版本

close

关闭聊天输入框

close()

示例代码

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

补充说明

关闭聊天输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

  2. chatBox.show();

显示聊天输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

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

补充说明

隐藏聊天输入框

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

becomeFirstResponder

弹出键盘

becomeFirstResponder(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象

内部字段：

  1. {
  2.     status:           //操作状态码
  3. }

示例代码

var chatBox = api.require(‘chatBox’); chatBox.becomeFirstResponder();

补充说明

弹出键盘

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

resignFirstResponder

隐藏键盘

resignFirstResponder(callback(ret, err))

callback(ret, err)

ret：

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

示例代码

var chatBox = api.require(‘chatBox’); chatBox.resignFirstResponder();

补充说明

弹出键盘

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

setMsg

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

params

msg：

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

callback(ret, err)

ret：

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

示例代码

  1. var chatBox = api.require('chatBox');
  2. chatBox.setMsg({
  3.     msg: "设置的文字"
  4. }, function(ret, err) {
  5.     if (ret.status) {
  6.         api.alert({
  7.             msg: "设置成功"
  8.         });
  9.     }
  10. });

补充说明

设置输入框内的文字

iOS系统，Android系统

可提供的1.0.2及更高版本

getMsg

获取当前输入框内的文字

setMsg(callback(ret, err))

callback(ret, err)

ret：

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

示例代码

  1. var chatBox = api.require('chatBox');
  2. chatBox.getMsg(function(ret, err) {
  3.     api.alert({
  4.         msg: ret.msg
  5.     });
  6. });

补充说明

获取当前输入框内的文字

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

configMsg

配置当前输入框内的文字

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

params

msg：

  • 类型：字符串
  • 默认值：无
  • 描述：（可选项）要设置的输入框内的文字内容
  • 备注：若不传则callBack当前值

callback(ret, err)

ret：

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

示例代码

  1. var chatBox = api.require('chatBox');
  2. chatBox.configMsg(function(ret, err) {
  3.     if (ret.status) {
  4.         api.alert({
  5.             msg: ret.msg
  6.         });
  7.     }
  8. });

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

insertMsg

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

insertMsg({params})

params

index：

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

msg：

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

示例代码

补充说明

无

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

setPlaceholder

设置占位提示文字

setPlaceholder({params})

params

placeholder：

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

示例代码

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

补充说明

无

iOS系统，Android系统