抖音蓝字卡片跳转微信中转页面系统
项目概述
本项目是一个专门为抖音环境设计的H5页面系统，用于实现抖音蓝字卡片跳转微信的功能。系统包含前端跳转页面和管理后台两部分，支持自动唤起微信扫码功能，并提供备用二维码方案。
项目架构
认证：基于Session的用户认证
文件上传：Multer中间件
核心功能
1. 抖音跳转页面
设备检测：自动检测用户设备类型（安卓/iOS）
微信唤起：根据设备类型选择合适的微信唤起协议
备用方案：显示微信二维码，提示用户截图扫码
配置加载：从管理后台API获取最新配置
响应式设计：适配移动端（抖音内置WebView）
2. 管理后台
用户认证：登录/登出功能，确保配置安全
配置管理：二维码URL、页面标题、按钮文字、按钮颜色等
图片上传：支持直接上传二维码图片和卡片图标
抖音卡片配置：卡片标题、描述、图标等
详细指南：抖音自动回复蓝字卡片设置指南
3. API接口
/api/login：用户登录/api/logout：用户登出/api/check-login：检查登录状态/api/config：获取/更新配置/api/frontend-config：前端获取配置/api/upload：文件上传
技术实现
1. 微信唤起技术
延迟唤起：页面加载后1秒触发，避免被抖音拦截
错误捕获：确保唤起失败时页面不报错
2. 配置管理
实时加载：前端页面自动从管理后台API获取配置
默认配置：API请求失败时使用默认配置
动态应用：配置更新后实时应用到页面
3. 文件上传
图片存储：上传的图片存储在
public/uploads目录自动命名：生成唯一的文件名，避免重名
权限控制：只有登录用户可以上传图片
4. 用户认证
密码加密：使用bcrypt对密码进行加密存储
会话管理：基于Session的认证机制，24小时过期
访问控制：确保敏感操作需要登录
部署要求
服务器环境：
公网IP地址
SSL证书（HTTPS协议）
部署步骤：
克隆项目代码到服务器
配置域名和SSL证书
在抖音创作者后台设置蓝字卡片
抖音设置：
登录抖音创作者后台
进入消息管理 > 自动回复设置
创建触发关键词规则
配置蓝字卡片，填写前端页面URL
## 核心技术点 1. **设备检测**：使用`navigator.userAgent`检测设备类型，为不同设备选择合适的微信唤起协议 2. **微信唤起**：使用微信官方URL Scheme协议，延迟唤起避免被抖音拦截 3. **配置管理**：前端从管理后台API加载配置，实现配置的实时更新 4. **文件上传**：使用multer处理文件上传，支持直接上传二维码图片和卡片图标 5. **用户认证**：基于Session的认证机制，确保配置管理的安全性 6. **错误处理**：完善的错误捕获和处理机制，确保系统稳定运行 ## 项目价值 1. **提升用户体验**：自动唤起微信，减少用户操作步骤，提供备用二维码方案 2. **方便管理**：可视化的管理后台，实时更新配置，无需修改代码 3. **合规安全**：符合抖音的内容规范，安全的用户认证机制 4. **技术成熟**：使用稳定的技术栈，完善的错误处理和异常捕获 5. **详细指南**：提供完整的抖音自动回复蓝字卡片设置指南 ## 使用流程 1. **启动服务器** 2. **登录管理后台**：访问`http://localhost:3000/admin`，使用默认账号密码（admin/admin123） 3. **配置参数**：上传二维码图片，设置页面标题、按钮文字等 4. **获取前端URL**：复制前端页面地址（部署后需要使用HTTPS链接） 5. **设置抖音自动回复**：在抖音创作者后台配置蓝字卡片，填写前端页面URL 6. **测试功能**：发送触发关键词，测试蓝字卡片和微信唤起功能 本项目为抖音用户提供了一种便捷的微信添加方式，通过自动化的微信唤起和备用二维码方案，确保用户能够顺利添加微信客服，同时通过管理后台实现了配置的灵活管理。  
