UIChatUnit

来自于:开发者立即使用

概述

UIChatUnit 模块是一个聊天输入框模块,开发者可自定义该输入框的功能。通过 open 接口可在当前 window 底部打开一个输入框,该输入框的生命属于当前 window 所有。当输入框获取焦点后,会自动弹动到软键盘之上。开发者可通过监听输入框距离底部弹动的高度,来改变聊天对话界面的高度。

本模块的主要功能有:

1,自定义表情集:open 接口的 emotionPath 参数

2,自定义输入框最大自适应高度:open 接口的 maxRows 参数

3,输入框占位提示文字:open 接口的 placeholder 参数

4,自定义是否显示附件功能按钮:

5,自定义显示录音按钮:

6,手动弹出、关闭软键盘功能

7,输入框插入、获取当前文本

8,动态刷新附加功能面板

功能详情参考接口参数。

模块接口

open

打开聊天输入框

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

params

chatBox:

  • 类型:JSON 对象
  • 描述:(可选项)聊天输入框配置
  • 内部字段:
{
    placeholder: '',       //(可选项)字符串类型;占位提示文本,不传则无占位符
    autoFocus: false,      //(可选项)布尔类型;是否在打开时自动获取焦点,并弹出键盘;默认:false
    maxRows: 6,            //(可选项)数字类型;显示的最大行数(高度自适应),超过最大行数则可上下滚动查看;默认:6
    placeholderColor:'',   //(可选项)字符串类型;占位提示文本颜色;默认:灰色
    textColor:'',          //(可选项)输入框文本颜色;默认:黑色
    inputBgColor:''        //(可选项)输入框背景颜色;默认:#FFF5F5F5
}

styles:

  • 类型:JSON 对象
  • 描述:(可选项)聊天输入框样式配置
  • 内部字段:
{
    topDivider:{          //(可选项)顶部分割线配置
    width:3,          //(可选项)顶部分割线的粗细,默认:3
        color:'#000'      //(可选项)顶部分割线的颜色;默认:黑色,支持图片设置(fs:// & widget://)
    },
    bgColor: '#D1D1D1',   //(可选项)字符串类型;模块背景色配置,支持rgb、rgba、#;默认:#D1D1D1
    margin: 10,           //(可选项)数字类型;输入框左右边距;默认:10
    topMargin:5,          //(可选项)数字类型;输入框距离顶部的边距;默认:5
    mask: {               //(可选项)JOSN 对象;聊天框以外区域的遮罩层配置,若不传则无遮罩层
       bgColor:'rgba(0,0,0,0.5)',//(可选项)字符串类型;遮罩层背景色配置,支持rgb、rgba、#;默认:rgba(0,0,0,0.5)
    },
    inputBorder:{                  //(可选项)输入框边框设置              
         color:'#FFF5F5F5',        //(可选项)输入框边框颜色;默认:#FFF5F5F5
         width:1,                  //(可选项)输入框边框粗细;默认:1
         radius:3                  //(可选项)输入框边框圆角大小;默认:3
    },
    record:{              //(可选项)录音页面设置
      btnSize: 120,       //(可选项)录音按钮大小设置;默认:120
      tipsColor:'#FFB0B0B0', //(可选项)录音提示文字颜色;默认:#FFB0B0B0
      tipsSize:20            //(可选项)录音提示文字大小:默认:20
    },
    faceBtn:{            //(可选项)输入框右侧表情按钮配置
      btnSize:24,        //(可选项)数字类型;按钮大小,默认:24  
      selectedImg:'widget://image/keyboard.png',//(可选项)字符串类型;表情面板打开后按钮图片设置
      normalImg:'widget://image/face.png'       //(可选项)字符串类型;表情面板关闭后图片设置
    }           
}

giftConfig:

  • 类型:JSON 对象
  • 描述:(可选项)礼物页面配置
  • 内部字段:
{
    isGroupChat: false,  //(可选项)布尔类型;是否是群聊,默认:false,如果是群聊,点击礼物按钮显示(“选择收礼人”)
    avaterIconPath:'fs://avaterIcon.jpg',//布尔类型;送礼人的头像 ***该参数只有在isGroupChat为false时有效***
    nickText:'送给【昵称】' //布尔类型;收礼人的昵称 ***该参数只有在isGroupChat为false时有效***
}

tools:

  • 类型:JSON 数组
  • 描述:聊天输入框下工具栏配置
  • 内部字段:
[{
    icon: '',  //字符串类型;常态下的图标,要求本地路径(fs://、widget://)
    title:'录音',
}]

