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

riyad

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

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

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

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

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

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

使应用程序具有粘性

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

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

<!DOCTYPE html>
8 ]2 h3 x J7 y8 l5 K! i" |9 T, b6 F
<html lang="en">' n y2 j% U% L
<head>6 c9 N6 u/ C/ p& Q* Z. i9 d
<meta charset="UTF-8">9 T2 h! {# v2 c8 t
<meta7 t( r) X L; }6 D- Y% ]
name="viewport"
" R, a* ~! r, q5 C
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0". M: N% K0 S9 n( F9 d
>
& r; M; i9 n) H w( ?/ W
<meta http-equiv="X-UA-Compatible" content="ie=edge">
$ Q( _, |" J4 S$ ^* I1 u
<title>My Mini App</title>
: g" D- n( X7 z2 ?6 G" M. c+ Y
<style>5 x8 \/ f( E2 z
.mobile-body {
& c0 f" W6 G; F& b
overflow: hidden;0 i, H6 [6 [/ b* D- }, [
height: 100vh;
( Z; M. @/ {0 f# M0 i3 S! H2 x
}
5 j$ U: j1 M2 B# q$ A+ |: g
" R2 ] j# K. s5 _ U
.mobile-wrap {6 Q1 I5 s$ \; K+ ?$ I5 b( K. K
position: absolute;
2 o/ @$ M: f+ i& Q- d7 X
left: 0;. L9 }) v+ E5 J
top: 0;8 \) u% c6 ]& n7 ~0 ]
right: 0;) q, J3 D5 u6 s+ n
bottom: 0;5 Q! Q& G6 A% k7 O
overflow-x: hidden;
9 p( f$ e9 U( d# v7 w" ]; l
overflow-y: auto;
+ \! ^9 O1 R, z3 h1 ^) {. a
background: red; u: u, m$ y/ f' i/ M: }* p y
}$ ^- k$ N0 |) z1 K- J! G
0 x- M: c, q# P& W3 X( l6 N1 O' I
.mobile-content {+ d6 u7 V4 f) y& v
height: calc(100% + 1px);# F6 e9 v$ h/ o. P+ ]5 D
background: green;$ M# A9 _7 H0 E/ _
}
, _8 u: m: D* h" |% x! h5 [
</style>
$ _! g# b4 B+ d, I' W
</head>+ Y/ F6 h+ b6 z, V2 g
<body>
) h) T8 }) Q0 j- A: j
<div id="wrap">
- ^8 D2 v# P% f0 p
<div id="content">4 h% j! H8 j9 D3 N+ k0 N
My application goes here.5 I3 G" k3 t1 x T
</div>2 j' q) y: q3 @: b8 T* V
</div>
2 J% I( w) M' ?% v: d
<script src="https://unpkg.com/@telegram-apps/[email protected]/dist/index.iife.js"></script>7 D+ `+ t$ V) I+ m X0 A
<script>' Q1 r3 ~4 ^/ R# j
(function() {
7 T" H5 D* e; d
var { retrieveLaunchParams, postEvent } = window.telegramApps.sdk;6 l& W- ?( W5 }0 g5 r3 s
var lp = retrieveLaunchParams();/ i# v- }, ~$ r9 p: c4 k
! i3 A9 B R4 W- C% q: K
// Some versions of Telegram don't need the classes above.
: ^2 Y* C" ~$ f& L" r2 Q
if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {* L4 l: {2 H! O
return;
$ s- P" O2 m6 K, m& ?
} m+ ]4 V" q9 i A/ c3 }1 c
( r& d f* E+ j7 p6 }
// Expand the application.
& d9 U9 c5 P8 g* ]6 h0 t5 @
postEvent('web_app_expand');* W3 Z4 i( q# b/ f7 u3 s8 O- v$ K
/ H* M1 [' d3 M% U0 ~% W0 {
document.body.classList.add('mobile-body');- N5 x7 ]- [9 z$ K0 L: S
document.getElementById('wrap').classList.add('mobile-wrap');
, |" O, l* Y) @3 z
document.getElementById('content').classList.add('mobile-content');; w+ _- l1 ~! v. `5 c% A
})();& i! e9 r1 N( O6 x8 D: d" c
</script>
* c# Z& S+ ]8 Y {* T: h: T" ^
</body>6 u) r; c' h: n4 r- y
</html>

复制代码

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

在 Telegram 中打开 ( 源代码)

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

riyad LV4

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