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

riyad

用于 客户端 SDK 的Solid JS 绑定。 包括钩子、组件和 实用程序，以便在 Telegram Mini Apps 平台上轻松使用 Solid JS。
$ Q" I8 i0 Y. @2 t4 G& s

! k7 v( L% {0 j
安装​

在此之前，我们假定您已经安装了 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

复制代码

SDKProvider​

SDKProvider 是负责提供 SDK 功能的组件。 它接受 acceptCustomStyles: boolean 和 debug: boolean 等属性。 两者都是可选的。

acceptCustomStyles 属性负责接受来自 Telegram 网页版的自定义样式。

debug 属性负责启用调试模式。

1. import { SDKProvider } from '@telegram-apps/sdk-solid';
   ( y! F3 E7 u/ n6 o, M
2. 
   
3. /**
   / f  H8 e( o! n8 V
4. * Root component for the whole project.
   , j8 [/ v4 L) Y2 h6 L/ Q
5. */
   % F; F, T: A& Y% f( K8 |+ x7 X
6. export function Root() {
   
7.   return (
   
8.     <SDKProvider acceptCustomStyles debug>
   * \. b4 N2 `& F: g5 p9 Y2 u; s
9.       <div>My application!</div>
   
10.     </SDKProvider>
    
11.   );
    
12. }

复制代码

Hooks​

该软件包中的每个组件钩子都会返回一个自定义信号。 返回的信号包含一个 属性 error?: unknown，如果在组件 初始化过程中出现问题，该属性将被设置。 调用包含该属性的信号将导致产生相应的 错误。 如果没有错误发生，信号将返回一个组件实例。

为了更好地理解，每个组件钩子都使用各自与组件相关的 init 函数。 如果 init 函数返回的是非承诺值，钩子将立即检索该值。 如果 init 函数 是异步的，那么当组件 仍在初始化时，钩子将返回一个带有 undefined 值的信号。 然后，它将更新为初始化值。

下面就是一个例子：

1. import { useBackButton, useViewport } from '@telegram-apps/sdk-solid';
   " ^" ~& X# v, v! z
2. 
   ! [9 i: K$ A2 F8 s  f6 r& w  J
3. // BackButton initializes synchronously. So, bb will be a signal
   " {5 Q" @& q7 C9 _4 x+ P- C
4. // returning an instance of BackButton.
   * \5 m" U# Y0 g8 J
5. const bb = useBackButton();
   1 c7 p4 _2 |4 ^6 ~% O
6. const bbV = bb(); // will be BackButton
   
7. 
   
8. // Viewport is being initialized asynchronously, so signal may return undefined.
   
9. // After some time it will receive a valid value.
   $ e5 ]9 l, p( e+ O; a( o2 M; f
10. const vp = useViewport();
    
11. const vpV = vp(); // will be undefined
    , p: p# m/ [; k, y4 B6 C0 J9 k  f
12. 
    8 }6 L+ ?& i( E0 W
13. // ...after some time
    / [2 v* y# m& m4 \' H% C. y; s
14. const vpV2 = vp(); // will be Viewport

复制代码

需要注意的是，所有成分的属性都是反应性的。 因此，如果钩子信号返回的值发生变化 ，信号本身不会收到通知。 这是因为 组件本身没有变化，但其属性发生了变化。

让我们来看看这个例子：

1. import { useViewport } from '@telegram-apps/sdk-solid';
   4 e- j( _# [: E) A* B' i  o5 r) }
2. import { createEffect } from 'solid-js';
   & [8 h6 f8 @! K  i: o& `
3. 
   
4. // Let's assume that viewport is already initialized.
   
5. const vp = useViewport();
   
6. 
   1 V1 L7 `+ x8 E* d6 t' C5 g
7. createEffect(() => {
   
8.   // This line of code will not be called if the viewport height
   - G* e# H. e# |( x1 Q( ^; M
9.   // or expansion state changes.
   5 }7 J# r# e5 R( w  k- O7 _9 `* I8 [, e4 G
10.   console.log('Viewport changed', vp());
    
11. });
    $ h& M2 F- ?- c2 T* V
12. 
    
13. createEffect(() => {
    
14.   // But this line of code will be called every time the viewport
    6 R, b4 l/ _7 U( M% H" V$ F9 h* d
15.   // height changes.
    
16.   console.log('Viewport height changed', vp().height);
    
17. });

复制代码

我们拥有这种细粒度的反应能力，以提供最佳性能，就像 Solid 本身一样。

HOCs​

所有软件包的高阶组件都使用了前面所述的钩子。 使用方法相当 简单：

1. import { withBackButton } from '@telegram-apps/sdk-solid';
   9 q* o+ Y" @. w: X7 o% v$ y8 |
2. 
   
3. const MyComponent = withBackButton('bb', (props) => {
   ( H6 @. Y2 H! e+ d$ w" @4 V
4.   createEffect(() => {
   " A. t; `, v2 V7 S, |0 `7 |9 k( T
5.     props.bb().show();
   , r. o/ w6 p+ V
6.   });
   
7.   return null;
   1 H+ c0 K% F, C) l" X9 @
8. });

复制代码

作为第一个参数，您必须传递一个负责接收 钩子结果的组件属性名称的值。 请注意，接收到的值将是一个信号，而不是后面的值。
$ J, G0 W. i' AHooks 和 HOCs 列表​[td]

Hook	HOC	Signal value
useBackButton	withBackButton	BackButton
useBiometryManager	withBiometryManager	BiometryManager 或 undefined
useClosingBehavior	withClosingBehavior	ClosingBehavior
useCloudStorage	withCloudStorage	CloudStorage
useHapticFeedback	withHapticFeedback	HapticFeedback
useInitData	withInitData	InitData
useInvoice	withInvoice	Invoice
useMainButton	withMainButton	MainButton
useMiniApp	withMiniApp	MiniApp
usePopup	withPopup	Popup
useQRScanner	withQRScanner	QRScanner
useSettingsButton	withSettingsButton	SettingsButton
useSwipeBehavior	withSwipeBehavior	SwipeBehavior
useThemeParams	withThemeParams	ThemeParams
useUtils	withUtils	Utils
useViewport	withViewport	Viewport 或 undefined

模板​

我们已经为 Solid JS 创建了一个使用当前软件包的 模板，您可以使用它。