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

riyad

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

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

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

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

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

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

使应用程序具有粘性

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

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

<!DOCTYPE html>9 g! ^. O8 O$ |
<html lang="en"># ?7 k. Z. ^- O5 K2 @
<head>
<meta charset="UTF-8">
5 n: {, i, n5 W/ n- Y
<meta6 j+ z* g* E! q. P% r
name="viewport"
+ X. S& Q0 w# t% a4 r, Y1 ~0 V) g
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
9 R3 f4 A# h; R0 q( H
>
$ n2 c4 H; @$ W- ?% y; H
<meta http-equiv="X-UA-Compatible" content="ie=edge">& n& }! E7 s) N* c3 r
<title>My Mini App</title>$ y; `2 Q+ A3 V4 e
<style>
" k% N- B& J2 p- N6 ?
.mobile-body {
! ^5 n, Z: P1 U+ h1 p& F
overflow: hidden;
0 O0 t* | n# f
height: 100vh;
2 _. `, F! P' e7 a
}
' Q$ ]' B" n3 i- A! m
1 R# G$ ]! f# t1 i, C
.mobile-wrap {0 l0 u2 N5 a& @ l! X
position: absolute;4 o) q: C' M5 m, _$ f, Y9 t
left: 0;
7 \6 Q% v$ t2 u' x
top: 0;
2 t0 X( { ]4 ^% D: T
right: 0;
9 B ^- I6 {$ f) T
bottom: 0;
6 b2 ~% k8 } Z5 j
overflow-x: hidden;/ i3 f6 M" X9 o! B, X
overflow-y: auto;
; }. _+ U" K- p9 O
background: red;! }8 \- q; Q# o# W4 ]
}
0 t6 Q6 k( l/ ]; l
5 T5 V) C- `) R# F
.mobile-content {, a( X( V" ~) P
height: calc(100% + 1px);2 q# x- F9 N; n
background: green;
" V- A J9 M8 E% E" x' ^, Q7 w
}
; V6 Q( V9 u$ P5 P
</style>; q2 [8 G. o2 I0 B9 j' v: ~
</head>$ W& z) S' _! z) R8 y! {. z6 P3 p
<body>( x0 Z6 n" R' T L
<div id="wrap">4 L7 {' V7 |; j2 t" I5 z
<div id="content">
$ y; D, S& }4 G% @- r. |) Q7 c
My application goes here.; G$ x- n$ t9 Y/ W4 Z8 o5 x; M- I
</div>+ _ @) m. z% t+ G* |( q4 v& o3 C
</div>
: O0 N6 H) n; d: D! _0 j/ U7 S
<script src="https://unpkg.com/@telegram-apps/[email protected]/dist/index.iife.js"></script>
4 d+ a& w( W: p: j
<script>" h [0 F- `/ p
(function() {$ I3 k! {5 {3 D% G# f8 j
var { retrieveLaunchParams, postEvent } = window.telegramApps.sdk;
. H. _: u& x% P" q9 ^ ^0 L
var lp = retrieveLaunchParams();
5 m: B- n' m. A/ q3 d4 g4 f) p
# Y% l* [8 c1 o9 I& k7 Z
// Some versions of Telegram don't need the classes above.: {3 N; N9 C. X1 c
if (['macos', 'tdesktop', 'weba', 'web', 'webk'].includes(lp.platform)) {. |* _; R0 [$ q8 {" g v# B! ^
return;& M C$ O+ e' ?
}( }( g& P% U0 r, J
9 J" o$ y# S1 t8 D7 K9 t1 h
// Expand the application.
0 U* H) z, Q9 H# X* J, M2 n. z: Y
postEvent('web_app_expand');6 s) T2 e7 g, q8 T6 r. Q
1 X/ c; {1 D0 ^7 G
document.body.classList.add('mobile-body');
6 v( a9 z. ~$ ^# c" q
document.getElementById('wrap').classList.add('mobile-wrap');
5 l$ n x8 Q3 U# o( \& B& `3 H2 d) V
document.getElementById('content').classList.add('mobile-content');
' R0 e4 j8 A$ L a. C3 z3 ]
})();% `: H6 f! P. J+ u8 }3 y, Q
</script>
2 F* C2 E$ N$ z- T6 p9 n8 u& S P
</body>
$ |2 f# Y0 h2 w0 a0 ~' l
</html>

复制代码

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

在 Telegram 中打开 ( 源代码)

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

riyad LV4

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