天天看點

如何以最快速度将Vue接入客服系統?

雖然 Vue 架構和作者尤雨溪本人早已是研發行業,尤其是前端開發領域人盡皆知的存在,但是本文正式開始之前,還是要做一個簡單的介紹,來照顧一下不太了解的讀者。

Vue 架構,是一套用于建構使用者界面的漸進式架構。與其它大型架構不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與現代化的工具鍊以及各種支援類庫結合使用時,Vue 也完全能夠為複雜的單頁應用提供驅動。

——摘自 Vue 官方網站

如果沒有技術背景也沒關系,我們來通俗地解釋一下:

一般來說,項目研發分為前端和後端,如果以某個網頁為例來解釋,你可以簡單了解為:後端研發負責“怎麼讓網頁正常運作”,而前端研發負責“怎麼讓網頁運作起來更好看”。

但這個時候,問題出現了:想讓網頁好看有無數種方案,前端研發人員不論用哪種方案,都得從零開始一點一點地搭建,費時費力。

于是類似 Vue 這樣的前端架構就誕生了,它直接告訴所有前端研發人員:不用花時間想這個問題了,我給你搭好了一個架構,你隻需要把你覺得好看的元素放進去就行了(即:子產品化)。

這樣一來,不僅提升了研發的效率,還降低了成本,一舉兩得,非常完美~

好了,解釋完 Vue 的用途,我們就該回到今天的正題了:如何将 Vue 接入線上客服?

首先,線上客服的 JS 插件代碼一般放在 index 入口頁,可以參考下圖:

如何以最快速度将Vue接入客服系統?

​接入成功後,呈現的效果,如下圖右下角紅框所示(這裡用美洽官網來舉例):

如何以最快速度将Vue接入客服系統?

​是不是灰常簡單?

但是先别着急,因為真實環境下的需求是複雜的。

比如:如果想在某些頁面隐藏咨詢入口(或按鈕),或者在特定的頁面用特定的方式展示咨詢按鈕,該如何才能實作?

可以通過調用_MEIQIA('withoutBtn');方法(下圖)實作隐藏入口(或按鈕)嗎?

如何以最快速度将Vue接入客服系統?

​事實上,這種方式實時調用是沒有效果的,一旦隐藏就會将所有頁面的咨詢入口(或按鈕)全部隐藏。

我們建議:比較好的做法是​​自定義按鈕​​,在需要咨詢按鈕的頁面調用美洽_MEIQIA('showPanel');方法打開聊天視窗。

有些技術人員按照這樣的方式做了,比如:在 Vue 模闆裡直接調用 _MEIQIA('showPanel');

如何以最快速度将Vue接入客服系統?

​但是卻發現:

這樣的方法是無法實作的。原因是 Vue 并不支援這樣直接調用,會報錯。

正确的方法應該是調用 window._MEIQIA('showPanel'); 如下圖所示:

如何以最快速度将Vue接入客服系統?

​這樣就會在指定頁面中,點選自定義按鈕的情況下,彈出對話視窗,而其他頁面不顯示咨詢入口或按鈕,如下圖所示: