网络日志

如何以最快速度将Vue接入在线客服系统?

虽然 Vue 框架和作者尤雨溪本人早已是研发行业,尤其是前端开发领域人尽皆知的存在,但是本文正式开始之前,还是要做一个简单的介绍,来照顾一下不太了解的读者。

Vue 框架,是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

——摘自 Vue 官方网站

如果没有技术背景也没关系,我们来通俗地解释一下:

一般来说,项目研发分为前端和后端,如果以某个网页为例来解释,你可以简单理解为:后端研发负责“怎么让网页正常运行”,而前端研发负责“怎么让网页运行起来更好看”。

但这个时候,问题出现了:想让网页好看有无数种方案,前端研发人员不论用哪种方案,都得从零开始一点一点地搭建,费时费力。

于是类似 Vue 这样的前端框架就诞生了,它直接告诉所有前端研发人员:不用花时间想这个问题了,我给你搭好了一个框架,你只需要把你觉得好看的元素放进去就行了(即:模块化)。

这样一来,不仅提升了研发的效率,还降低了成本,一举两得,非常完美~

好了,解释完 Vue 的用途,我们就该回到今天的正题了:如何将 Vue 接入在线客服?

首先,在线客服的 JS 插件代码一般放在 index 入口页,可以参考下图:

接入成功后,呈现的效果,如下图右下角红框所示(这里用美洽官网来举例):

是不是灰常简单?

但是先别着急,因为真实环境下的需求是复杂的。

比如:如果想在某些页面隐藏咨询入口(或按钮),或者在特定的页面用特定的方式展示咨询按钮,该如何才能实现?

可以通过调用_MEIQIA('withoutBtn');方法(下图)实现隐藏入口(或按钮)吗?

事实上,这种方式实时调用是没有效果的,一旦隐藏就会将所有页面的咨询入口(或按钮)全部隐藏。

我们建议:比较好的做法是自定义按钮,在需要咨询按钮的页面调用美洽_MEIQIA('showPanel');方法打开聊天窗口。

有些技术人员按照这样的方式做了,比如:在 Vue 模板里直接调用

但是却发现:

这样的方法是无法实现的。原因是 Vue 并不支持这样直接调用,会报错。

正确的方法应该是调用 window._MEIQIA('showPanel'); 如下图所示:

这样就会在指定页面中,点击自定义按钮的情况下,弹出对话窗口,而其他页面不显示咨询入口或按钮,如下图所示:

————————————————版权声明:本文为CSDN博主「美洽技术」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/meiqia8...