h5前端使用web-js在vue项目中快速接入网易七鱼客服系统

admin 报建百科 2024-04-25 199 14

七鱼快速入门开发指南： qiyukf.com/docs/guide/…

1、进入网易七鱼官网：qiyukf.com/ 点击免费试用 - 注册账号

2、进入服务中心 - 设置 - 在线接入，把以下接入代码放到vue项目中的public文件夹下的index.html文件中的body标签中（接入代码只有放在body标签中才可生效）推荐使用异步加载方式

方法一：

3、在utils文件夹下新增文件 qiyukefu.js

// 引入需要传递的用户信息的js文件
import user from "@/common/js/user.js 

export default class {
  //初始化方法
  static init() {
    window.ysf("onready", function () {
      console.log("init")
    });
  }
 
  // 配置及传参
  static config() {
    window.ysf("config", {
        uid: user.getUserId(), //必传参数
        data:JSON.stringify([
            {"key":"real_name", "value": user.getRealName()},
           {"index":0, "key":"companyCode", "label":"公司代码", "value": user.getCompanyCode()},
           {"index":1, "key":"companyAbbr", "label":"公司简称", "value": user.getCompanyAbbr()}
        ]), //data里的参数非必传，视项目需求而定
        success: function(){
                // todo 成功后的回调
        },
    });
  }
 
  //调用ysf("open")方法打开聊天窗口
  static open() {
    window.ysf("open") 
  }
}

4、将第三步的js文件引入到main.js，挂载到全局的原型链上

   import qiyukefu from './utils/qiyukefu'
   Vue.prototype.qiyukefu = qiyukefu

5、在需要触发聊天窗口的vue页面中的生命周期函数中调用初始化及配置方法

    beforeMount() {
        this.qiyukefu.init();
    },
    mounted(){
        this.qiyukefu.config();
    },
    
    methods:{
        //页面中触发聊天窗口的方法
        clickIMButtom(){
            this.qiyukefu.open()
        }
    }

暂时只有这些，如果后续测试过程中出现什么问题我再过来更正补充一下欢迎大佬指教～～～

方法2：

在需要接入七鱼客服的组件里直接调用window.ysf相关方法

3、在methods里面定义方法 judgePicture、initConfig

judgePicture(){

    window.ysf('onready', (()=>{  //准备sdk

        window.ysf('onunread', ((res)=>{  //监听未读消息

            if(res.total == 0){

                this.showImgFlag = require('@/assets/kefu.png')

            }else{

                this.showImgFlag = require('@/assets/unreaddot.png')

            }

        })

    )})

);

initConfig(){

    window.ysf("config", {

        uid: this.$user.getUserId(),

        name: this.$user.getRealName(),

        data: JSON.stringify([

            { "key": "real_name", "value": this.$user.getRealName() },

            { "index": 0, "key": "account", "label": "公司代码", "value": this.$user.getCompanyCode() },

            { "index": 5, "key": "reg_date", "label": "公司简称", "value": this.$user.getCompanyAbbr() },

            ]),

        success: function () {
        
        }

    });

},

4、在生命周期函数中准备配置文件及获取未读消息

beforeMount() {

    this.initConfig()

},

mounted() {

    //this.initConfig()

    this.judgePicture()
},

5、在组件中需要触发聊天窗口的方法直接调用window.ysf("open")

clickIM() {

    window.ysf("open") //打开聊天窗口

    window.ysf('getUnreadMsg'); //获取未读消息

},

6、在页面设置定时器监听未读消息

activated() {

    this.timerKefu = setInterval(() => {

        setTimeout(() => {

            this.judgePicture()

        }, 0)

    },100)

},

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!