tgo-widget-miniprogram

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 字段读取此目录。