starfish-chat

v1.2.13

Published

a year ago

适用于H5、web网页微信小程序的多功能客户服务组件。

Downloads

217

0High
0Medium
0Low

zxc0woool

taro customer-service weapp h5 react

Starfish Chat - 多平台客服组件

Starfish Chat是一个基于React开发的多平台客服组件，目前支持H5、Web网页和微信小程序三个平台。该组件提供了灵活的CDN引入方式。组件设计简洁易用，能够满足各类在线客服场景的需求。

功能特点

🌟 多平台支持：同时支持 H5、Web 网页和微信小程序
💬 实时消息：基于 MQTT 的实时消息收发
📎 多媒体消息：支持发送文本、图片、文件等多种类型消息
🎨 主题定制：支持自定义主题颜色和客服图标
📱 自适应布局：完美适配不同设备和屏幕尺寸

安装

npm install starfish-chat
# 或者使用 yarn
yarn add starfish-chat
# 或者使用 pnpm
pnpm add starfish-chat

使用方法

Web/H5 环境

import { StarfishChat } from "starfish-chat";
// 引入样式文件
import "starfish-chat/dist/styles/index.scss";

const App = () => {
  return (
    <StarfishChat
      show
      title="客服"
      userInfo={{
        appid: "your_app_id", // 应用id
        union_id: "user_unique_id", // 用户标识(在商户下唯一id)
        nickname: "用户昵称", // 昵称
        avatar: "https://example.com/avatar.png", // 头像 (非必填)
      }}
      themeColor="#216DF4"
      platform="web" // 可选，指定显示平台为web 、h5
      onClose={() => console.log("聊天窗口关闭")}
    />
  );
};

通过 CDN 使用

<!DOCTYPE html>
<html>
  <head>
    <title>StarfishChat Demo</title>
    <!-- 引入 React 相关依赖 -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <!-- 引入 StarfishChat -->
    <script src="https://unpkg.com/starfish-chat@latest/dist/index.umd.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/starfish-chat@latest/dist/index.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script>
      const { StarfishChat } = window.StarfishChat;

      const App = () => {
        return React.createElement(StarfishChat, {
          show: true,
          title: "客服",
          userInfo: {
            appid: "your_app_id",
            union_id: "user_unique_id",
            nickname: "用户昵称",
            avatar: "https://example.com/avatar.png",
          },
          themeColor: "#216DF4",
          platform: "web", // 可选，指定显示平台为web
          onClose: () => console.log("聊天窗口关闭"),
        });
      };

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(React.createElement(App));
    </script>
  </body>
</html>

组件属性

| 属性名 | 类型 | 说明 | 是否必填 | 默认值 | | ----------- | ---------------------------------------------------------------------- | ------------------------ | -------- | --------- | | userInfo | { appid: string; union_id: string; nickname: string; avatar?: string } | 用户信息配置 | 是 | - | | show | boolean | 控制聊天组件的显示和隐藏 | 是 | false | | title | string | 聊天窗口标题 | 否 | '客服' | | themeColor | string | 主题颜色 | 否 | '#216DF4' | | serviceIcon | string | 客服头像图标 | 否 | 默认图标 | | onClose | () => void | 关闭聊天窗口的回调函数 | 否 | - | | platform | "h5" | "miniprogram" | "web" | "unknown" | 自定义显示平台 | 否 | 自动判断 | | serverUrl | string | 服务器地址 | 否 | - | | mqtt | { url: string } | MQTT配置 | 否 | - |

userInfo 属性说明

| 字段名 | 类型 | 说明 | 是否必填 | | -------- | ------ | ---------------------- | -------- | | appid | string | 应用的唯一标识 | 是 | | union_id | string | 用户在商户下的唯一标识 | 是 | | nickname | string | 用户昵称 | 是 | | avatar | string | 用户头像 URL | 否 |

开发

克隆仓库：git clone [repository-url]
安装依赖：npm install
开发模式：npm run dev
构建：npm run build

NPM 打包与发布

准备工作

确保已安装 Node.js 和 npm
登录 npm 账号：
```
npm login
```
确保 package.json 中的信息正确：
- name：包名称
- version：版本号
- description：包描述
- main：入口文件
- files：需要发布的文件列表

版本更新

根据修改的内容选择合适的版本更新命令：

# 补丁版本，修复问题
npm version patch

# 小版本，新增功能
npm version minor

# 大版本，不兼容的修改
npm version major

打包

# 打包项目
npm run build

# 确认打包文件
npm pack --dry-run

发布

# 发布到 npm
npm publish

# 发布测试版本（可选）
npm publish --tag beta

注意：首次发布包时，建议先使用 npm publish --access public 命令。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme