# jump-cards

**Repository Path**: fhboss/jump-cards

## Basic Information

- **Project Name**: jump-cards
- **Description**: 抖音/微信外链跳转卡片 - 纯前端零后端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-08-10
- **Last Updated**: 2026-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 跳转卡片（抖音 / 微信外链）

纯前端、零后端的「点击跳转卡片」工具。适合部署到 Vercel / GitHub Pages / 任意静态托管。

## 项目简介

本项目提供了一个无需后端的跳转卡片解决方案，通过 URL 哈希（#）将标题、描述、目标链接和封面等信息编码到卡片链接中。用户点击卡片后，可以直接唤起抖音 App 或打开目标网页。

## 文件说明

- `index.html` —— **落地页（被点开的卡片）**
  - 从 URL `#` 哈希读取标题/描述/目标/封面并渲染成卡片
  - 点击「打开」尝试唤起 App 或跳转网页
  - 微信内显示「在浏览器打开」引导层

- `gen.html` —— **卡片生成器**
  - 填写标题、描述、链接，生成一张卡片 URL
  - 内容编码进 `#` 哈希，不依赖后端
  - 支持生成「抖音卡片」和「网页外链」两种类型

- `test-logic.js` —— 编解码逻辑的 Node 自测（开发用）

## 快速开始

### 生成卡片

1. 打开 `gen.html`
2. 选择「抖音卡片」或「网页外链」
3. 填写标题、抖音/目标链接（封面可选）
4. 点击「生成卡片链接」
5. 复制生成的链接并发送（微信/QQ/短信均可）

### 使用卡片

1. 对方点击链接
2. 看到精美的卡片样式
3. 点击「打开」按钮唤起抖音 App 或打开网页

## 抖音跳转的现实限制

> ⚠️ 务必阅读以下内容

- **微信里无法直接点一下跳抖音 App**：微信会拦截 `snssdk1128://` 之类的 Scheme。所以流程是：微信内点开卡片 → 提示「右上角 ⋯ → 在浏览器打开」→ 浏览器里用抖音 Scheme 唤起 App。这是 aifabu 类工具都在用的真实方案。
- **微信外**（浏览器/QQ/短信/企业微信等）可直接唤起，无需引导。
- 若要「微信内真·一键跳 App」，正路是微信 `wx-open-launch-app`，需**认证服务号 + 抖音在微信开放标签白名单**（基本拿不到）。别指望纯前端绕过去。

## 部署方式

### Vercel 部署

把整个目录推到 GitHub，Vercel 导入仓库即可（纯静态，无需构建）。

### GitHub Pages 部署

1. 仓库 Settings → Pages
2. 选择分支根目录
3. 生成的卡片链接域名换成 `https://<你>.github.io/<仓库名>/`

### 注意事项

- 卡片链接里含 `#`，静态托管都能正确处理
- 务必用 **HTTPS** 域名，否则手机上 Scheme 唤起会被部分浏览器拦截
- 换自己域名后，生成器会自动用当前域名拼接卡片链接

## 自定义修改

### 配色修改

修改 `index.html` 中 `.cover` 的渐变和 `.btn` 背景色。

### 抖音 Scheme 规则

在 `gen.html` 的 `douyinToScheme()` 函数中调整（目前支持 `v.douyin.com/xxx` 短链转 Scheme）。

## 技术原理

1. **编码方式**：使用 Base64 编码将卡片信息（标题、描述、链接、封面）存入 URL 哈希
2. **解码渲染**：访问时从 URL 读取哈希并解码，动态渲染卡片页面
3. **唤起机制**：通过 Scheme 协议（如 `snssdk1128://`）唤起抖音 App

## 许可证

MIT License