Telegram小程序指南 | 粘贴应用程序

riyad

本帖最后由 riyad 于 2025-2-21 19:29 编辑

开发人员经常希望让他们的应用程序具有“粘性”特性。在这种情况下，“粘性”指的是防止应用程序被意外关闭，例如通过向下滑动的手势。

在采取措施防止意外关闭之前，首先必须了解为何会出现这种行为。

Telegram 迷你应用程序允许开发人员控制关闭按钮的可见性，有时会将其替换为返回按钮。因此，Telegram 开发人员希望确保即使关闭按钮不可见，用户仍能退出应用程序。这就是“向下滑动”机制存在的原因。

假设应用程序显示了返回按钮，但该按钮没有响应。在这种情况下，用户无需关闭整个 Telegram 应用程序，只需向下滑动即可关闭迷你应用程序。因此，在禁用该机制之前，请确保您的应用程序不会变得反应迟钝并困住用户。

最后，检查一下关闭确认是否满足您的需求。

使应用程序具有粘性

要使应用程序具有粘性，可以使用特定的 CSS 样式，防止 WebView 将刷屏事件传递给 Telegram 应用程序。

以下是您可以使用的 HTML 和 CSS：

<!DOCTYPE html>7 K' W' D1 I1 M& |! j
<html lang="en">/ c. c( A1 \5 c/ O! z% S' {
<head>
0 ?! S: ]3 g9 ]8 r9 m* r6 \2 C
<meta charset="UTF-8"># w# _/ `3 S, W- s
<meta
7 t* F; q5 m2 E4 _* O
name="viewport"' f0 w, Y* n& R4 _9 X
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" A3 N% ]2 V" ~5 A$ N# y
>$ U! e8 H6 E0 _6 x
<meta http-equiv="X-UA-Compatible" content="ie=edge">* B1 x$ d# D, q* ~. K5 F3 F
<title>My Mini App</title>2 e# f3 W& N, g+ a1 H
<style>: I5 i5 z6 m M5 q: {5 j1 X. |6 |
.mobile-body {0 l: f+ q7 H" N5 z& M2 Q8 d
overflow: hidden;# @* _7 V3 C4 x' t
height: 100vh;
6 `8 z& t" g& } ]; s V; [
}
9 m& \6 j( W/ s1 Q: Z
5 y7 _2 Y5 _4 w9 I
.mobile-wrap {; I6 Z) g4 W) |) R0 V
position: absolute;& {' M, F, x2 G9 x( a8 \9 X1 B: W
left: 0;
# [) r- L/ d& ?; U) ^
top: 0;
6 j# c- I( O, {
right: 0;. A$ a9 Y e2 W5 P7 i; _& u
bottom: 0;4 V1 L# Z; E9 ~6 j$ F& r6 @+ M
overflow-x: hidden;
5 U3 J7 o5 \+ R$ b6 v2 U
overflow-y: auto;
; {; `8 S2 T4 T
background: red;4 [$ @, o6 i; |9 I
}; T: q3 m8 c/ S x9 R
5 @" s1 g% G0 |1 w9 l: |- z
.mobile-content {
( Z0 r9 a& S) b4 ]+ A
height: calc(100% + 1px);
) W+ T' J9 n# n4 C- j& F( M
background: green;
: Z( i3 K5 [( ]% t
}
E: r8 o a u9 E/ `
</style>
6 q6 o; n( @2 K" e0 j' L( D, R8 K
</head>
) u1 O, K$ f- D9 d6 y6 E
<body>6 P$ |/ m5 H! @: Z
<div id="wrap">. b9 T% V$ J: w9 ?' b9 M/ k" `4 a
<div id="content"># L7 f9 }( h. X
My application goes here.
3 c& j7 _$ r* F4 @% Q
</div>
L# b- G* l, Y; g7 v" K
</div>+ o9 K1 x/ j2 S1 {
<script src="https://unpkg.com/@telegram-apps/[email protected]/dist/index.iife.js"></script>
1 H' c+ `8 p& ~, l5 s, c
<script>
# V6 p# ?: w6 d6 I- b. Z
(function() {
/ g' D3 p6 p( e, z+ D8 z X
var { retrieveLaunchParams, postEvent } = window.telegramApps.sdk;
2 K( k( [# }: S) M$ d
var lp = retrieveLaunchParams();+ [* T$ B* @6 X8 ?: X
/ N9 i8 S A# }1 @" z$ I
// Some versions of Telegram don't need the classes above.
6 ?3 E- k7 ^! G
if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {0 X# ^2 f! H& q/ I
return;4 N' v/ V$ S+ m }
}
! B7 {: S( m; p; q6 L0 S% N
2 ^: t. b. N, ~' c% v! ?2 }
// Expand the application." \9 k+ J- c; A/ i
postEvent('web_app_expand');
- ^# e' n8 c T% h: N4 f, ]9 U
: X4 G& A! Y+ b6 j. Z% J0 {
document.body.classList.add('mobile-body');: P" Y( J8 i1 M5 ^% A: g
document.getElementById('wrap').classList.add('mobile-wrap');7 n. R" \( F3 y4 N. M
document.getElementById('content').classList.add('mobile-content');
5 ~0 e2 ?9 T+ D! I4 X
})();: e* N# C' `0 o. n9 I. S
</script>
* {4 P+ l8 A) j$ K8 j
</body>" Q2 s, V+ e% p) h" F
</html>

复制代码

使用这种 HTML 和 CSS 可以防止大多数意外的向下滑动关闭。虽然这种方法涵盖了大多数情况，但在极少数情况下可能无效，但在实际使用中并不常见。

在 Telegram 中打开 ( 源代码)

Telegram小程序 指南 | 粘贴应用程序

riyad LV4

Telegram小程序指南 | 粘贴应用程序