## ? 项目概述

这是一个基于 **uni-app** 框架开发的人格测试小程序源码，名为 "SBTI"（Silly Big Personality Test），专为微信小程序设计，也可扩展到其他平台。

## ? 核心功能

### 1. **双版本题库系统**

- **标准版**：适合首次测试，节奏更快

- **扩展版**：题库更大（105道题），题目风格更强、更有传播性

- 支持随机题序，提升重复测试体验

### 2. **完整测试流程**

- **首页引导**：精美的视觉设计，包含版本选择

- **答题页面**：自动跳题交互，支持上一题返回

- **结果计算**：基于多维度人格算法

- **结果展示**：包含人格代号、名称、匹配度等核心信息

### 3. **社交传播能力**

- 首页支持随机分享文案

- 结果页支持直接分享

- 内置分享文案和类型图片映射

- 适合裂变传播和社交扩散

### 4. **商业化功能**

- **激励视频广告**：已接入广告逻辑

- **免费策略**：首次测试可直接查看结果

- **付费解锁**：第二次及之后需观看激励广告解锁结果

- **本地缓存**：自动记录测试次数

### 5. **人格维度分析**

从题库数据可以看出，测试涵盖多个心理维度：

- **S维度**（Social/社交）：社交表现、面子问题

- **M维度**（Money/金钱）：消费观念、经济态度  

- **E维度**（Emotion/情感）：情绪管理、内心真实想法

- **L维度**（Life/生活）：生活态度、努力程度

## ? 界面特色

### 视觉设计

- **自定义导航栏**：带有动态光效的标题动画

- **现代化UI**：简约清新的绿色主题配色

- **响应式布局**：适配不同屏幕尺寸

- **精美卡片设计**：圆角、阴影、渐变效果

### 交互动画

- **标题扫光动画**：持续的视觉吸引效果

- **进度条动画**：答题进度可视化

- **分析页面动效**：浮动光球、进度条动画

- **平滑过渡**：页面切换流畅

## ? 技术架构

### 前端框架

- **uni-app**：跨平台开发框架

- **Vue 3**：现代前端框架

- **微信小程序**：主要目标平台

### 项目结构

```

├── pages/index/index.vue    # 主页面（首页+答题+结果）

├── common/

│   ├── newdata.json         # 扩展版题库数据（105题）

│   ├── sbti-data.js         # 题库配置（空文件待填充）

│   └── sbti-engine.js       # 测试引擎逻辑（空文件待填充）

├── static/image/            # 人格类型图片资源

└── 配置文件                  # manifest.json, pages.json等

```

## ? 商业价值

### 适用场景

- 人格测试小程序

- 娱乐测评类产品

- 社交裂变工具

- 内容号引流

- 广告变现轻应用

### 可定制内容

- 品牌视觉素材

- 题库内容和结果类型

- 分享文案和页面文案

- 广告位配置

- 免费策略调整

## ? 技术亮点

1. **产品化包装**：完整的用户体验流程

2. **模块化设计**：题库、引擎、页面分离

3. **易二次开发**：清晰的代码结构

4. **多端兼容**：基于uni-app的跨平台能力

5. **性能优化**：本地缓存、懒加载等

## ? 市场定位

这不是一个简单的答题模板，而是一套已经具备：

- **产品感**：完整的用户旅程设计

- **传播力**：社交分享机制

- **商业化**：广告变现能力

- **扩展性**：易于定制和扩展

这个项目非常适合想要快速上线测试类产品的开发者或团队，可以作为基础进行二次开发和品牌包装。

基于对项目代码的深入分析，我为这个SBTI人格测试小程序源码设计了以下SEO优化的标题方案：

## ? 推荐主标题

**"SBTI人格测试小程序源码 uni-app双题库完整版 | 含激励广告+分享裂变功能"**

## ? 备选SEO标题方案

### 方案一（功能导向）

**"uni-app人格测试小程序源码 SBTI双版本题库 激励视频广告变现 社交分享裂变"**

### 方案二（商业价值导向）  

**"可商用SBTI人格测试源码 uni-app微信小程序 双题库随机出题 广告解锁结果"**

### 方案三（技术特性导向）

**"SBTI性格测试小程序完整源码 Vue3 uni-app框架 标准版扩展版题库 激励广告集成"**

### 方案四（长尾关键词优化）

**"人格测试小程序源码下载 SBTI趣味测评 uni-app开发 双版本题库 激励视频广告 分享传播"**

## ? SEO关键词分析

### 核心关键词

- **主要词**：人格测试小程序源码、SBTI测试、uni-app源码

- **功能词**：双题库、激励广告、分享裂变、随机出题

- **技术词**：uni-app、Vue3、微信小程序、完整源码

### 长尾关键词组合

- "可商用的人格测试小程序源码"

- "带广告变现的测试类小程序"  

