界面定制

在TIS初始化时需要填写template，我们已经提供了几个简单的模版。但是为了适应更多的场景，TIS是可以自定义界面的。
自定义模版对象需要实现如下几个函数：
onInitUI:           onInitUI,               //必须，在这个时机去初始化界面
onLoadHistory:      onLoadHistory,          //可选，加载历史消息时调用，不填则不加载
onLoadGroup:        onLoadGroup,            //加载分组完毕时调用
onLoadFaces:        onLoadFaces,            //加载表情完毕时调用
onReceiveMessage:   onReceiveMessage,       //收到消息时调用
以及如下属性：
historyPageSize:    10,                     //加载历史消息的条数
version:            1.1                     //模版的版本号，必须有，需要和tis基础库版本一致

下面按调用顺序介绍每一个函数：

onInitUI 界面初始化

//container为TIS初始化传递过来的第一个参数：TIS(".tis-container"...)
//其他函数如果出现container，也是这个参数
//options中有name和image属性
function onInitUI(container,options) {
    在这个函数中可以创建html界面代码，初始化界面，等
}

onLoadGroup 加载分组

//data是数组类型的分组数据：
[
    {
        icon: "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1734117139,1638127565&fm=58"
        id: 17
        index: 0
        name: "分组1"
        package: 0
        userId: 6225
    }
]
//groupClicked需要注册给元素的事件
function onLoadGroup(data, container, groupClicked) {
    //实例代码：
    var groups = $(container + " .tis-facegroups");
    for (var index in data) {
        var item = data[index];
        //创建分组元素，注意，需要给元素设置gid属性，并注册事件groupClicked
        var group = $('<a gid="' + item.id + '" ><img src="' + item.icon + '" /></a>');
        group.click(groupClicked);
        groups.append(group);
    }
}

onLoadFaces 加载某分组下的表情

//keys：用该keys中的项从faceMap中获取表情的具体信息
//groupId：要加载的表情所属的分组Id
//faceMap是一个关联数组，里面是表情的图片地址
function onLoadFaces(keys, faceMap, container, groupId) {
    //实例代码：
    for (var index = 0; index < keys.length; index++) {
        var item = keys[index];
        //item为表情对应的文本key
        //faceMap[item]为表情的图片地址
        //这里可以创建每一个表情了，当点击表情时，在发送文本框中追加item
    }
}

onLoadHistory 加载历史消息

//如果不需要加载历史消息可以不实现该函数
function onLoadHistory(data, container, faceMap, opts) {
    var list = data.list;
    var length = 0;
    if (list) {
        length = list.length;
    }
    for (var index = length - 1; index >= 0;--index) {
        var item = list[index];
        if (!item.content) continue;
        var msgdata;
        try {
            msgdata = JSON.parse(item.content);
            msgdata = opts.prepareMessage(msgdata); //预处理
            //在这里去添加消息，appendTisMessage是一个辅助函数，下面会介绍
            appendTisMessage(msgdata, faceMap);
        } catch (ex) {
            //一般不会有异常，但有些历史消息可能不符合消息格式。这里忽略这些消息。
        }   
    }
}

onReceiveMessage 收到消息

function onReceiveMessage(data, container, faceMap) {
    //添加消息到容器中
    appendTisMessage(data, faceMap);
}
//辅助函数
function appendTisMessage(data, faceMap) {
    //data.time 消息的时间
    //data.name 发送者名称
    //data.image 发送者头像
    //data.body //消息体
    //解析表情
    for (var item in faceMap) {
        data.body = data.body.replace(new RegExp("\\" + item, "g"), "<img src='" + faceMap[item] + "'/>");
    }
    //之后可以根据消息信息创建用于显示消息的元素了
}

参考

https://cdn.aodianyun.com/tis/ui/perty/js/tis-ui-1.1-perty.js