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. 
   8 _7 g4 ^3 O: i5 P3 T
4. import { BackButton } from './BackButton.js';
   ' h, b# r. N4 `) r. I
5. 
   + f, I( a! d- G" R: k
6. // Initialize the package.
   
7. 
   # [; B6 _6 A6 X0 }9 Y+ x0 ~
8. 
   
9. 
   ) D. }+ `& K- j) ^9 y" a# N
10. 
    
11. backButton.mount();
    
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';
   
3. 
   8 Z& V+ H% E2 y: \  N" N
4. /**
   * y" [1 {' X5 H( M6 g' Y; K' x
5. * 控制返回按钮可见性的组件。
   
6. */
   
7. export function BackButton() {
   # R* b: B4 c1 V% {
8.   const isVisible = useSignal(backButton.isVisible);
   
9. 
   
10.   createEffect(() => {
    + i! ^2 P% P' v& {6 {& D9 Q
11.     console.log('The button is', isVisible() ?'visible' : 'invisible');
    . I0 K0 d) R% _3 m7 h4 u
12.   });
    * ]9 r2 l$ T, O! ]% L
13. 
    , h* U- ?: D! C5 M
14.   onMount(() => {
    6 u5 A" I5 v9 [9 R6 K5 {, M* E
15.     backButton.show();
    
16.     onCleanup(() => {
    $ I+ N3 j5 [4 n% g$ d- C( E9 c
17.       backButton.hide();
    
18.     });
    
19.   });
    
20. 
    : `7 a8 p, R) z- U+ m$ v+ J0 U
21.   return null;
    # x9 q" d2 b- G2 U' o* Z! [1 b
22. }

复制代码

挂钩​使用信号​

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

1. import { createEffect, onCleanup, onMount } from 'solid-js';
   
2. import { backButton, useSignal } from '@telegram-apps/sdk-solid';
   
3. 
   ( d, k  O" u  m" T
4. function Component() {
   % w2 q' t! g: I3 {5 ~2 O
5.   const isVisible = useSignal(backButton.isVisible);
   
6. 
   
7.   createEffect(() => {
   9 Y, a! T+ U+ A: K7 [3 \
8.     console.log('The button is', isVisible() ? 'visible' : 'invisible'; }; onMount(() => { backButton.show(); onCleanup(() => { backButton.show().'visible' : 'invisible');
   
9.   });
   7 k0 D- Z6 z2 x/ L1 s
10. 
    
11.   onMount(() => {
    
12.     backButton.show();
    
13.     onCleanup(() => {
    
14.       backButton.hide();
    : @7 y: f# g3 C) U* P- |- T
15.     });
    - ?6 [  A. H  \4 `5 A
16.   });
    ; j/ }. a- M$ P" r2 m2 ^7 a- E
17. 
    8 U- U6 K1 r7 H
18.   return null;
    
19. }

复制代码

使用启动参数​

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

1. import { useLaunchParams } from '@telegram-apps/sdk-solid';
   
2. 
   ! T4 T' ?9 K0 n3 R; m
3. function Component() {
   - E! `4 K0 [* V; M; N' f
4.   const lp = useLaunchParams();
   # T7 y3 t4 y4 p
5.   return<div>Start param: {lp.startParam}</div>;
   
6. }

复制代码

- L- ~6 {4 Q/ A