- "uni-app人格测评完整项目"

- "支持分享裂变的测试源码"

- "SBTI性格测试双版本题库"

## ? 标题优化建议

### 最Z佳实践标题（推荐使用）

```

SBTI人格测试小程序源码 uni-app双题库完整版 | 激励广告+分享裂变+随机出题

```

### 标题优势分析

1. **品牌识别**：突出"SBTI"特色品牌

2. **技术栈明确**：标明"uni-app"便于开发者搜索

3. **核心卖点**：强调"双题库完整版"

4. **功能亮点**：包含"激励广告+分享裂变"商业化功能

5. **长度适中**：符合搜索引擎显示要求

### 页面Meta描述建议

```html

```

这样的标题既突出了项目的核心技术特点，又强调了商业价值，能够有效吸引目标用户群体的搜索流量。

## ? 核心功能模块

### 1️⃣ **用户端 （H5）** - 面向最终用户

#### **首页 （Home.vue）**

- 展示品牌Slogan:"MBTI已经过时,SBTI来了"

- 背景图片可配置

- "开始测试"按钮,生成游客ID并跳转到测试页面

#### **测试页面 （Test.vue）**

- **31道测试题目**,支持图文混排

- 每题3个选项（总是如此/有时如此/很少如此）

- 进度条显示答题进度

- 支持上一题/下一题导航

- 答案自动保存,可随时返回修改

- 提交后通过**科学评分算法**计算人格类型

#### **结果页面 （Result.vue）**

- 显示测试结果图片和人格类型标签

- **解锁机制**:

  - ? 未解锁状态:只显示标题,描述被隐藏

  - ? **支付解锁**: 集成虎皮椒支付,微信支付解锁完整报告

  - ? **分享解锁**: 分享到朋友圈后自动解锁（4秒延迟模拟）

- **分享海报生成**: 

  - 使用html2canvas生成带二维码的分享海报

  - 包含结果图、人格类型、描述和二维码

  - 支持下载海报到本地

- 重新测试功能

---

### 2️⃣ **管理后台 （Admin）** - 面向管理员

#### **题目管理 （Questions.vue）**

- 增删改查测试题目

- 富文本编辑器（WangEditor）编辑题目内容

- 上传图片作为题目配图

- 启用/禁用题目

- 排序控制

- **选项管理**: 为每道题配置3个选项及其分值

#### **结果图管理 （ResultImages.vue）**

- 管理10种人格类型的结果展示配置

- 每种人格类型可配置:

  - 标题 （如"你是DEAD型人格"）

  - 描述文案

  - 结果图片

  - 排序和启用状态

- 支持按人格类型筛选

#### **VIP套餐管理 （VIP.vue）**

- **套餐管理**: 创建/编辑/删除VIP套餐

  - 设置套餐名称、价格、时长（天）、描述

  - 启用/禁用套餐

- **订单管理**: 查看所有支付订单

  - 订单号、用户ID、套餐ID、金额、状态

  - 状态包括: pending（待支付）、completed（已完成）

#### **数据统计 （Stats.vue）**

- 核心数据卡片展示:

  - 测试参与人数

  - 完整报告解锁数

  - VIP开通数

  - 广告总播放数

  - 分享次数

- ECharts图表可视化:

  - 测试参与趋势图

  - 数据对比图（本周vs上周）

- 支持日期范围筛选

#### **其他管理功能**

- **用户管理**: 查看用户列表、答题记录、VIP记录

- **图片资源管理**: 管理首页图、题目图、结果图等

- **广告管理**: 配置广告内容和优先级

- **系统设置**: 

  - 微信AppID/AppSecret配置

  - 虎皮椒支付参数配置

  - 解锁费用设置

---

## ? 核心技术特性

### **人格类型评分算法**

系统定义了**10种搞笑人格类型**:

1. **DEAD** （死者） - 精神麻木,行尸走肉

2. **MALO** （吗喽） - 生活重压下的打工人

3. **ATM-er** （送钱者） - 人形提款机

4. **SHIT** （狗屎人） - 情商低到令人发指

5. **尤物** - 人间尤物,清醒通透

6. **舔狗** - 卑微的爱情追求者

7. **卷王** - 内卷之王

8. **躺平** - 躺平青年

9. **社恐** - 社交恐惧症

10. **焦虑怪** - 永远在担心未来

**评分逻辑**:

- 每个题目的3个选项对应不同人格类型的加分

- 例如:选择"总是身心疲惫" → DEAD+3分, MALO+3分, 躺平+2分, 焦虑怪+2分

- 遍历所有答案累加各人格类型得分

- 得分最z高的人格类型即为最终结果

- 如果最z高分≤0,默认为"尤物"

### **支付系统**

- 集成**虎皮椒支付** （第三方支付网关）

- 支持微信扫码支付

