@telegram-apps/sdk-svelte

Svelte.js 软件包提供了开发人员在开发微型 应用程序时可能有用的实用工具。

TIP

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

安装

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

pnpm

pnpm i @telegram-apps/sdk-svelte

npm

npm i @telegram-apps/sdk-svelte

yarn

yarn add @telegram-apps/sdk-svelte

INFO

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

用法

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

index.svelte

<script>
  import { init, backButton } from '@telegram-apps/sdk-svelte';

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

  // Initialize the package.
  init();
</script>

<template>
  <BackButton />
</template>

BackButton.svelte

/**
 * Component which controls the Back Button visibility.
 */
<script>
  import { onMount, onDestroy } from 'svelte';
  import { backButton, useSignal } from '@telegram-apps/sdk-svelte';

  const isVisible = useSignal(backButton.isVisible);

  $: console.log('The button is', isVisible.value ? 'visible' : 'invisible')

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

  onDestroy(() => {
    backButton.hide();
  });
</script>

<template></template>

Hooks

useSignal

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

<script>
  import { onMount, onDestroy } from 'svelte';
  import { backButton, useSignal } from '@telegram-apps/sdk-svelte';

  const isVisible = useSignal(backButton.isVisible);

  $: console.log('The button is', isVisible.value ? 'visible' : 'invisible')

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

  onDestroy(() => {
    backButton.hide();
  });
</script>

<template></template>

useLaunchParams

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

<script>
  import { useLaunchParams } from '@telegram-apps/sdk-svelte';

  const lp = useLaunchParams();
</script>

<template>
  <div>Start param: {{ lp.startParam }}</div>
</template>