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