記錄--Vue3+TS(uniapp)手擼一個聊天頁面

来源:https://www.cnblogs.com/smileZAZ/archive/2023/05/11/17391811.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 Vue3+TS(uniapp)手擼一個聊天頁面 前言 最近在自己的小程式中做了一個智能客服，API使用的是雲廠商的API，然後聊天頁面...嗯，找了一下關於UniApp(vite/ts)版本的好像不多，有一個官方的但其中的其他代碼太多了， ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Vue3+TS(uniapp)手擼一個聊天頁面

前言

最近在自己的小程式中做了一個智能客服，API使用的是雲廠商的API，然後聊天頁面...嗯，找了一下關於UniApp(vite/ts)版本的好像不多，有一個官方的但其中的其他代碼太多了，去看懂再刪除那些對我無用的代碼不如自己手擼一個，先看效果：

好，下麵開始介紹如何一步一步實現

重難點調研

1. 如何編寫氣泡

 可以發現一般的氣泡是有個“小箭頭”，一般是指向用戶的頭像，所以這裡我們的初步思路就是通過before與after偽類來放置這個小三角形，這個小三角形通過隱藏border的其餘三邊來實現。

然後其中一個細節就是聊天氣泡的最大寬度不超過對方的頭像，超過就換行。這個簡單，設置一個max-width: cacl(100vw - XX)就可以了

2. 如何編寫輸入框

考慮到用戶可能輸入多行文字，這裡使用的是<textarea>標簽，點開微信發個消息試試，發現它是自適應的，這裡去調研瞭解了一下，發現小程式自帶組件有這個實現，好，那直接用：

然後我們繼續註意到發送按鈕與輸入框的底線保持水平，這個flex里有對應屬性可以實現，跳過...

3.如何實現滾動條始終居於底部

當聊天消息較多時，我們發現我們繼續輸入消息，頁面並沒有更新（滾動）。打開微信聊天框一看，當消息過多時，你發一條消息，頁面就自動滾動到了最新的消息，這又是怎實現的呢？

繼續調研，發現小程式自帶的<scroll-view>標簽中有個屬性scroll-into-view可以自動跳轉：

<scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length-1}`" :scroll-with-animation="true">
	<view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time">
		<view class="msg-item">
		略
		</view>
	</view>
</scroll-view>

概述

簡單分析下來好像一點都不難，如下是我的文件列表，話不多說，開始擼代碼!

chat
├─ chat.vue
├─ leftBubble.vue
└─ rightBubble.vue

左氣泡模塊

左氣泡模塊就是剛剛分析的那一部分，然後增加一點點細節，如下：

<template>
	<view class="left-bubble-container">
		<view class="left">
			<image :src="props.avatarUrl"></image>
		</view>
		<view class="right">
			<view class="bubble">
				<text>{{ props.message }}</text>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { userDefaultData } from "@/const";

interface propsI {
	message: string;
	avatarUrl: string;
}

const props = withDefaults(defineProps<propsI>(), {
	avatarUrl: userDefaultData.avatarUrl,
});
</script>
<style lang="scss" scoped>
.left-bubble-container {
  margin: 10px 0;
	display: flex;
	.left {
		image {
			height: 50px;
			width: 50px;
			border-radius: 5px;
		}
	}
}
.bubble {
	max-width: calc(100vw - 160px);
	min-height: 25px;
	border-radius: 10px;
	background-color: #ffffff;
	position: relative;
	margin-left: 20px;
	padding: 15px;
	text {
		height: 25px;
		line-height: 25px;
	}
}
.bubble::before {
	position: absolute;
	top: 15px;
	left: -20px;
	content: "";
	width: 0;
	height: 0;
	border-right: 10px solid #ffffff;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
	border-top: 10px solid transparent;
}
</style>

右氣泡模塊

右氣泡模塊我們需要將三角形放在右邊，這個好實現。然後這整個氣泡我們需要讓它處於水平居右，所以這裡我使用了：

display: flex;
direction: rtl;

這個屬性，但使用的過程中發現氣泡中的內容(符號與文字)會出現翻轉，“遇事不決，再加一層”，所以我們在內容節點外再套一層：

<span style="direction: ltr; unicode-bidi: bidi-override">
	<text>{{ props.message }}</text>
</span>

然後繼續增加一點點細節：

<template>
	<view class="left-bubble-container">
		<view class="right">
			<image :src="props.avatarUrl"></image>
		</view>
		<view class="left">
			<view class="bubble">
				<span style="direction: ltr; unicode-bidi: bidi-override">
					<text>{{ props.message }}</text>
				</span>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { userDefaultData } from "@/const";

interface propsI {
	message: string;
	avatarUrl: string;
}

const props = withDefaults(defineProps<propsI>(), {
	avatarUrl: userDefaultData.avatarUrl,
});
</script>
<style lang="scss" scoped>
.left-bubble-container {
	display: flex;
	direction: rtl;
	margin: 10px 0;
	.right {
		image {
			height: 50px;
			width: 50px;
			border-radius: 5px;
		}
	}
}
.bubble {
	max-width: calc(100vw - 160px);
	min-height: 25px;
	border-radius: 10px;
	background-color: #ffffff;
	position: relative;
	margin-right: 20px;
	padding: 15px;
	text-align: left;
	text {
		height: 25px;
		line-height: 25px;
	}
}
.bubble::after {
	position: absolute;
	top: 15px;
	right: -20px;
	content: "";
	width: 0;
	height: 0;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #ffffff;
	border-top: 10px solid transparent;
}
</style>

輸入模塊

沒啥說的，需要註意的是：Button記得防抖

<view class="bottom-input">
	<view class="textarea-container">
		<textarea
			auto-height
			fixed="true"
			confirm-type="send"
			v-model="input"
			@confirm="submit"
		/>
	</view>
	<button
		style="
			width: 70px;
			height: 40px;
			line-height: 34px;
			margin: 0 10px;
			background-color: #ffffff;
			border: 3px solid #0256ff;
			color: #0256ff;
		"
		@click="submit"
>
		發送
	</button>

整體

1）考慮如何存儲消息

這裡僅考慮記憶體中如何存儲，不考慮本地存儲，後續思考中會聊到。

export interface messagesI {
  left: boolean;
  text: string;
  time: number;
}

如上是消息列表中的一項，為了區分是渲染到左氣泡還是右氣泡，這裡用left來區分了一下；

const messages: Ref<messagesI[]> = 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文件）

<template>
	<view class="chat-container">
		<view class="msg-container">
			<!-- https://github.com/wepyjs/wepy-wechat-demo/issues/7 -->
			<scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length-1}`" :scroll-with-animation="true">
				<view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time">
					<view class="msg-item">
						<left-bubble v-if="msg.left" :message="msg.text" :avatar-url="meStore.user?.avatarUrl"></left-bubble>
						<right-bubble v-else :message="msg.text" :avatar-url="logoUrl"></right-bubble>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-input">
			<view class="textarea-container">
				<textarea
					auto-height
					fixed="true"
					confirm-type="send"
					v-model="input"
					@confirm="submit"
				/>
			</view>
			<button
				style="
					width: 70px;
					height: 40px;
					line-height: 34px;
					margin: 0 10px;
					background-color: #ffffff;
					border: 3px solid #0256ff;
					color: #0256ff;
				"
				@click="submit"
			>
				發送
			</button>
		</view>
	</view>
</template>
<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<messagesI[]> = 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>
<style lang="scss" scoped>
.chat-container {
	.msg-container {
		padding: 20px 5px 100px 5px;
		height: calc(100vh - 120px);
		scroll-view {
			height: 100%;
		}
	}
	.bottom-input {
		display: flex;
		align-items: flex-end;
		position: fixed;
		bottom: 0px;
		background-color: #fbfbfb;
		padding: 20px;
		box-shadow: 0px -10px 30px #eeeeee;
		.textarea-container {
			background-color: #ffffff;
			padding: 10px;
			textarea {
				width: calc(100vw - 146px);
				background-color: #ffffff;
			}
		}
	}
}
</style>

思考

如何保存到本地，然後每次載入最新消息，然後向上滾動進行懶載入?

