最近在自己的小程序中做了一個智能客服,API使用的是云廠商的API,然后聊天頁面...嗯,找了一下關于UniApp(vite/ts)版本的好像不多,有一個官方的但其中的其他代碼太多了,去看懂再刪除那些對我無用的代碼不如自己手擼一個,先看效果:
好,下面開始介紹如何一步一步實現
(資料圖片僅供參考)
可以發現一般的氣泡是有個“小箭頭”,一般是指向用戶的頭像,所以這里我們的初步思路就是通過before
與after
偽類來放置這個小三角形,這個小三角形通過隱藏border的其余三邊來實現。
然后其中一個細節就是聊天氣泡的最大寬度不超過對方的頭像,超過就換行。這個簡單,設置一個max-width: cacl(100vw - XX)
就可以了
考慮到用戶可能輸入多行文字,這里使用的是標簽,點開微信發個消息試試,發現它是自適應的,這里去調研了解了一下,發現小程序自帶組件有這個實現,好,那直接用:
然后我們繼續注意到發送按鈕與輸入框的底線保持水平,這個flex
里有對應屬性可以實現,跳過...
當聊天消息較多時,我們發現我們繼續輸入消息,頁面并沒有更新(滾動)。打開微信聊天框一看,當消息過多時,你發一條消息,頁面就自動滾動到了最新的消息,這又是怎實現的呢?
繼續調研,發現小程序自帶的
標簽中有個屬性scroll-into-view
可以自動跳轉:
略
簡單分析下來好像一點都不難,如下是我的文件列表,話不多說,開始擼代碼!
chat├─ chat.vue├─ leftBubble.vue└─ rightBubble.vue
左氣泡模塊就是剛剛分析的那一部分,然后增加一點點細節,如下:
<script setup lang="ts">import { userDefaultData } from "@/const";interface propsI {message: string;avatarUrl: string;}const props = withDefaults(defineProps {{ props.message }} (), {avatarUrl: userDefaultData.avatarUrl,});</script>
右氣泡模塊我們需要將三角形放在右邊,這個好實現。然后這整個氣泡我們需要讓它處于水平居右,所以這里我使用了:
display: flex;direction: rtl;
這個屬性,但使用的過程中發現氣泡中的內容(符號與文字)會出現翻轉,“遇事不決,再加一層”,所以我們在內容節點外再套一層:
{{ props.message }}
然后繼續增加一點點細節:
<script setup lang="ts">import { userDefaultData } from "@/const";interface propsI {message: string;avatarUrl: string;}const props = withDefaults(defineProps {{ props.message }} (), {avatarUrl: userDefaultData.avatarUrl,});</script>
沒啥說的,需要注意的是:Button
記得防抖
發送
1)考慮如何存儲消息
這里僅考慮內存中如何存儲,不考慮本地存儲,后續思考中會聊到。
export interface messagesI { left: boolean; text: string; time: number;}
如上是消息列表中的一項,為了區分是渲染到左氣泡還是右氣泡,這里用left
來區分了一下;
const messages: Ref= ref([]);
2)如何推薦消息
這邊我封裝的服務端接口是這樣的:
mutation chat{ customerChat(talk: "你好啊"){ knowledge text recommend }}
recommend
是用戶可能輸入了錯誤的消息,這里是預測用戶的輸入字符串,所以我們需要在得到這個字符串后直接顯示,然后用戶可以一鍵通過這條消息回復:
function submit(){// 略...const finalMsg = receive?.knowledge || receive?.text || "你是否想問: " + receive?.recommend;// 略...if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}
如上,得益于Vue框架,這里實現起來也非常簡單,當用戶提交之后,如果有推薦的消息,就直接修改input.value
從而修改輸入框的文字;如果沒有就直接清空方便下一次輸入。
接下來繼續增加一點點細節(chat.vue
文件)
<script setup lang="ts">import { ref, type Ref } from "vue";import leftBubble from "./leftBubble.vue";import rightBubble from "./rightBubble.vue";import type { messagesI } from "./chat.interface";import { chatGQL } from "@/graphql/me.graphql";import { useMutation } from "villus";import { logoUrl } from "@/const";import { useMeStore } from "@/stores/me.store";const meStore = useMeStore();const messages: Ref 發送 = ref([]);const input = ref("");async function submit() {if (input.value === "") return;messages.value.push({left: true,text: input.value,time: new Date().getTime(),});const { execute } = useMutation(chatGQL);const { error, data } = await execute({ talk: input.value })if (error) {uni.showToast({title: `加載錯誤`,icon: "error",duration: 3000,});throw new Error(`加載錯誤: ${error}`);}const receive = data?.customerChat;const finalMsg = receive?.knowledge || receive?.text || "你是否想問: " + receive?.recommend;messages.value.push({left: false,text: finalMsg,time: new Date().getTime(),});if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}</script>
如何保存到本地,然后每次加載最新消息,然后向上滾動進行懶加載?
我這里沒有實現該功能,畢竟只是一個客服,前端沒必要保存消息記錄到本地如Localstorage。
這里拋磚引玉,想到了一個最基礎的數據結構--鏈表,用Localstorage-key/value的形式來實現消息隊列在本地的多段存儲:
當然,有效性有待驗證,這里僅僅屬于一些想法
然后,我擼了小半天的頁面,準備給朋友看看來著,他告訴我微信小程序自帶一個客服系統,只需要讓button
的open-type
屬性等于contract
;