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
  }
}

ecommend是用户可能输入了错误的消息，这里是预测用户的输入字符串，所以我们需要在得到这个字符串后直接显示，然后用户可以一键通过这条消息回复：

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；

。

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

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

前言

重难点调研

1. 如何编写气泡

2. 如何编写输入框

3.如何实现滚动条始终居于底部

概述

左气泡模块

右气泡模块

输入模块

整体

思考

最后

热门文章

最新文章

相关课程

相关电子书