cxChatbox

立即使用

概述

cxChatbox 模块是一个类似简书评论输入框模块,通过 open 接口可在当前 window 底部打开一个输入框,该输入框的生命属于当前 window 所有。当输入框获取焦点后,会自动弹动到软键盘之上

模块接口

open

打开聊天输入框

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

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)播放器的位置及尺寸
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;输入框的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,   //(可选项)数字类型;(可选项)输入框的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w: 300,  //(可选项)数字类型;输入框的宽度;iOS支持'auto';默认值:所属的 Window 或 Frame 的宽度
    h: 30   //(可选项)数字类型;输入框高度;默认值:30
}

chatBox:

  • 类型:JSON 对象
  • 描述:(可选项)聊天输入框配置
  • 内部字段:
{
    placeholder: '',       //(可选项)字符串类型;占位提示文本,不传则无占位符
    maxRows: 6,             //(可选项)数字类型;显示的最大行数(高度自适应),超过最大行数则可上下滚动查看;默认:6(仅iOS支持)
    boxHeight:70              //(可选项)数字类型;输入框高度;默认70(仅android支持)
}

styles:

  • 类型:JSON 对象
  • 描述:(可选项)聊天输入框样式配置
  • 内部字段:
{
    normalColor: '#D3D3D3',   //(可选项)字符串类型;未输入状态下背景色配置,支持rgb、rgba、#;默认:#D3D3D3    
    cornerRadius:12,   //(可选项)数字类型;输入框圆角;默认:12      
}

tools:

  • 类型:JSON 对象
  • 描述:聊天输入框下工具栏配置
  • 内部字段:
{
    image: {        //(可选项)JSON 对象;选图片按钮配置,若不传则工具栏无选图按钮,本功能需配合imageListener 接口使用
       normal: '',  //字符串类型;常态下的图标,要求本地路径(fs、widget)
       selected: '' //字符串类型;选中后的图标,要求本地路径(fs、widget),同按下时高亮状态公用同一个图标
    },
    at: {        //(可选项)JSON 对象;@按钮配置,若不传则工具栏无@按钮,本功能需配合atListener 接口使用
       normal: '',  //字符串类型;常态下的图标,要求本地路径(fs、widget)
       selected: '' //字符串类型;选中后的图标,要求本地路径(fs、widget),同按下时高亮状态公用同一个图标
    },
    face: {         //(可选项)JSON 对象;表情按钮配置,若不传则工具栏无表情按钮,本功能需配合 faceListener接口以及 emotion 参数使用
       normal: '',  //字符串类型;常态下的图标,要求本地路径(fs、widget)
       selected: '' //字符串类型;选中后的图标,要求本地路径(fs、widget),同按下时高亮状态公用同一个图标
    },
}