我這裡沒有實現該功能，畢竟只是一個客服，前端沒必要保存消息記錄到本地如Localstorage。

這裡拋磚引玉，想到了一個最基礎的數據結構--鏈表，用Localstorage-key/value的形式來實現消息隊列在本地的多段存儲：

當然，有效性有待驗證，這裡僅僅屬於一些想法

最後

然後，我擼了小半天的頁面，準備給朋友看看來著，他告訴我微信小程式自帶一個客服系統，只需要讓button的open-type屬性等於contract；

本文轉載於:

https://juejin.cn/post/7224059698911641658

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數據剖析更靈活、更快捷，火山引擎 DataLeap 動態探查全面升級
    更多技術交流、求職機會，歡迎關註位元組跳動數據平臺微信公眾號，回覆【1】進入官方交流群 近期，火山引擎 DataLeap 上線“動態探查”能力，為用戶提供全局數據視角、完善的抽樣策略，提高數據探查的靈活度以及響應速率。 傳統的數據探查是基於庫表的全量探查，由後端引擎執行，通過自動化檢查數據成分、關係、 ...
  • Oracle 定時任務job實際應用
    (Oracle 定時任務job實際應用) 一、Oracle定時任務簡介 Oracle定時任務是在oracle系統中一個非常重要的子系統，運用得當，可以大大提高我們系統運行和維護能力。oracle定時任務的功能，可以在指定的時間點自行執行任務。 那麼在實際工作中，什麼樣的場景會用到定時任務呢？下麵是在 ...
  • 跑步課程導入能力，助力科學訓練
    HUAWEI Health Kit為開發者提供用戶自定義的跑步課程導入介面，便於用戶在華為運動健康App和華為智能穿戴設備上查看來自生態應用的訓練課表，開啟科學、適度的運動訓練。 跑步課程導入能力支持生態應用在獲取用戶的華為帳號授權後，將跑步課程數據寫入至華為運動健康App，併在已有的華為智能穿戴設 ...
  • 京喜APP - 圖片庫優化
    京喜APP早期開發主要是快速原生化迭代替代原有H5，提高用戶體驗，在這期間也積累了不少性能問題。之後我們開始進行一些性能優化相關的工作，本文主要是介紹京喜圖片庫相關優化策略以及關於圖片相關的一些關聯知識。 ...
  • 鯨鴻動能廣告接入如何高效變現流量？
    廣告是App開發者最常用的流量變現方法之一，當App擁有一定數量用戶時，開發者就需要考慮如何進行流量變現，幫助App實現商業可持續增長。 鯨鴻動能流量變現服務是廣告服務依托華為終端強大的平臺與數據能力為開發者提供的App流量變現服務，開發者通過該服務可以在自己的App中獲取並向用戶展示精美的、高價值 ...
  • 一統天下 flutter - 插件: flutter 使用 web 原生控制項，並做數據通信
    源碼 https://github.com/webabcd/flutter_demo 作者 webabcd 一統天下 flutter - 插件: flutter 使用 web 原生控制項，並做數據通信 示例如下: lib\plugin\plugin2.dart /* * 插件 * 本例用於演示 flu ...
  • 一文讓你搞懂javascript如何實現繼承
    一、本文想給你聊的東西包含一下幾個方面：（僅限於es6之前的語法哈，因為es6裡面class這關鍵字用上了。。） 1.原型是啥？原型鏈是啥？ 2.繼承的通用概念。 3.Javascript實現繼承的方式有哪些？ 二、原型是啥？原型鏈是啥？ 1.原型是函數本身的prototype屬性。 首先js和ja ...
  • web游覽器的標簽頁仿 ios mac 蘋果的墓碑機制 (js代碼)
    背景： 本來項目開發系統防掛機功能，在其餘游覽器中均可以使用。但是呢在蘋果的safair游覽器中會出現幾率失效，最後經過排查發現是蘋果的墓碑機制導致。即：此標簽頁活躍，其他標簽頁假死。然後就導致防掛機失效了。 原理： 假如當前游覽器中有3個標簽頁分別是A,B,C，每個標簽頁都有倒計時。正常情況下，每 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類