@telegram-apps/sdk-solid@2

Solid.js 包提供了开发者在开发小程序时可能会发现有用的工具。

\

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

安装

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

pnpm

pnpm i @telegram-apps/sdk-solid

npm

npm i @telegram-apps/sdk-solid

yarn

yarn add @telegram-apps/sdk-solid

INFO

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

使用方法

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

index.tsx

import { render } from 'solid-js/web';
import { init, backButton } from '@telegram-apps/sdk-solid';

import { BackButton } from './BackButton.js';

// Initialize the package.
init();

// Mount the Back Button, so we will work with 
// the actual component properties.
backButton.mount();

render(() => <BackButton/>, document.getElementById('root')!);

BackButton.ts

import { createEffect, onCleanup, onMount } from 'solid-js';
import { backButton, useSignal } from '@telegram-apps/sdk-solid';

/**
 * Component which controls the Back Button visibility.
 */
export function BackButton() {
  const isVisible = useSignal(backButton.isVisible);

  createEffect(() => {
    console.log('The button is', isVisible() ? 'visible' : 'invisible');
  });

  onMount(() => {
    backButton.show();
    onCleanup(() => {
      backButton.hide();
    });
  });

  return null;
}

钩子（Hooks）

useSignal

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

import { createEffect, onCleanup, onMount } from 'solid-js';
import { backButton, useSignal } from '@telegram-apps/sdk-solid';

function Component() {
  const isVisible = useSignal(backButton.isVisible);

  createEffect(() => {
    console.log('The button is', isVisible() ? 'visible' : 'invisible');
  });

  onMount(() => {
    backButton.show();
    onCleanup(() => {
      backButton.hide();
    });
  });

  return null;
}

useLaunchParams

返回小程序启动参数的函数。

import { useLaunchParams } from '@telegram-apps/sdk-solid';

function Component() {
  const lp = useLaunchParams();
  return <div>Start param: {lp.startParam}</div>;
}