更新记录

1.2.0（2024-09-27） 下载此版本

最新一版

1.1.9（2024-07-20） 下载此版本

优化加载下一页，页面卡顿问题

1.1.8（2024-07-17） 下载此版本

优化发送消息

平台兼容性

core-kf

介绍

此 corekf 是 vue2 版本的针对任何系统，都可以无缝对接的客服系统，

1，可发送图片，文字，表情，商品，订单

2，可接收评价，提交评价，完成已读，未读功能

3，插件接收域名， 颜色，是否自定义提示框等

4，返回任意页面，只要接受到消息，可在任意页面提示（可自定义）

来测试体验吧

官网链接http://kf.coreshop.cn/

后台链接http://kf.admin.corecms.cn/login

账号：admin 密码：admin

小程序码

下载

可与插件市场搜索 core-kf 点击下载插件并导入 HBuilderX

确定之后项目的 uni_modules 就有了这个插件

使用

我们使用 pages.json 里面的 easycom 去配置 core-kf ，传统 vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步 具体可参考easycom 介绍

"easycom": {
    "core-kf": "@/uni_modules/core-kf/components/core-kf/core-kf.vue"
},

需要设置全局以便后面用户使用我们暴露的全局方法，获取用户数据，商品，订单等。

import {corekfGlobalState} from "@/uni_modules/core-kf/components/core-kf/utils/corekfGlobalState";
Vue.prototype.$corekfGlobalState = corekfGlobalState;

然后我们在页面新建一个页面去承载这个插件，例如 chat（名字可以随便起，路径后面是需要传进去的）

{
    "path": "pages/chat/index",
    "style": { 
        "navigationBarTitleText": "客服", 
        "disableScroll": true, // 禁止页面滑动
        "app-plus":{ // 配置app，具体参考文档
            "softinputMode": "adjustResize" 
        }
    }
}

<template>
    <core-kf
        domain="https://kf.api.corecms.cn"
        uploadApi=""
        token="110"
        chatPagePath="/pages/chat/index"
        corekfBgColor="#09a0f7"
        :outUrl="outUrl"
        :isEnterPage="isEnterPage"
        customAcceptMessageEventName="hanldeShowToast"
        @onMessageClick="onMessageClick"></core-kf>
</template>

<script>
    /**
    * domain
    * 域名：用来链接webSocket 还有一些接口，例发送消息等
    *
    * uploadApi
    * 上传接口：如上传图片
    *
    * token
    * 接口请求时，需要带的
    *
    * chatPagePath
    * 聊天页面路径，如果用户不在聊天页面，客服发送了消息，我们会弹框提示用户，用户可点击查看下消息返回
    *
    * corekfBgColor
    * 颜色作用于用户聊天的字体框背景，表情下方的退格删除和发送的背景颜色
    *
    * outUrl
    * 引用数据的来源地址 例如商品/订单 它们的出口即-页面路径
    * outUrl {  作用于商品或者订单等
    *   "outUrl":"跳转的路径",
    *   "channel":"跳转路径的平台",
    *   "messageChannel":所在的平台
    * }
    *
    * isEnterPage
    * 进入页面，离开页面
    *
    * customAcceptMessageEventName
    * 自定义弹框事件名字，当用户不在聊天页面，没有传这个字段，则用插件里面的弹框提示用户，反之需要用户自定义弹框，
    *
    * onMessageClick
    * 聊天页面中用户点击事件，例如点击商品/订单
    */
export default {
    data() {
        return {
            isEnterPage: true,
            outUrl: {
                outUrl: "",
                channel: 0,
                messageChannel: 0,
            }
        };
    },
    onShow() {
        this.isEnterPage = true;
    },
    onHide() {
        this.isEnterPage = false;
    },
    onLoad(options) {
        if (options.outUrl) {
            this.outUrl.outUrl = decodeURIComponent(options.outUrl);
            this.outUrl.channel = options.channel;
            this.outUrl.messageChannel = options.messageChannel;
        }
        //自定义弹框事件
        uni.$on('hanldeShowToast', function (message) {
            // message为客服发送的消息
        })
    },
    methods: {
        // 聊天页面中用户点击事件，例如点击商品/订单
        onMessageClick(data) {
            // data 是被点击的数据，可以在这里操作跳转还是其它逻辑
        }
    }
};
</script>

修改发布插件

鼠标放入插件上右击，然后点击图中的发布到插件市场，然后按照要求，填写版本号，更新日志等，提交即可