tgo-widget-miniprogram

TGO 访客聊天微信小程序组件。开发者 3 步完成接入。

快速接入

1. 安装

npm install tgo-widget-miniprogram

在微信开发者工具中点击 工具 → 构建 npm。

2. 页面配置

// pages/chat/chat.json
{
  "usingComponents": {
    "tgo-chat": "tgo-widget-miniprogram/chat/index"
  },
  "navigationBarTitleText": "在线客服"
}

3. 使用组件

<!-- pages/chat/chat.wxml -->
<tgo-chat api-key="ak_live_xxx" api-base="https://your-api.com" />

跳转到客服页

wx.navigateTo({ url: '/pages/chat/chat' })

域名白名单

在小程序管理后台配置以下域名：

| 类型 | 域名 | |------|------| | request 合法域名 | API 服务域名 | | socket 合法域名 | WuKongIM WSS 域名 | | uploadFile 合法域名 | API 服务域名 | | downloadFile 合法域名 | API 服务域名 |

组件属性

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | api-key | String | 是 | — | 平台 API Key | | api-base | String | 是 | — | API 服务地址 | | theme-color | String | 否 | #2f80ed | 主题色 | | lang | String | 否 | zh | 语言（zh/en） | | visitor-name | String | 否 | — | 访客名称 | | visitor-avatar | String | 否 | — | 访客头像 URL | | custom-attrs | Object | 否 | — | 自定义访客属性 |

功能支持

• 文本消息收发
• AI 流式回复（实时逐字显示）
• 图片消息发送与预览
• 历史消息加载（上拉加载更多）
• 系统消息展示（客服接入/转接/结束）
• Markdown 渲染（加粗、斜体、链接、列表、代码块）
• 多语言支持（中文/英文）
• IM 断线自动重连

开发

# 构建 miniprogram_dist
npm run build

构建产物位于 miniprogram_dist/，微信开发者工具通过 package.json 的 miniprogram 字段读取此目录。