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:'',          //（可选项）输入框文本颜色；默认：黑色
    textSize:12,           //（可选项）输入框文字的大小 **仅支持安卓**
    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'       //(可选项)字符串类型；表情面板关闭后图片设置
    },
    sendBtn:{            // （可选项）发送按钮设置
    w: 40,           // （可选项）按钮的宽度，默认：40
    h: 30,           // （可选项）按钮的高度，默认：30
    corner:5,        // （可选项）按钮圆角大小，默认：0
    titleSize:12,    // （可选项）按钮标题的大小，默认：12
    titleColor:'#000',  // （可选项）按钮标题的颜色，默认：#000
    bg:'#f5f5f5'      // （可选项）按钮背景颜色，默认：#f5f5f5
    }
}

extrasBtnVisible:

类型：布尔类型
描述：附加按钮是否显示
默认：true

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: [{
    icon: 'widget://res/record.png',
    title:'录音'},{
    icon: 'widget://res/video.png',
    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){
    api.alert({
            msg: 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){
    api.alert({
            msg: 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) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: 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){
    api.alert({
            msg: JSON.stringify(ret)
        })
});
UIChatUnit.chatBoxListener({
           name:'change'
}, function(ret){
    api.alert({
            msg: JSON.stringify(ret)
        })
});
UIChatUnit.chatBoxListener({
           name:'valueChanged'
}, function(ret){
    api.alert({
            msg: 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){
    api.alert({
            msg: JSON.stringify(ret)
        })
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？请保持联络！

最后更新于 2025/09/15