这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

Vue3+TS(uniapp)手撸一个聊天页面

前言

最近在自己的小程序中做了一个智能客服，API使用的是云厂商的API，然后聊天页面...嗯，找了一下关于UniApp(vite/ts)版本的好像不多，有一个官方的但其中的其他代码太多了，去看懂再删除那些对我无用的代码不如自己手撸一个，先看效果：

好，下面开始介绍如何一步一步实现

(资料图片仅供参考)

重难点调研

1. 如何编写气泡

可以发现一般的气泡是有个“小箭头”，一般是指向用户的头像，所以这里我们的初步思路就是通过before与after伪类来放置这个小三角形，这个小三角形通过隐藏border的其余三边来实现。

然后其中一个细节就是聊天气泡的最大宽度不超过对方的头像，超过就换行。这个简单，设置一个max-width: cacl(100vw - XX)就可以了

2. 如何编写输入框

考虑到用户可能输入多行文字，这里使用的是</code>标签，点开微信发个消息试试，发现它是自适应的，这里去调研了解了一下，发现小程序自带组件有这个实现，好，那直接用：</p><p>然后我们继续注意到发送按钮与输入框的底线保持水平，这个<code>flex</code>里有对应属性可以实现，跳过...</p><h3 data-id="heading-5">3.如何实现滚动条始终居于底部</h3><p>当聊天消息较多时，我们发现我们继续输入消息，页面并没有更新（滚动）。打开微信聊天框一看，当消息过多时，你发一条消息，页面就自动滚动到了最新的消息，这又是怎实现的呢？</p><p>继续调研，发现小程序自带的<code><scroll-view></code>标签中有个属性<code>scroll-into-view</code>可以自动跳转：</p><pre class="brush:html;gutter:true;"><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></pre><h2 data-id="heading-6">概述</h2><p>简单分析下来好像一点都不难，如下是我的文件列表，话不多说，开始撸代码!</p><pre class="brush:html;gutter:true;">chat├─ chat.vue├─ leftBubble.vue└─ rightBubble.vue </pre><h2 data-id="heading-7">左气泡模块</h2><p>左气泡模块就是刚刚分析的那一部分，然后增加一点点细节，如下：</p><pre class="brush:html;gutter:true;"><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></pre><h2 data-id="heading-8">右气泡模块</h2><p>右气泡模块我们需要将三角形放在右边，这个好实现。然后这整个气泡我们需要让它处于水平居右，所以这里我使用了：</p><pre class="brush:html;gutter:true;">display: flex;direction: rtl;</pre><p>这个属性，但使用的过程中发现气泡中的内容(符号与文字)会出现翻转，“遇事不决，再加一层”，所以我们在内容节点外再套一层：</p><pre class="brush:html;gutter:true;"><span><text>{{ props.message }}</text></span></pre><p>然后继续增加一点点细节：</p><pre class="brush:html;gutter:true;"><template><view class="left-bubble-container"><view class="right"><image :src="props.avatarUrl"></image></view><view class="left"><view class="bubble"><span><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></pre><h2 data-id="heading-9">输入模块</h2><p>没啥说的，需要注意的是：<code>Button</code>记得防抖</p><pre class="brush:html;gutter:true;"><view class="bottom-input"><view class="textarea-container"><textareaauto-heightfixed="true"confirm-type="send"v-model="input"@confirm="submit"/></view><buttonstyle="width: 70px;height: 40px;line-height: 34px;margin: 0 10px;background-color: #ffffff;border: 3px solid #0256ff;color: #0256ff;"@click="submit">发送</button></pre><h2 data-id="heading-10">整体</h2><p>1）考虑如何存储消息</p><blockquote><p>这里仅考虑内存中如何存储，不考虑本地存储，后续思考中会聊到。</p></blockquote><pre class="brush:html;gutter:true;">export interface messagesI { left: boolean; text: string; time: number;}</pre><p>如上是消息列表中的一项，为了区分是渲染到左气泡还是右气泡，这里用<code>left</code>来区分了一下；</p><pre class="brush:html;gutter:true;">const messages: Ref<messagesI[]> = ref([]);</pre><p>2）如何推荐消息</p><p>这边我封装的服务端接口是这样的：</p><pre class="brush:html;gutter:true;">mutation chat{ customerChat(talk: "你好啊"){ knowledge text recommend }}</pre><p><code>recommend</code>是用户可能输入了错误的消息，这里是预测用户的输入字符串，所以我们需要在得到这个字符串后直接显示，然后用户可以一键通过这条消息回复：</p><pre class="brush:html;gutter:true;">function submit(){// 略...const finalMsg = receive?.knowledge || receive?.text || "你是否想问: " + receive?.recommend;// 略...if (receive?.recommend) {input.value = receive?.recommend;} else {input.value = "";}}</pre><p>如上，得益于Vue框架，这里实现起来也非常简单，当用户提交之后，如果有推荐的消息，就直接修改<code>input.value</code>从而修改输入框的文字；如果没有就直接清空方便下一次输入。</p><p>接下来继续增加一点点细节（<code>chat.vue</code>文件）</p><pre class="brush:html;gutter:true;"><template><view class="chat-container"><view class="msg-container"><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"><textareaauto-heightfixed="true"confirm-type="send"v-model="input"@confirm="submit"/></view><buttonstyle="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></pre><h2 data-id="heading-11">思考</h2><p>如何保存到本地，然后每次加载最新消息，然后向上滚动进行懒加载?</p><p>我这里没有实现该功能，毕竟只是一个客服，前端没必要保存消息记录到本地如Localstorage。</p><p>这里抛砖引玉，想到了一个最基础的数据结构--链表，用Localstorage-key/value的形式来实现消息队列在本地的多段存储：</p><p>当然，有效性有待验证，这里仅仅属于一些想法</p><h2 data-id="heading-12">最后</h2><p>然后，我撸了小半天的页面，准备给朋友看看来着，他告诉我微信小程序自带一个客服系统，只需要让<code>button</code>的<code>open-type</code>属性等于<code>contract</code>；</p><h3 id="tid-A8dYk6">本文转载于:</h3><h3 id="tid-SwZPdd">https://juejin.cn/post/7224059698911641658</h3><h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3> </div> </div> <div class="pages"> </div>  <div class="guangao gaoindex"> <img class="close" src="http://www.91zixun.com/wap_static/img/close.png" alt="" /> <div class="adver_3"><script type="text/javascript" src="http://user.042.cn/adver/adver.js"></script><script type="text/javascript">getAdvert('.adver_3',2,'','80px');</script></div> </div>  <div class="tuijian"> <div class="g-white-box"> <div class="module_common_head module_com_hd_weibo"> <div class="line"></div> <a href=" " target="_blank" class="icon_hd">猜你喜欢</a> </div> <div class="side-mod"> <div class="imgBox"> <a href="http://m.91zixun.com/news/2023/0508/26230.html"> <img src="https://aliypic.oss-cn-hangzhou.aliyuncs.com/Uploadfiles/20230508/2023050801145894.001.png"> <p>茅台太贵喝不起？那冰淇淋还吃不起吗？</p> </a> </div> <ul class="defList"> <li> <a href="http://m.91zixun.com/news/2023/0506/25859.html">美国网件NETGEAR助力打造全屋网络覆盖利器，推出全新WiFi-6 三频AX6000 Mesh OrbiRBK860系列，实现超高宽带速度</a> </li> <li> <a href="http://m.91zixun.com/news/2023/0504/25611.html">蔷薇控股林治洪：与中国经济转型升级同频共振</a> </li> <li> <a href="http://m.91zixun.com/news/2023/0428/24870.html">2023中华张姓拜祖大典举行</a> </li> <li> <a href="http://m.91zixun.com/news/2023/0428/24798.html">“银联优惠日”五一焕新亮相多重优惠促活精彩假日消费</a> </li> <li> <a href="http://m.91zixun.com/news/2023/0427/24541.html">同根共祖五千年、聚力发展逐梦行</a> </li> </ul> </div> </div> <div class="g-white-box"> <div class="module_common_head module_com_hd_weibo"> <div class="line"></div> <a href=" " target="_blank" class="icon_hd">为您推荐</a> </div> <div class="side-mod mt30"> <ul class="rankList"> <li> <em>1</em> <a href="http://m.91zixun.com/guancha/2023/0511/26942.html">记录--Vue3+TS(uniapp)手撸一个聊天页面|每日热讯</a> </li> <li> <em>2</em> <a href="http://m.91zixun.com/hot/hot/2023/0511/26941.html">【天天快播报】前4个月我国新能源汽车产销量同比均增长42.8%</a> </li> <li> <em>3</em> <a href="http://m.91zixun.com/guanzhu/2023/0511/26940.html">追梦谈G6：湖人不会把胜利拱手相让我们仍然面临淘汰-全球热门</a> </li> <li> <em>4</em> <a href="http://m.91zixun.com/guancha/2023/0511/26939.html">浦发银行降薪引发员工抗议董监事会办公室：正在核实</a> </li> <li> <em>5</em> <a href="http://m.91zixun.com/hot/hot/2023/0511/26938.html">当前播报:浦发银行回应员工“降薪”：网传图片系两起独立事件相关问题已在解决中</a> </li> <li> <em>6</em> <a href="http://m.91zixun.com/guanzhu/2023/0511/26937.html">成立19年规模不足150亿元，中海基金去年净利润再陷亏损 | 基金</a> </li> <li> <em>7</em> <a href="http://m.91zixun.com/guancha/2023/0511/26936.html">环球即时：江山控股(00295)前4个月太阳能发电站发电量约为13.713万兆瓦时同比增长21.26%</a> </li> <li> <em>8</em> <a href="http://m.91zixun.com/hot/hot/2023/0511/26935.html">全球球精选！新疆库车：守住“烟火气” 电“靓”夜经济</a> </li> <li> <em>9</em> <a href="http://m.91zixun.com/guanzhu/2023/0511/26934.html">凭交通事故责任认定书起诉可以胜诉吗？关于交通事故不出具责任认定书怎么投诉？</a> </li> <li> <em>10</em> <a href="http://m.91zixun.com/guancha/2023/0511/26933.html">孟羽童离开，格力打造年轻化IP为什么受挫？ | 如数家珍</a> </li> </ul> </div> </div> </div> </div> <div data-role="footer" class="footer"> <p align="center"><font color="#222222" face="microsoft yahei, simhei"><span style="margin-right: 10px; margin-left: 10px; font-size: 0px; white-space: normal; background-color: rgb(235, 235, 235); border-width: initial; border-color: initial; border-image: initial;"><img alt="经营性网站备案信息" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice02.jpg" style="border: none;" width="120" /> <img alt="不良信息举报中心" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice03.jpg" style="border: none;" width="120" /> <img alt="中国文明网" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice04.jpg" style="border: none;" width="120" /> <span style="margin-right: 10px; margin-left: 10px; white-space: normal; background-color: rgb(235, 235, 235); border-width: initial; border-color: initial; border-image: initial;"><img alt="国际顶级域名机构权威认证" height="50" src="http://img3.91.com/uploads/images/sj/iconpolice07.jpg" style="border: none;" width="120" /></span></span></font></p> <p align="center">关于我们┊网站合作┊版权声明┊网站地图┊友情链接┊软件版权举报</p> <p align="center"><img align="" alt="" border="0" src="http://www.beian.gov.cn/file/ghs.png" width="20" />京公网安备 35075110106号　　增值电信业务经营许可证B2-2004115　许可<span style="background-color: rgb(255, 255, 255); color: rgb(67, 67, 67); text-indent: 5px; white-space: normal;"> <a href="https://beian.miit.gov.cn/" style="color:#000" target="_blank">粤ICP备18025786号</a> </span>Copyright 1999-2018 © www.91zixun.com All rights reserved</p> <p style="text-align: center;"> </p> <p style="text-align: center;"><a href="http://91zixun.com ">91资讯</a> 版权所有</p> <p style="text-align: center;">联系我们:954 29 18 82 @qq.com</p> </div> <script src="http://www.91zixun.com/wap_static/swiper/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://www.91zixun.com/wap_static/js/js.js?1" type="text/javascript" charset="utf-8"></script> </body> </html>