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

riyad

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

TIP

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

" A6 F2 _* V/ N8 ]# Y
  Y9 H, Q6 u) k. ^8 r安装​

在继续之前，假定您已经安装了 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. 
   " n6 p$ C( x7 l5 {: i5 v4 y8 M1 G
4. import { BackButton } from './BackButton.vue';
   & B6 v8 v5 l0 Y# c8 d: C
5. 
   8 G; ~, m5 T# q2 [9 J: g
6. // Initialize the package.
   
7. init();
   
8. 
   
9. const app = createApp(BackButton);
   # Z& i. ]- `  x+ _; T+ C7 _
10. 
    
11. // Mount the Back Button, so we will work with
    ! e7 p  e  F7 [- d
12. // the actual component properties.
    
13. backButton.mount();
    
14. 
    
15. app.mount('#root');

复制代码

BackButton.vue

1. /**
   
2. * Component which controls the Back Button visibility.
   
3. */
   " Q9 C+ t6 f% ?* p' I
4. <script setup lang="ts">
   4 g$ _$ m* N6 T8 n
5. import { watchEffect, onMounted, onUnmounted } from 'vue';
   
6. import { backButton, useSignal } from '@telegram-apps/sdk-vue';
   ( D1 w% I: u3 R* f( u
7. 
   
8. const isVisible = useSignal(backButton.isVisible);
   
9. 
   0 z5 U' v3 X0 U( c
10. watchEffect(() => {
      x% ]9 _& h5 v3 M  X4 C8 l
11.   console.log('The button is', isVisible.value ? 'visible' : 'invisible');
    
12. });
    . o* \7 i2 q, `. s* E" g
13. 
    
14. onMounted(() => {
    1 y. O! a0 c! V/ ?
15.   backButton.show();
    # v! N0 ], D9 u4 S& M
16. });
    
17. 
    
18. onUnmounted(() => {
    
19.   backButton.hide();
    : ^' o( e, ]/ R. E
20. });
    * [6 O0 O' d( G# l
21. </script>
    # |+ }- I# z) L
22. 
    4 z' f2 j3 R2 I( y  c) t8 l: ?
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. 
   / ]7 D. I$ z) x- o  z
5. const isVisible = useSignal(backButton.isVisible);
   . C) `9 M/ f& t1 z, j9 m2 n
6. 
   7 |" G# B, e- L  Y
7. watchEffect(() => {
   
8.   console.log('The button is', isVisible.value ? 'visible' : 'invisible');
   8 [, {/ k, N% V4 k
9. });
   $ q) z  |( x5 ]3 |: \1 P
10. 
    % U) w' A4 I, e# p, j
11. onMounted(() => {
    * [. s* N, L* d
12.   backButton.show();
    
13. });
    ' @0 S0 v* K' r( M! t9 u
14. 
    / ^* O9 y$ }) t
15. onUnmounted(() => {
    
16.   backButton.hide();
    . s7 b0 d) ]* h* J
17. });
    8 P- T6 S( V* S1 l; }
18. </script>
    0 s- ?; |6 L9 p; i
19. 
    - R0 \& R! p1 k; A/ U6 D/ o
20. <template></template>

复制代码

useLaunchParams​

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

1. <script setup lang="ts">
   
2. import { useLaunchParams } from '@telegram-apps/sdk-vue';
   
3. 
   
4. const lp = useLaunchParams();
   
5. </script>
   
6. 
   
7. <template>
   2 G* d  x) M* W5 w8 G- l
8.   <div>Start param: {{ lp.startParam }}</div>
   
9. </template>

复制代码