Telegram 小程序 | TypeScript @telegram-apps/sdk-svelte

riyad

Svelte.js 软件包提供了开发人员在开发微型应用程序时可能有用的实用工具。

TIP

由于此软件包提供了扩展 @telegram-apps/sdk 功能的实用功能，建议先查看 SDK 软件包的文档。

安装

在继续之前，假定您已经安装了 svelte-js 软件包，因为它是此软件包的同级依赖关系。

pnpm :

复制代码

npm :

复制代码

yarn :

复制代码

INFO

此软件包完全重新导出了 @telegram-apps/sdk 软件包，因此您无需单独安装它。

用法

下面是该软件包的一个简单使用示例：

index.svelte

<script>; k$ ?$ a2 z9 q, ?3 t
import { init, backButton } from '@telegram-apps/sdk-svelte';% v' U- [6 Z% Y0 K
; |+ }6 g2 z$ t( h. ]0 D* z
import { BackButton } from './BackButton.svelte';
, |( x5 ~# Q5 y. W+ ^3 x1 ^7 j3 t
# |6 N! n' k& @( n6 ^# A
// Initialize the package.
& \% |: O$ g! ?* `1 P' H. X8 |: F
init(); [: {; e- d, w! `) F: @ g+ b8 d
</script>
! e6 P* ~6 n8 M: @
2 Z2 h& G% O( h9 e
<template>- k+ u9 }8 [/ G, f0 C
<BackButton />9 X0 q: ]0 l6 ?
</template>

复制代码

BackButton.svelte

/**! P+ c! p. L" h' o9 [5 J% f0 j
* Component which controls the Back Button visibility.0 y! V m# L- ^+ |9 _ s) H* c5 m
*/
4 L' t5 \( E& `2 o$ f9 i) N2 g5 ^
<script>
* Q5 f) b8 V; z3 Z4 m* \
import { onMount, onDestroy } from 'svelte'; s2 G9 ]- `; K, {7 Z4 B7 m
import { backButton, useSignal } from '@telegram-apps/sdk-svelte';
& f; l$ e+ Y+ f, j$ l7 ^$ a( T9 p+ b
4 k! M! n- ?" L& l
const isVisible = useSignal(backButton.isVisible);4 ?! @. ~1 C1 R }9 C: k
* X! n8 x/ |' D5 @0 `8 |
$: console.log('The button is', isVisible.value ? 'visible' : 'invisible')1 N$ G6 w% L( x" [
, ~- \. k7 f+ X' `
onMount(() => {
& A: E) L; U# i3 _% d+ |7 T
backButton.show();
! ]+ |4 q, } B* z) m4 S7 C
});. P4 r/ s% z: z) A' P; g
1 b4 F4 ~; t7 i9 t6 E' T8 }$ f
onDestroy(() => {
; P3 X! A/ z2 {& n
backButton.hide(); \4 o2 K% R9 V8 ]4 P
});
! O. W; d* U4 F4 ` `3 o# ~, u
</script>( \3 P6 M8 {& [
2 K; O E) [+ ]6 T3 l
<template></template>

复制代码

HooksuseSignal

该辅助工具允许您在应用程序中使用我们的 signals。它返回一个 Svelte ref，每次信号发生变化时，该 ref 都会更新

<script>
4 X& h* ~% o& H) r `
import { onMount, onDestroy } from 'svelte';
! z' O4 {+ I2 Z
import { backButton, useSignal } from '@telegram-apps/sdk-svelte';1 I0 y4 u8 t) m0 T/ ], P, B. M
9 k9 H1 v+ j& j8 Q
const isVisible = useSignal(backButton.isVisible);
, a" w% N" I" U7 l* z# w: @
# f% d0 K9 I2 @3 w! F( f; L) J
$: console.log('The button is', isVisible.value ? 'visible' : 'invisible')
" I( k* C" _9 {" g/ v
- ~% |: \1 @' \$ p; C
onMount(() => {
0 X9 F9 u1 p" w/ z: Q/ q
backButton.show();
, `4 D0 N/ L6 O. }* f
});
7 K" u; k9 s2 X, e
2 r5 l- W9 K7 p ~7 K# T- {
onDestroy(() => {
5 n' I7 |' G9 D: B% z" J
backButton.hide(); x+ }' n( z3 A3 {* P
});
* N- y( X# [6 e" Z: H$ C
</script>7 G1 X! s' x% ?. c* e& q2 g
6 z" P" y. [1 u+ M5 q3 `6 m
<template></template>

复制代码

useLaunchParams

返回迷你应用程序启动参数的函数。

<script>7 Z+ V6 ?& } j4 F# z
import { useLaunchParams } from '@telegram-apps/sdk-svelte';
% O; b* l; q1 V, j$ V
8 {1 W1 c7 r. S
const lp = useLaunchParams();
3 e( O: j# e3 G; g" ^: R2 l
</script>+ M1 v! [0 q: W1 D) V1 y+ k! v
) E7 z+ ]. L" \, q; V
<template>/ l6 Y: v+ c: \- [
<div>Start param: {{ lp.startParam }}</div>
6 T+ I) G2 h3 P; P' E6 m& k, N
</template>

复制代码