cxChatbox

立即使用UI模块不能满足布局需求？试试APICloud3.0，用AVM灵活定制模块效果，H5编写即可实现纯原生性能

概述

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及更高版本