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

riyad

Vue.js 软件包提供开发人员在开发迷你应用程序时可能会用到的实用工具。
* [$ ]7 l1 J7 ]# ~
9 N: o8 [5 i" u0 g

TIP

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

+ ?3 X+ `7 L2 i; p4 d! U7 i
* F1 u, p2 i+ R+ g3 a: U8 [安装​

在继续之前，假定您已经安装了 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';
   
2. import { init, backButton } from '@telegram-apps/sdk-vue';
   
3. 
   
4. import { BackButton } from './BackButton.vue';
   : ?/ }2 t& y- i9 O' W
5. 
   
6. // Initialize the package.
   
7. init();
   
8. 
   & ~& Q* x! ~3 |9 h( h
9. const app = createApp(BackButton);
   
10. 
    
11. // Mount the Back Button, so we will work with
    ( b6 W9 w( Z# [2 p
12. // the actual component properties.
    % S4 A) @# j- p/ ]7 m* f
13. backButton.mount();
    
14. 
    . a* S6 |2 I  H, L. N# ~
15. app.mount('#root');

复制代码

BackButton.vue

1. /**
   
2. * Component which controls the Back Button visibility.
   
3. */
   
4. <script setup lang="ts">
   
5. import { watchEffect, onMounted, onUnmounted } from 'vue';
   / b$ X( w7 `/ h' x1 r7 x) J
6. import { backButton, useSignal } from '@telegram-apps/sdk-vue';
   9 l. M+ e+ s; k6 o, T
7. 
   2 A6 D+ t4 m4 h
8. const isVisible = useSignal(backButton.isVisible);
   
9. 
   5 Y7 ^3 t6 Z6 D. Q  f3 F
10. watchEffect(() => {
    
11.   console.log('The button is', isVisible.value ? 'visible' : 'invisible');
    
12. });
    , I9 X; w; z7 K' ?7 V
13. 
    3 s  N" O, y, W
14. onMounted(() => {
      N- b; J0 q# ~. ?5 ]
15.   backButton.show();
    
16. });
    7 w2 M8 t2 }2 n0 ?. \
17. 
    
18. onUnmounted(() => {
    ) }& d+ g+ ^: F. G
19.   backButton.hide();
    
20. });
    ( V( }' n/ z* V6 g' |* ~1 n
21. </script>
    8 ]3 k$ _- q& a) k2 H% k! e2 g
22. 
    
23. <template></template>

复制代码

Hooks​useSignal​

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

1. <script setup lang="ts">
   
2. import { watchEffect, onMounted, onUnmounted } from 'vue';
   , `' l7 d2 L- c
3. import { backButton, useSignal } from '@telegram-apps/sdk-vue';
   
4. 
   
5. const isVisible = useSignal(backButton.isVisible);
   # Y& w6 C% r% Z( O/ P  r+ m' z
6. 
   
7. watchEffect(() => {
   5 H9 v/ K; B) S6 V( X! _
8.   console.log('The button is', isVisible.value ? 'visible' : 'invisible');
   
9. });
   
10. 
    
11. onMounted(() => {
    ) i& g7 p+ ]7 L" \$ Q( J' O
12.   backButton.show();
    ' A- u; k. h5 x( C
13. });
    
14. 
    7 m1 N. h0 x1 P
15. onUnmounted(() => {
    
16.   backButton.hide();
    & L6 R: [2 M+ g1 N) }3 g; A. B7 t
17. });
    
18. </script>
    
19. 
    
20. <template></template>

复制代码

useLaunchParams​

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

1. <script setup lang="ts">
   
2. import { useLaunchParams } from '@telegram-apps/sdk-vue';
   
3. 
   ! ~4 L; Y% k5 B' A2 ]1 S/ n2 D6 Y
4. const lp = useLaunchParams();
   
5. </script>
   
6. 
   
7. <template>
   
8.   <div>Start param: {{ lp.startParam }}</div>
   # p. R% L, l! I$ Q$ r5 Z9 u
9. </template>

复制代码

" B4 Y/ O( ~1 f1 N/ p( W

" d$ I8 K4 X( b  b$ j