1.0.26 • Published 7 years ago
im-sdk v1.0.26
im-sdk 一个轻量级的前端消息展示框架
im-sdk是一个基于React+Mobx的聊天消息显示框架,主要组成部分为消息展示列表。
界面预览
快速开始
<!-- 页面上声明一个容器用于Mount组件 -->
<div class="root"></div>
import React from 'react';
import ImSdk from 'im-sdk';
import Product from './components/product';
// 获取sdk实例
const sdk = new ImSdk();
// 将实例渲染到root标签上,然后获取bot实例
const bot = sdk.render('#root');
bot.text('您好,我是Jimi智能机器人', 'robot').new().then(()=> {
return bot.text('有什么我能帮助您的吗?', 'robot').new();
}).then(()=> {
return bot.text('我想查询一下我的订单到哪里了', 'human').new();
}).then(()=> {
return bot.component(Product, {}).new();
}).then(()=> {
return bot.text('是这个商品吗?','robot').new();
}).then(()=> {
return bot.text('是的','human').new();
}).then(()=> {
return bot.text('当前商品正在配送中,预计下午两点中送达,请耐心等待!如有需要,可直接联系配送员,配送员联系电话:13800138000', 'robot').new()
});
接口预览
sdk
函数名 | 参数 | 说明 |
---|---|---|
sdk.render(root) | string | 渲染聊天列表组件,将其挂载到参数中提供的Dom节点上 |
sdk.mountEditor(editor) | React Component | 添加聊天编辑框,聊天编辑框位于聊天列表下方 |
sdk.mountHeader(header) | React Component | 添加当天对话者信息,该组件位于消息列表的上方 |
sdk.registerScrollEvent(fn) | function | 添加下拉刷新时的回调函数,当列表到达顶部后继续下拉,则触发回调函数 |
bot
函数名 | 参数 | 说明 |
---|---|---|
bot.text(content, target) | (string, string) | 往消息列表中添加文本消息 |
bot.image(url, target) | (string, string) | 往消息列表中添加图片消息 |
bot.component(com,data) | (Component, Object) | 再消息列表中渲染一个自定义组件消息 |
bot.system(content) | string | 渲染一条系统提示消息 |
bot.timeLine(date) | string/number/Date | 渲染一条时间消息 |
若要正确的渲染消息,还需要再以上接口的基础上调用new()或old()方法,new()表示再消息列表底部追加新消息, old()表示在消息列表的最前面插入消息,可用于添加历史消息记录。使用方式如下所示:
bot.text('Hello world', 'human').new(); // 在消息列表底部渲染一条新信息
bot.text('Hello javascript').old(); // 在消息列表顶部插入一条信息
自定义组件示例
如果我们想在消息列表中渲染一条自定义组件消息,则需要对组件消息进行定义,下面示例定义了一个商品信息组件
- 自定义组件消息定义(product.js)
import React from 'react';
class Product extends React.PureComponent {
render() {
return (
<div className="product">
<div className="product__title">{this.props.data.name}</div>
<div className="product__image" style={{backgroundImage: `url('${this.props.data.cover}')`}}/>
<div className="product__price">¥{this.props.data.price}</div>
</div>
);
}
componentDidMount() {
this.props.done(this.props.data);
}
}
export default Product;
- 渲染自定义组件消息
import Product from './product.js';
const data = {
name : '商品名称',
cover: '商品封面',
price: '商品价格'
};
bot.component(Product, data).new();
对于每个自定义组件,父组件会向其传入两个参数:
- data
- done
data为渲染组件需要用到的数据,done为组件渲染完成或用户主动操作后必须要调用的回调函数,若往done中添加一个参数,则上层的Promise或获取到返回的值。
bot.component(Product, data).then(res=> {
console.log(res); // res为调用done()方法时返回的值
})