目录
01: 前言
在前台系统中,用户反馈 功能也是一个非常常见的需求。
通过反馈功能,我们可以知道当前的应用存在的一些不足和用户相应的一些诉求。
通常情况下,构建用户反馈平台有两种方式:
1. 自研反馈平台:数据自主,但是成本较高。
2. 第三方反馈平台:数据不自主,但是成本极低。
一般情况下,除非是一线大厂,否则很多的中小企业都会通过第三方反馈平台构建用户反馈系统。
对于我们本文章而言,则是选择了第二种,通过第三方平台构建用户反馈系统。
这种第三方平台应该如何对接呢?继续往下看。
02: 用户反馈整体实现方案分析
进行第三方平台对接之前,我们首先需要了解一下,用户反馈功能在应用中的具体体现是什么。
在前言中我们说到过,所谓用户反馈平台,其本质就是希望给用户一个可以 发言 的地方,并且这个最好可以 交流。
综上所述,就是一个类似于 社区 的概念。
so 用户反馈平台,就可以理解为一个类似于社区平台的东西。
根据我们之前所说,我们期望通过第三方平台实现用户反馈平台。
这个第三方平台就是 兔小巢,它提供了对应的 DEMO 演示。通过演示的 DEMO 可以看出,这就是一个类似于社区平台的概念。
明确好了对应的内容之后,下一小节我们将基于兔小巢实现咱们的用户反馈平台。
03: 兔小巢全解析
整个兔小巢的创建是非常简单的,我们不需要像上一章一样,经过漫长的等待。
创建流程如下:
1. 进入 腾讯兔小巢 平台。
2. 点击 登录 按钮。
3. 进行扫码登录。
4. 登录之后,会跳转到 控制台。
5. 点击 创建产品。
6. 输入产品信息,点击创建产品。
7. 创建成功。会给一个兔小巢的地址。
8. 点击地址,选择接入的产品类型。
9. 点击完成,进入管理后台。
04: 基于兔小巢实现用户反馈
当我们的产品创建成功之后,接下来我们就基于兔小巢实现用户反馈功能。
兔小巢接入的方式非常的简单,在我们注册完成之后,官方其实已经给出了对应的接入方案:
// src/views/layout/components/floating.vue
<template>
<div
@click="onToFeedback"
>
<m-svg-icon
name="feedback"
class="w-1.5 h-1.5 mr-1"
fillClass="fill-zinc-900 dark:fill-zinc-300"
></m-svg-icon>
<span class="text-zinc-800 dark:text-zinc-300 text-sm">立即吐槽</span>
</div>
</template>
<script setup>
// 兔小巢反馈地址
const FEEDBACK_URL = 'https://support.qq.com/product/383681'
/**
* 反馈处理
*/
const onToFeedback = () => {
window.open(FEEDBACK_URL, '_blank')
}
</script>
05: 总结
在本文章中,我们实现了用户反馈功能。整个用户反馈通过对接兔小巢进行实现,还是比较简单的。
对于本文章而言,我们需要知道两点:
1. 用户反馈平台是什么?有什么样的作用?
2. 如何通过兔小巢构建咱们自己的用户反馈平台。