emotionPath:

  • 类型:字符串
  • 描述:自定义表情文件夹(表情图片所在的文件夹,须同时包含一个与该文件夹同名的.json配置文件)的路径(本地路径,fs://、widget://)。.json文件内的 name 值必须与表情文件夹内表情图片名对应。另附:表情文件夹资源示例
  • .json配置文件格式如下:
[
   {"name": "Expression_11","text": "[尴尬]"},
    {"name": "Expression_12","text": "[发怒]"},
    {"name": "Expression_13","text": "[调皮]"},
    {"name": "Expression_14","text": "[呲牙]"},
    {"name": "Expression_15","text": "[惊讶]"},
    {"name": "Expression_16","text": "[难过]"},
    {"name": "Expression_17","text": "[酷]"},
    {"name": "Expression_18","text": "[冷汗]"},
    {"name": "Expression_19","text": "[抓狂]"},
    {"name": "Expression_20","text": "[吐]"}
]

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',  //字符串类型;回调的事件类型,
                        //取值范围:
                        //show:模块打开成功并显示在屏幕上
                        //send:用户点击表情面板、键盘面板(在android 平台上表示输入框右边发送按钮)发送按钮
    msg: ''             //字符串类型;当 eventType 为 send 时,此参数返回输入框的内容,否则无返回值
    index: 0           // 数字类型;点击工具栏按钮回调
}

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.open({
    chatBox: {
        placeholder: '聊天内容',     
        autoFocus: false,  
        maxRows: 6     
    },
    styles: {
        bgColor: '#D1D1D1',   
        margin: 10,           
        mask: {               
           bgColor:'rgba(0,0,0,0.5)'
        }             
    },
    tools: {
        h: 44,          
        iconSize: 30, 
          toolsArray:
          [{normal: '',  
       selected: '' 
       title:'录音',
       },{
       normal: '',
       selected: '',
       title:'视频',
       }]  
    },
    emotions:['widget://res/emotions/basic','widget://res/emotions/append1','widget://res/emotions/append2']
}, function(ret) {
    if (ret) {
        api.alert({msg:JSON.stringify(ret)});
    } 
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

recordPanelListener

录音面板监听

recordPanelListener(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    state:'press'       //字符串类型;录音按钮的状态
}
  • state取值范围:
    • press 按下
    • release 抬起
    • cancel 取消
    • shortTime 按下时间不超过1秒时回调

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

giftsToolListener

点击选择收礼人监听 注意:仅在isGroupChat为true的情况下有效

giftsToolListener(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType:'chooseUser'       //字符串类型;点击选的收礼人触发 (只有在isGroupChat为true的情况下有效)
}

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setGiftDatas

设置礼物数据

setGiftDatas({params}, callback(ret))

params

styles:

  • 类型:JSON 对象
  • 描述:(可选项)附加功能面板按钮样式配置
  • 内部字段:
{
    row: 2,            //(可选项)数字类型;每页显示按钮行数;默认:2
    column: 4,         //(可选项)数字类型;每页显示按钮的列数;默认:4
    iconSize: 30,      //(可选项)数字类型;按钮图标大小;默认:30
    giftNameSize: 13,     //(可选项)数字类型;按钮下标题文字大小;默认:13
    giftNameColor: '',     //(可选项)字符串类型;按钮下标题文字颜色;默认:#000
    priceSize:10,          //(可选项)字符串类型;价格文字大小;默认:10
    priceColor:''          //(可选项)字符串类型;价格颜色;默认:#eee
}

buttons:

  • 类型:数组
  • 描述:附加功能面板按钮信息集合,可分页显示
  • 内部字段:
[{
    normal: '',       //字符串类型;按钮常态下的背景图标路径,要求本地路径(fs、widget)
    highlight: '',    //字符串类型;按钮被点击时高亮状态的背景图标路径,要求本地路径(fs、widget)
    giftName: '',     //字符串类型;按钮下边的礼物名称
    price:''          //字符串类型;礼物价格标签文本
}]

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
     index: 0     //数字类型;用户点击按钮的索引(从零开始)
}

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.setGiftDatas({
    styles: {
        row: 2,         
        column: 4,         
        iconSize: 30,      
        titleSize: 13,   
        titleColor: ''     
    },
    buttons: [
       {
            normal: 'fs://UIChatField/append1.png',       
            highlight: 'fs://UIChatField/append11.png',    
            title: '电话'       
       },{
            normal: 'fs://UIChatField/append2.png',       
            highlight: 'fs://UIChatField/append21.png',    
            title: '收藏' 
       },{
            normal: 'fs://UIChatField/append3.png',       
            highlight: 'fs://UIChatField/append31.png',    
            title: '发红包' 
       },{
            normal: 'fs://UIChatField/append2.png',       
            highlight: 'fs://UIChatField/append21.png',    
            title: '收藏' 
       },{
            normal: 'fs://UIChatField/append3.png',       
            highlight: 'fs://UIChatField/append31.png',    
            title: '发红包' 
       },{
            normal: 'fs://UIChatField/append2.png',       
            highlight: 'fs://UIChatField/append21.png',    
            title: '收藏' 
       },{
            normal: 'fs://UIChatField/append3.png',       
            highlight: 'fs://UIChatField/append31.png',    
            title: '发红包' 
       },{
            normal: 'fs://UIChatField/append2.png',       
            highlight: 'fs://UIChatField/append21.png',    
            title: '收藏' 
       },{
            normal: 'fs://UIChatField/append3.png',       
            highlight: 'fs://UIChatField/append31.png',    
            title: '发红包' 
       },{
            normal: 'fs://UIChatField/append2.png',       
            highlight: 'fs://UIChatField/append21.png',    
            title: '收藏' 
       },{
            normal: 'fs://UIChatField/append3.png',       
            highlight: 'fs://UIChatField/append31.png',    
            title: '发红包' 
       },{
            normal: 'fs://UIChatField/append2.png',       
            highlight: 'fs://UIChatField/append21.png',    
            title: '收藏' 
       }
    ]
}, function(ret) {
   api.alert({msg:'点击了第'+ret.index+'个按钮'});
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

updateGiftInfo

更新礼物信息(在群聊情况下选择群成员返回后可使用该方法更新头像及昵称)

updateGiftInfo({params})

params

avaterPath:

  • 类型:字符串
  • 描述:(可选项)送礼人的头像(支持 widget:// & fs://)

nickText:

  • 类型:字符串
  • 描述:(可选项)收礼人的昵称

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.updateGiftInfo({
    avaterPath:'widget://avater.png',
    nickText:'送给【昵称】'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭聊天输入框

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘

popupKeyboard()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘

closeKeyboard()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hideRecordPanel

收起录音面板

hideRecordPanel()

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.hideRecordPanel();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

value

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

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

params

msg:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true,        //布尔型;true||false
    msg: ''              //字符串类型;输入框当前内容文本
}

示例代码

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

//获取输入框的值
UIChatUnit.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 UIChatUnit = api.require('UIChatUnit');
UIChatUnit.insertValue({
    index: 10,
    msg: '这里是插入的字符串'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

chatBoxListener

添加输入框相关事件的监听

chatBoxListener({params}, callback(ret))

params

name:

  • 类型:字符串
  • 描述:监听的事件类型
  • 取值范围:
    • move:输入框弹动事件
    • change:输入框高度改变事件
    • valueChanged:输入框内容改变事件
    • At:@事件 注意:@功能是通过匹配 @\w+\s,所以务必在@XX后加一个空格

callback(ret)

ret:

  • 类型:JSON 对象
  • 描述:监听事件返回目标值,注意:模块分为三分部分:1,输入框(chatBox)及其所占区域;2,工具栏(tools);3,键盘(及表情面包、附件功能面板、录音面板、图片选择面板)所占区域
  • 内部字段:
{
    chatBoxHeight: 60,     //数字类型;输入框所占区域的高度,仅当监听 move 和 change 事件时本参数有值
    panelHeight: 300 ,     //数字类型;工具栏下边缘距离屏幕底部(键盘及表情面板、附件功能面板、录音面板、图片选择面板所占区域)的高度,仅当监听 move 和 change 事件时本参数有值
    value: '',              //字符串类型;输入框当前内容,仅当 name 为 valueChanged 时有值
    removedString:'@XXX'    //字符串类型;删除@user时返回;仅当name为 At且触发删除事件时回调
    index:0 //数字类型;删除@XXX的索引;仅当name为 At且触发删除事件时回调
}

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.chatBoxListener({
        name:'move'
}, function(ret){
    alert(JSON.stringify(ret));
});            
UIChatUnit.chatBoxListener({
           name:'change'
}, function(ret){
    alert(JSON.stringify(ret));
});
UIChatUnit.chatBoxListener({
           name:'valueChanged'
}, function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPlaceholder

重设聊天输入框的占位提示文本

setPlaceholder({params})

params

placeholder:

  • 类型:字符串
  • 描述:(可选项)占位提示文本,若不传或传空则表示清空占位提示内容

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.setPlaceholder({
    placeholder: '修改了占位提示内容'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

clearText

清空输入框文本

clearText()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reset

重置模块

reset()

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.reset();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

showGiftPanel

显示礼物面板

showGiftPanel()

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.showGiftPanel();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

showRecordPanel

显示录音面板

showRecordPanel()

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.showRecordPanel();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getCurrentVisiblePanel

获取当前可见的panel

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  • 取值范围:
    • record 录音面板
    • gift 礼物面板
    • emotion 表情面板
    • none 没有显示的面板
{
    panelName: "emotion",        //字符串;录音面板
}

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.getCurrentVisiblePanel(function(ret){
    if(ret.panelName == 'none'){
        // do something
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setEnableAllBtns

设置所有按钮可用/不可用

Params

enable:

  • 类型:布尔类型
  • 描述:可用性

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
   status: true        //布尔类型; 设置是否成功
}

示例代码

var UIChatUnit = api.require('UIChatUnit');
UIChatUnit.setEnableAllBtns({
    enable: false
}, function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本