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

riyad

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

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

1 W- o$ S' v* l+ v; r4 V( ^4 W( k安装​

在继续之前，假定您已经安装了 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';
   " A6 ^1 X3 E2 b6 v, p3 }
2. import { init, backButton } from '@telegram-apps/sdk-solid';
   6 d" |( k# G- c! Q3 N9 P; H
3. 
   + _: w& c3 x  P; O; }" P
4. import { BackButton } from './BackButton.js';
   1 h( z1 Y. T9 \* k
5. 
   2 s6 J; k* v) O. m7 z
6. // Initialize the package.
   
7. 
   7 c. a& n# W; K9 V4 r& J
8. 
   & x# A+ z9 J9 J& M1 T# I, L
9. 
   $ L0 ]  ]' w$ X* d; d; Q# R
10. 
    
11. backButton.mount();
    
12. 
    
13. render(() =><BackButton/>, document.getElementById('root')!)；

复制代码

BackButton.ts

1. import { createEffect, onCleanup, onMount } from 'solid-js';
   : X+ B! g5 W; y$ I% ^
2. import { backButton, useSignal } from '@telegram-apps/sdk-solid';
   
3. 
   : a4 ?6 E. p2 \: j9 F
4. /**
   / x# ~1 m9 v! I
5. * 控制返回按钮可见性的组件。
   
6. */
   6 N; i5 u; Y) |
7. export function BackButton() {
   
8.   const isVisible = useSignal(backButton.isVisible);
   
9. 
   4 c1 N$ _3 Z% r( G6 u& q
10.   createEffect(() => {
    4 b& f3 ~3 p- L! w" ?
11.     console.log('The button is', isVisible() ?'visible' : 'invisible');
    4 f) P) @: g/ U7 R8 J) D) e& Q! b" Y
12.   });
    
13. 
    ) H1 @8 B) q5 c2 x  r  ~; a
14.   onMount(() => {
    9 b0 S; x" C& ?+ @
15.     backButton.show();
    / o' w. c, d5 ]. U4 A
16.     onCleanup(() => {
    
17.       backButton.hide();
    ( g2 ^8 j  a& s/ l+ X2 M3 C
18.     });
    
19.   });
    * g+ B: o* y" }5 n6 w5 `
20. 
    ( c8 b% L0 \$ B. z
21.   return null;
    
22. }

复制代码

挂钩​使用信号​

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

1. import { createEffect, onCleanup, onMount } from 'solid-js';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-solid';
   9 K# L' F/ a/ T) T" V" a) i& l- o: \
3. 
   # b7 d$ ?+ H7 u: O2 l8 }0 B$ X
4. function Component() {
   2 @9 O1 P* Y- ]7 b. k
5.   const isVisible = useSignal(backButton.isVisible);
     S+ _0 {, v& X9 N, ?
6. 
   
7.   createEffect(() => {
   
8.     console.log('The button is', isVisible() ? 'visible' : 'invisible'; }; onMount(() => { backButton.show(); onCleanup(() => { backButton.show().'visible' : 'invisible');
   
9.   });
   ' \1 r* o  ^) m+ F( L0 H
10. 
    
11.   onMount(() => {
    
12.     backButton.show();
    ( u) m; d7 a* b1 |' A3 t
13.     onCleanup(() => {
    
14.       backButton.hide();
    % G! u6 k: C$ A$ E9 E5 _
15.     });
    . X" q. w; M" k6 u7 s
16.   });
    
17. 
    1 m" d% y, ?- l9 ]2 N  g# w
18.   return null;
    
19. }

复制代码

使用启动参数​

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

1. import { useLaunchParams } from '@telegram-apps/sdk-solid';
   
2. 
   1 u2 Y0 H* [( e# ?
3. function Component() {
   + z+ {: D" D+ E6 m5 C% \
4.   const lp = useLaunchParams();
   ! e& @0 ~" _# E) ~0 x* N/ I
5.   return<div>Start param: {lp.startParam}</div>;
   
6. }

复制代码

* ?/ N( l' T' V) ?" ^5 Z. S

  p/ h3 K$ n. A! Z0 C