emotion:

  • 类型:字符串
  • 描述:表情包源文件夹路径
  • 注意:
    1,本参数必须在 tools -> face 参数有值时有效
    2,表情包源文件就是表情图片所在的文件夹,须同时包含一个与该文件夹同名的 .json 配置文件
    3,表情包源文件路径必须是本地路径,如:fs://、widget://
    4,.json 文件内的 name 值必须与表情文件夹内表情图片名对应
  • 内部字段示例:
    'widget://res/emotion/basic'
  • 表情包.json配置文件格式如下:(注意key需要为[]格式)
    {
       "[呲牙]":"emot_ic_0",
       "[害羞]":"emot_ic_1",
       "[微笑]":"emot_ic_2",
       "[流泪]":"emot_ic_3",
       "[惊讶]":"emot_ic_4",
       "[调皮]":"emot_ic_5",
       "[亲亲]":"emot_ic_6",
       "[酷]":"emot_ic_7",
       "[伤心]":"emot_ic_8",
       "[发怒]":"emot_ic_9",
       "[鲜花]":"emot_ic_10",
       "[干杯]":"emot_ic_11",
       "[啤酒]":"emot_ic_12",
       "[饭]":"emot_ic_13",
       "[蛋糕]":"emot_ic_14",
       "[玫瑰]":"emot_ic_15",
       "[爱心]":"emot_ic_16",
       "[祝福]":"emot_ic_17",
       "[元宝]":"emot_ic_18",
       "[广播]":"emot_ic_19",
       "[沙漏]":"emot_ic_20",
       "[太阳]":"emot_ic_21",
       "[月亮]":"emot_ic_22",
       "[强]":"emot_ic_23",
       "[抱拳]":"emot_ic_24",
       "[OK]":"emot_ic_25"
   }

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)摄像头的预览视图添加到指定窗口的名字
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔类型
  • 描述:(可选项)摄像头的预览视图是否随所属 window 或 frame 滚动
  • 默认:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',  //字符串类型;回调的事件类型,
                        //取值范围:
                        //show:模块打开成功并显示在屏幕上
                        //send:用户点击发送按钮
    msg: ''             //字符串类型;当 eventType 为 send 时,此参数返回输入框的内容,否则无返回值
}

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.open({
rect:{
   x: 0,
   y: 300,
   w: 220,
   h: 30
},
chatBox:{
   placeholder: '说点什么吧',
   maxRows: 6
},
styles:{
   normalColor: '#D3D3D3'
},
tools:{
   image: {
      normal: 'widget://res/icon_comment_photo.png',
      selected: 'widget://res/icon_comment_photo.png'
   },
   at: {
      normal: 'widget://res/icon_comment_add_new.png',
      selected: 'widget://res/icon_comment_add_new.png'
   },
   face: {
      normal: 'widget://res/icon_emoji_smile.png',
      selected: 'widget://res/icon_emoji_smile.png'
   },
},
emotion:'widget://res/emotion/basic'

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

faceListener

表情面板上附件按钮点击事件的监听,仅当 open 接口内 tools->face 参数有值时,本接口有效

faceListener(callback(ret, err))

callback(ret)

ret:

  • 类型:JSON 对象
  • 描述:所监听到的事件
  • 内部字段:
{
     text:'[么么哒]'            //字符串类型;用户所点击的表情的 text 内容,‘del’为触发删除:’del‘仅android支持
}

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.faceListener(function(ret) {
   api.alert({msg:JSON.stringify(ret)});
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

imageListener

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

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 描述:所监听到的事件
  • 内部字段:
{
    type:'',       //字符串类型;(仅android支持)
                            ‘click’:相册按钮被点击
     image:''     //数组类型;用户选择的图片绝对路径(iOS平台上会把所选择系统相册内图片拷贝到app沙箱缓冲目录下)(仅iOS支持)
}

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.imageListener(function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

atListener

@相关功能事件的监听,仅当 open 接口内 tools->at 参数有值时,本接口有效

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

callback(ret)

ret:

  • 类型:JSON 对象
  • 描述:所监听到的事件
  • 内部字段:
{

     status:true     //布尔类型,用户点击了@按钮
}

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.atListener(function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭聊天输入框

close()

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘(仅iOS支持)

popupKeyboard()

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.popupKeyboard();

可用性

iOS系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘(仅iOS支持)

closeKeyboard()

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.closeKeyboard();

可用性

iOS系统

可提供的1.0.0及更高版本

value

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

value({params}, callback(ret))

params

msg:

  • 类型:字符串
  • 描述:(可选项)聊天输入框的内容,若不传则返回输入框的值

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    msg: ''              //字符串类型;输入框当前内容文本
}

示例代码

var cxChatbox = api.require('cxChatbox');
//设置输入框的值
cxChatbox.value({
    msg: '设置输入框的值'
});

//获取输入框的值
cxChatbox.value(function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

insertValue

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

insertValue({params})

params

index:

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

msg:

  • 类型:字符串
  • 描述:(可选项)要插入的内容
  • 默认值:''

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.insertValue({
    index: 10,
    msg: '这里是插入的字符串'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

clearText

清空输入框文本

clearText()

示例代码

var cxChatbox = api.require('cxChatbox');
cxChatbox.clearText();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本