Electron IMKit 初始化

IMKit 不单独建立连接：先初始化 IMLib 客户端并 connect，再初始化 IMKit 门面。门面持有主题、语言、自定义渲染器与组件实例。

初始化顺序​

步骤动作说明
1IMLib 初始化init(options)：appkey / serverUrl（幂等）
2IMLib 连接connect(token)：成功后触发 CONNECTED
3IMKit 门面初始化静态 init 或构造门面：注入客户端、主题、locale、renderers
4挂载组件mount(container, component, props) / Widget / Fragment

门面与挂载 API​

项值
门面IMKit
挂载IMKit.mount(container, component, props) → {update(props), destroy()}
导出组件IMKit、ConversationListView、ChatView、MessageBubble、MessageInput、Avatar、UnreadBadge、TimeSeparator、MessageStatusIndicator、Theme、IMLocalStore
UI 框架React（可换 Vue；组件不直连网络/DB）

初始化示例​

JavaScript / TypeScript
// 主进程已完成 IMLib 初始化与 preload 桥接；renderer 只做挂载
import { IMKit } from '@ni-paas-im/electron';

const handle = IMKit.mount(document.getElementById('app'), 'ConversationListView', {
  conversations: await window.im.getConversationList(),
  theme: { mode: 'light', colors: { primary: '#4f46e5' } },
});

幂等与生命周期​

  • 门面挂载幂等：同一容器重复 mount 复用实例（Web / Electron / Harmony 绑定显式声明）；Android init 重复调用复用同一 appkey 的 IMLib 客户端。
  • 组件销毁时释放监听与定时器（输入区 typing 定时器、事件监听），避免内存泄漏与重复回调。
  • 主题可在初始化后动态更新：调用门面 setup/update 或重新挂载；不需要重建 IMLib 客户端。
  • destroy() 只销毁组件实例，不断开 IMLib 连接；IMLib 的 disconnect 由宿主控制。

相关文档​