@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.


 

backButton.mount();

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

BackButton.ts

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

/**
 * 控制返回按钮可见性的组件。
 */
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;
}

挂钩

使用信号

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

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.show().'visible' : 'invisible');
  });

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

  return null;
}

使用启动参数

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

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

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