@telegram-apps/sdk-vue

Vue.js 软件包提供开发人员在开发迷你应用程序时可能会用到的实用工具。

TIP

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

安装

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

pnpm

pnpm i @telegram-apps/sdk-vue

npm

npm i @telegram-apps/sdk-vue

yarn

yarn add @telegram-apps/sdk-vue

INFO

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

用法

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

index.tsx

import { createApp } from 'vue';
import { init, backButton } from '@telegram-apps/sdk-vue';

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

// Initialize the package.
init();

const app = createApp(BackButton);

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

app.mount('#root');

BackButton.vue

/**
 * Component which controls the Back Button visibility.
 */
<script setup lang="ts">
import { watchEffect, onMounted, onUnmounted } from 'vue';
import { backButton, useSignal } from '@telegram-apps/sdk-vue';

const isVisible = useSignal(backButton.isVisible);

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

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

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

<template></template>

Hooks

useSignal

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

<script setup lang="ts">
import { watchEffect, onMounted, onUnmounted } from 'vue';
import { backButton, useSignal } from '@telegram-apps/sdk-vue';

const isVisible = useSignal(backButton.isVisible);

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

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

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

<template></template>

useLaunchParams

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

<script setup lang="ts">
import { useLaunchParams } from '@telegram-apps/sdk-vue';

const lp = useLaunchParams();
</script>

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