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

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

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