组件门面/挂载入口(IMKitFacade)
组件门面/挂载入口:IMKitFacade 是 IDL 定义的跨端 UI 组件,props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 Web 端绑定/示例。
契约属性(props)
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
options | {container:any, appkey:string, serverUrl?:string, locale?:string, theme?:Theme, renderers?:map<string,function>} | 是 | 显示选项(置顶 / 未读 / 草稿 / @ 提及):{ container:any, appkey:string, serverUrl?:string, locale?:string, theme?:Theme, renderers?:map<string,function> } |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
ready | — | 宿主回调(参数见 IDL 事件定义) |
error | err | 宿主回调(参数见 IDL 事件定义) |
渲染行为
- mount/update/destroy 生命周期幂等;同一容器重复 mount 复用实例;组件销毁释放监听
数据源
未在 IDL 声明 dataSource;由宿主从 IMLib 拉取(getConversationList / getHistoryMessages / MESSAGES / CONVERSATION 事件)。
依赖边界
组件不直连网络与数据库:会话/消息由宿主从 IMLib 拉取后传入,组件只做排序、角标、格式化与渲染。
平台绑定
| 项 | 值 |
|---|---|
| 公开符号 / 签名 | IMKit.mount(container, 'IMKit', props) |
| 导出列表包含 | 是 |
| UI 框架 | 纯 DOM 组件(无框架依赖),CSS 变量主题,IMKit.mount(container, component, props) |
使用示例
JavaScript (ESM)
import { IMKit } from '@ni-paas/im-web/imkit';
IMKit.setup({ container: document.getElementById('app'), locale: 'zh-CN' });
const view = IMKit.mount('ChatView', {
conversationType: 1,
targetId: 'user2',
messages,
});
view.update({ messages: nextMessages });
view.destroy();