抖音卡片是如何生成的？其实抖音是直接抓取html页面的一些信息来生成封面图、主标题、副标题的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />
<link rel="shortcut icon" type="image/x-icon" href="这是封面图URL" />
<meta name="description" content="这是副标题" />
<title>这是主标题</title>
<meta property="og:title" content="这是主标题" />
<meta property="og:description" content="这是副标题" />
<meta property="og:url" content="跳转链接" />
<meta property="og:image" content="这是封面图URL" />
</head>
<body>
<h1>抖音卡片演示</h1>
</body>
</html>
|
这是原理，如果要实现抖音跳转微信可使用以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>安全跳转中</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基础自适应样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
background: #f7f7f7;
color: #333;
line-height: 1.6;
text-align: center;
margin: 0;
padding: 5vw;
display: flex;
flex-direction: column;
min-height: 100vh;
box-sizing: border-box;
}
.container {
background: white;
border-radius: 2vw;
padding: 6vw 5vw;
box-shadow: 0 0.5vw 2vw rgba(0, 0, 0, 0.05);
margin: auto;
width: 90%;
max-width: 500px;
}
.ssl-badge {
color: #07C160;
font-weight: bold;
font-size: clamp(14px, 4vw, 18px);
margin-bottom: 4vw;
display: flex;
align-items: center;
justify-content: center;
}
.ssl-badge::before {
content: "✓";
display: inline-block;
background: #07C160;
color: white;
width: 5vw;
height: 5vw;
max-width: 24px;
max-height: 24px;
border-radius: 50%;
line-height: 5vw;
margin-right: 2vw;
font-size: 3vw;
}
.loading-text {
font-size: clamp(16px, 4.5vw, 20px);
margin: 4vw 0;
}
/* 修改后的按钮样式 - 更紧凑 */
.jump-button {
background: #07C160;
color: white;
border: none;
border-radius: 1.5vw;
padding: 2vw 5vw; /* 减小垂直padding，增加水平padding */
width: auto; /* 改为自适应宽度 */
display: inline-block; /* 使宽度由内容决定 */
font-size: clamp(14px, 4vw, 16px); /* 稍微减小字体 */
margin: 3vw 0;
cursor: pointer;
transition: all 0.3s;
min-width: 60%; /* 确保最小宽度 */
}
.jump-button:hover {
background: #06AD56;
transform: scale(1.02);
}
.manual-hint {
color: #999;
font-size: clamp(12px, 3.5vw, 14px);
margin-top: 5vw;
word-break: break-all;
}
.link-text {
color: #07C160;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<!-- SSL安全提示 -->
<div class="ssl-badge">本链接已经过SSL安全加密，请放心点击</div>
<!-- 跳转提示 -->
<div class="loading-text">正在跳转到微信...</div>
<div class="loading-text" style="color: #666; font-size: clamp(14px, 4vw, 16px);">
如未自动打开微信请点击下方按钮
</div>
<!-- 跳转按钮 - 现在更紧凑 -->
<button class="jump-button" id="jumpBtn">点击立即前往微信</button>
<!-- 手动复制提示 -->
<div class="manual-hint">
如无法打开微信，请复制链接到浏览器打开<br>
<span class="link-text" id="targetLink">https://infp.online</span>
</div>
</div>
<script>
// 目标链接
const targetUrl = "https://infp.online";
// 显示真实链接
document.getElementById('targetLink').textContent =
targetUrl.length > 30 ?
targetUrl.substring(0, 30) + '...' :
targetUrl;
// 自动跳转（3秒后）
let countdown = 3;
const timer = setInterval(() => {
countdown--;
if (countdown <= 0) {
clearInterval(timer);
doRedirect();
}
}, 1000);
// 按钮点击跳转
document.getElementById('jumpBtn').addEventListener('click', doRedirect);
// 跳转函数
function doRedirect() {
window.location.replace(targetUrl);
}
// 禁止回退（可选）
history.pushState(null, null, location.href);
window.onpopstate = function() {
history.go(1);
};
</script>
</body>
</html>
|