Telegram 小程序 | TypeScript @telegram-apps/sdk-solid @2.x

riyad

Solid.js 软件包提供开发人员在开发微型 应用程序时可能会发现有用的实用程序。

[！提示] 由于本软件包提供了扩展 @telegram-apps/sdk 功能的实用程序函数 ，建议首先查看 SDK 软件包 文档。

安装​

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

pnpm :

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

复制代码

npm :

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

复制代码

yarn :

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

复制代码

INFO

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

使用方法​

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

index.tsx :

1. import { render } from 'solid-js/web';
   
2. import { init, backButton } from '@telegram-apps/sdk-solid';
   
3. 
   
4. import { BackButton } from './BackButton.js';
   ! L& @) w  n  c- K8 @" A& S
5. 
   
6. // Initialize the package.
   
7. 
   / c& Z8 t0 c3 a! B. ~  \
8. 
   & K' R7 g1 h1 s* ]
9. 
   % r+ _. o) U7 H7 F9 a( h. l7 D
10. 
    % h" C( S3 @- ]0 y) N
11. backButton.mount();
    / a0 G0 ]1 K, H  j; s7 m4 M7 Y0 s
12. 
    
13. render(() =><BackButton/>, document.getElementById('root')!)；

复制代码

BackButton.ts

1. import { createEffect, onCleanup, onMount } from 'solid-js';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-solid';
   " X$ C/ g8 e1 ~1 _
3. 
   " k- r- Q- a, G3 Y8 ]  ?. h7 W: a
4. /**
   & u9 M! [: h$ p* m) G
5. * 控制返回按钮可见性的组件。
   ) {; @8 r! N* K
6. */
   ! R6 Y( c- b2 T/ w+ f; u6 l
7. export function BackButton() {
   
8.   const isVisible = useSignal(backButton.isVisible);
   
9. 
   7 s) w% s. h/ m0 q0 G# T
10.   createEffect(() => {
    
11.     console.log('The button is', isVisible() ?'visible' : 'invisible');
    
12.   });
    
13. 
    
14.   onMount(() => {
    6 l. L6 F( A3 k( U
15.     backButton.show();
    + E2 J7 `  k3 ^: q/ z
16.     onCleanup(() => {
    
17.       backButton.hide();
    ' z! J. t6 C% ]5 ^) L
18.     });
    ) s6 F; b# W$ f3 E
19.   });
    
20. 
    % \+ t  |  ^) _" Q
21.   return null;
    ) B1 n) r6 L; u% }3 x
22. }

复制代码

挂钩​使用信号​

一个辅助工具，允许您在应用程序中使用我们的 [信号]（.../telegram-apps-signals.md）。 返回一个 "Solid "信号，每次我们的信号发生变化时，该信号都会更新。

1. import { createEffect, onCleanup, onMount } from 'solid-js';
   6 U* x" v( z! |) z) p4 n1 F2 s' Y/ S
2. import { backButton, useSignal } from '@telegram-apps/sdk-solid';
   
3. 
   . T: F! c. y5 L1 _& t" Z' ^% \, O
4. function Component() {
   + A0 k3 ?; H! }- G7 |, p" i
5.   const isVisible = useSignal(backButton.isVisible);
   
6. 
   
7.   createEffect(() => {
   
8.     console.log('The button is', isVisible() ? 'visible' : 'invisible'; }; onMount(() => { backButton.show(); onCleanup(() => { backButton.show().'visible' : 'invisible');
   * q# I3 u1 W; q% @. F
9.   });
   
10. 
    - v9 O2 h, K9 ~
11.   onMount(() => {
    - q: F+ I) G$ O; _% A6 n1 t
12.     backButton.show();
    4 U# L4 Y$ b7 u! J
13.     onCleanup(() => {
    ' y; Q6 K$ v$ i# D
14.       backButton.hide();
    ; Y& s; `  H: y& Q5 l
15.     });
    ; E6 d" d+ a. n4 U. L! X
16.   });
    7 m6 H- i% z- v1 S2 K, e# M, f- n
17. 
    
18.   return null;
    2 V: R! n+ A+ D1 i2 i% _) u
19. }

复制代码

使用启动参数​

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

1. import { useLaunchParams } from '@telegram-apps/sdk-solid';
   : b2 j+ b+ ]' Y$ P/ _: V
2. 
   ! u* |8 t. Y! c9 G9 L8 k) Q
3. function Component() {
   - x& h. V# [8 v6 w! u$ A' F
4.   const lp = useLaunchParams();
   
5.   return<div>Start param: {lp.startParam}</div>;
   
6. }

复制代码