- 异步回调处理:

  - 验证签名安全性

  - 更新订单状态

  - 自动解锁测试结果

  - 可选升级为VIP会员

### **微信生态集成**

- 微信OAuth2.0授权登录

- 微信JS-SDK集成（用于自定义分享）

- 朋友圈分享引导交互

### **数据安全**

- 使用事务确保数据一致性（答案提交、支付回调等）

- 签名验证防止支付篡改

- 游客ID机制保护用户隐私

---

## ?️ 数据库设计

主要数据表:

- **users** - 用户表（openid, nickname, avatar, is_vip, vip_expire_time）

- **questions** - 题目表（content, image_url, is_enabled, sort_order）

- **options** - 选项表（question_id, content, score）

- **user_answers** - 用户答题记录

- **results** - 测试结果表（user_id, result_type, result_label, result_desc, image_url, is_unlocked）

- **result_images** - 结果图配置表（result_type, title, descri-ption, image_url）

- **vip_packages** - VIP套餐表

- **orders** - 订单表

- **images** - 图片资源表

- **share_stats** - 分享统计表

- **settings** - 系统设置表（key_name, value）

---

## ? 产品亮点

1. **幽默化人格测试** - 将传统MBTI转化为更接地气的搞笑人格类型

2. **双重解锁机制** - 付费+分享,提高转化率和传播性

3. **科学评分算法** - 基于多维度题目动态计算,非随机结果

4. **可视化分享海报** - 自动生成带二维码的精美海报

5. **完善的管理后台** - 全流程内容管理和数据分析

6. **灵活的配置系统** - 所有文案、图片、价格均可后台配置

这是一个完整的商业化H5测试应用,具备用户增长、变现和数据运营的全套能力! ?

基于对项目代码的深入分析,我为这个SBTI人格测试H5系统设计了以下几个SEO优化的推广标题:

## ? 推荐标题方案

### **方案一（综合型 - 推荐）**

```

SBTI人格测试H5系统源码 |全栈开源项目 | 支持微信分享解锁+虎皮椒支付 | 含管理后台

```

**SEO关键词覆盖:**

- SBTI人格测试 （核心功能）

- H5系统源码 （产品类型）

- Vue3 + Node.js （技术栈）

- 全栈开源项目 （项目性质）

- 微信分享解锁 （特色功能）

- 虎皮椒支付 （变现能力）

- 管理后台 （完整度）

---

### **方案二（技术导向型）**

```

人格测试系统源码 | 前后端分离H5项目 | 科学评分算法 | 完整商业级解决方案

```

**优势:** 突出技术架构和商业价值,吸引开发者

---

### **方案三（功能亮点型）**

```

搞笑人格测试H5源码下载 | 10种人格类型动态评分 | 支付解锁+分享裂变 | 数据统计后台 | 开箱即用

```

**优势:** 强调产品特色和易用性,吸引创业者

---

### **方案四（长尾关键词型）**

```

SBTI人格测试小程序H5源码 | 集成微信支付和分享海报生成 | 附部署教程

```

**优势:** 包含年份、平台、具体功能,适合精准搜索

---

### **方案五（简洁有力型）**

```

SBTI人格测试系统完整源码 | 全栈项目 | 支持付费解锁和病毒式传播 | 含后台管理系统

```

**优势:** 简洁明了,突出核心价值

---

## ? SEO优化建议

### **页面Meta标签配置:**

```html

```

---

### **内容营销关键词布局:**

**一级关键词（高搜索量）:**

- 人格测试源码

- H5测试系统

- Vue3项目源码

**二级关键词（中等竞争）:**

- SBTI测试系统

- 微信分享解锁

- 支付集成源码

- 管理后台模板

**长尾关键词（精准流量）:**

人格测试完整项目

- 带支付功能的H5测试源码

- 可商用的人格测试系统

- 支持二次开发的测试项目

---

## ? 推广文案要点

平台发布时,建议在README中包含:

1. **项目截图** - 首页、测试页、结果页、管理后台

2. **功能清单** - 详细列出所有功能模块

3. **技术栈说明** - MySQL等

4. **在线演示** - 提供Demo链接

5. **快速开始** - 安装和部署步骤

6. **应用场景** - 个人学习、毕业设计、创业项目、企业定制

7. **更新日志** - 体现项目活跃度

---

## ? 最终推荐

**最z佳标题组合:**

```

主标题: SBTI人格测试H5系统源码 |全栈项目 | 微信分享解锁+支付变现

副标题: 完整商业级解决方案 | 科学评分算法 | 管理后台 | 开箱即用 | 附部署教程

```

这个标题既突出了核心技术,又强调了商业价值（支付+分享裂变）,同时说明了完整性（含后台+教程）,能够吸引目标用户群体! ?

定制看需求，一般几小时内完成，也不贵。