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

riyad

Svelte.js 软件包提供了开发人员在开发微型 应用程序时可能有用的实用工具。
. |( i9 S/ a0 _0 }" g4 D" f$ `

TIP

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

安装​

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

pnpm :

1. pnpm i @telegram-apps/sdk-svelte

复制代码

npm :

1. npm i @telegram-apps/sdk-svelte

复制代码

yarn :

1. yarn add @telegram-apps/sdk-svelte

复制代码

INFO

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

用法​

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

index.svelte

1. <script>
   6 U/ i; o2 M( T7 A2 M: G! t; U4 C
2.   import { init, backButton } from '@telegram-apps/sdk-svelte';
   
3. 
   
4.   import { BackButton } from './BackButton.svelte';
   . U# Q. ~8 y- `0 |8 }$ [
5. 
   
6.   // Initialize the package.
   5 n2 s! B' l: P! W
7.   init();
   
8. </script>
   4 R9 ]+ a8 p9 |2 N8 z: q
9. 
   ) R8 v( l, m- b5 ^0 v
10. <template>
    
11.   <BackButton />
    
12. </template>

复制代码

BackButton.svelte

1. /**
   
2. * Component which controls the Back Button visibility.
   4 p, K. s4 S! j% f9 \) c
3. */
   
4. <script>
   
5.   import { onMount, onDestroy } from 'svelte';
   
6.   import { backButton, useSignal } from '@telegram-apps/sdk-svelte';
   
7. 
   1 m- o; w9 O! n3 G3 e# S
8.   const isVisible = useSignal(backButton.isVisible);
   7 [+ b, s$ B: x7 u/ I
9. 
   
10.   $: console.log('The button is', isVisible.value ? 'visible' : 'invisible')
    
11. 
    
12.   onMount(() => {
    * p+ H+ S9 l2 G2 l
13.     backButton.show();
    
14.   });
    
15. 
    
16.   onDestroy(() => {
    8 Z7 [8 w, H+ P* o7 |, v/ H, M5 c
17.     backButton.hide();
    
18.   });
    : p: X. d! j" J8 O: t, C( {$ i6 l' X
19. </script>
    
20. 
    5 q1 d. F0 r- Z* j7 p
21. <template></template>

复制代码

Hooks​useSignal​

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

1. <script>
   
2.   import { onMount, onDestroy } from 'svelte';
   
3.   import { backButton, useSignal } from '@telegram-apps/sdk-svelte';
   1 F7 S% M' X. `
4. 
   
5.   const isVisible = useSignal(backButton.isVisible);
   
6. 
   
7.   $: console.log('The button is', isVisible.value ? 'visible' : 'invisible')
   3 `0 r, S0 V; {2 I" a9 {  [
8. 
   
9.   onMount(() => {
   
10.     backButton.show();
    
11.   });
    
12. 
    
13.   onDestroy(() => {
    % H( K  a3 p# {
14.     backButton.hide();
    8 c7 a- g( C" {4 `" |9 q. M, @  D
15.   });
    ) Q* X4 S, c& q3 b$ s
16. </script>
    7 p2 B& G) i5 V( y$ d  U& S
17. 
    $ }1 V5 I. R0 f5 o, p& z
18. <template></template>

复制代码

useLaunchParams​

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

1. <script>
   
2.   import { useLaunchParams } from '@telegram-apps/sdk-svelte';
   
3. 
   
4.   const lp = useLaunchParams();
   
5. </script>
   
6. 
   % Q1 U5 U+ C/ d2 h
7. <template>
   5 N* t8 Z8 {  x
8.   <div>Start param: {{ lp.startParam }}</div>
   
9. </template>

复制代码