Telegram 小程序 | TypeScript @telegram-apps/sdk-vue

riyad

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

7 C6 R) l- v6 Z/ \6 L6 c* o

TIP

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

9 H: P" U9 T) i4 h安装​

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

pnpm :

1. pnpm i @telegram-apps/sdk-vue

复制代码

npm :

1. npm i @telegram-apps/sdk-vue

复制代码

yarn :

1. yarn add @telegram-apps/sdk-vue

复制代码

INFO

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

用法​

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

index.tsx

1. import { createApp } from 'vue';
   4 `( c. I( C' L5 e& z; F
2. import { init, backButton } from '@telegram-apps/sdk-vue';
   " S  ~2 V8 Q! ~% }1 D$ T( @  B
3. 
   
4. import { BackButton } from './BackButton.vue';
   3 q- ^$ k( }- M8 h3 a& a9 O# D
5. 
   + V$ W+ `4 Q5 N! t# J( }
6. // Initialize the package.
   
7. init();
   ! E# B" ~" ~* P7 T, F$ ^
8. 
   5 Y: z6 E& y( l$ o5 X
9. const app = createApp(BackButton);
   ) j' @) z( H, Z. o/ ?, C
10. 
    
11. // Mount the Back Button, so we will work with
    3 a! J! @' @/ j" o" ?
12. // the actual component properties.
    7 _8 u# w  S5 d9 W5 e: ]3 p
13. backButton.mount();
    . g8 c/ ~! d  B
14. 
    % _8 q. D; B. u
15. app.mount('#root');

复制代码

BackButton.vue

1. /**
   3 |/ h' V! `# r7 I2 V  E# H
2. * Component which controls the Back Button visibility.
   ) x7 o% ^$ ?) X- o' {  J
3. */
   
4. <script setup lang="ts">
   ; i" ^6 i( H0 f. i2 [1 R
5. import { watchEffect, onMounted, onUnmounted } from 'vue';
   
6. import { backButton, useSignal } from '@telegram-apps/sdk-vue';
   8 T) p1 a: M0 ~$ F
7. 
   3 L3 B6 C- c5 f0 J$ Z, w
8. const isVisible = useSignal(backButton.isVisible);
   
9. 
   $ M. K$ |# x" {# L+ K
10. watchEffect(() => {
    
11.   console.log('The button is', isVisible.value ? 'visible' : 'invisible');
    ( ~+ X, f1 [2 E2 ~
12. });
    6 K5 _* O3 O3 Z3 Y( }
13. 
    
14. onMounted(() => {
    
15.   backButton.show();
    / i! v8 n4 o$ [. d7 {0 n0 M
16. });
    1 E) y  I+ q1 ^4 j8 `7 P
17. 
    
18. onUnmounted(() => {
    
19.   backButton.hide();
    
20. });
    
21. </script>
    9 U* e9 l$ ]8 H1 B! Z9 X
22. 
    
23. <template></template>

复制代码

Hooks​useSignal​

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

1. <script setup lang="ts">
   
2. import { watchEffect, onMounted, onUnmounted } from 'vue';
   
3. import { backButton, useSignal } from '@telegram-apps/sdk-vue';
   
4. 
   9 m3 M2 h8 K' h
5. const isVisible = useSignal(backButton.isVisible);
   
6. 
   1 W9 @( N5 V' J* \( a$ i) ]
7. watchEffect(() => {
   % b  @% i5 \7 l5 V" L' k
8.   console.log('The button is', isVisible.value ? 'visible' : 'invisible');
   . m6 N7 ^7 `5 a9 \7 i
9. });
   
10. 
    
11. onMounted(() => {
    
12.   backButton.show();
    
13. });
    
14. 
    
15. onUnmounted(() => {
    
16.   backButton.hide();
    6 Z0 }& h* l! k! N9 _
17. });
    
18. </script>
    
19. 
    ; n, \. Y% `" o$ c
20. <template></template>

复制代码

useLaunchParams​

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

1. <script setup lang="ts">
   
2. import { useLaunchParams } from '@telegram-apps/sdk-vue';
   
3. 
   
4. const lp = useLaunchParams();
   0 G( W7 M5 t5 n! Y, J$ F* U
5. </script>
   
6. 
   
7. <template>
   
8.   <div>Start param: {{ lp.startParam }}</div>
   $ ]8 b7 E) c9 g; q4 w/ N+ [# \
9. </template>

复制代码