Telegram小程序 指南 | 获取应用程序链接

riyad

, D  p* T( {. K% [

简而言之，所有迷你应用程序都是典型的网络应用，每个应用程序都需要独立的 URL 来获取和展示内容。Telegram 不为开发者的应用提供存储空间，因此开发者需要为自己的应用创建存储空间并获取 URL。

Telegram 只接受具有有效 SSL 证书并使用 HTTPS 协议的链接。与生产环境不同，测试环境允许直接使用 IP 地址。

2 e. L% x5 R- p  h; _" w; O( R# h

尽管我们可以使用测试环境来开发应用程序，但环境 往往无法显示出良好的性能。 如果在 测试环境中遇到低性能问题，请考虑切换到生产环境。

导言
在深入了解本指南之前，首先需要了解为什么我们需要一些链接。通常情况下，我们需要应用链接来实现以下目的之一：

用于开发：这些链接是临时的，仅用于通过开发服务器展示应用程序。它们还可以用来与其他用户分享，展示当前的进度。
用于生产：这些链接用于在生产环境中访问应用程序，通常是供普通用户使用的。

本指南将涵盖这两种情况。在 React.js 的模板中，您可以找到实际的链接生成和使用方法。

接下来的章节将使用 Vite作为应用程序的基本打包工具。

6 H2 V2 m1 |, N! S5 b( c) l

关于开发
  B& U- N0 T" d+ B* k应用程序的开发过程被认为是一个持续不断的过程。长期运行的应用程序总是需要维护，为此，应该通过降低准入门槛和减少由此产生的认知负荷来优化这一过程。

开发链接用于查看应用程序当前的开发状态。这些链接可以分为两类：本地链接和远程链接。让我们来仔细看看。

0 q$ L7 ^! i+ i7 T# q

WARNING

开发链接不应在生产中使用。 生产链接不应是动态的 ，必须引用提供迷你应用程序内容的服务器。

在本地环境
2 |. H: r, y$ @2 }  j+ s9 R用于开发的本地链接是指仅对当前设备可用的链接。

流行的打包工具（如 Vite）提供了运行本地服务器的功能，用于开发。因此，您将获得一个可以在 BotFather 中使用或直接在浏览器中打开的 IP 地址。

" @; ~1 o0 ]7 L. ]$ [  H+ f. e2 \

以下是运行开发服务器并返回开发链接的基本 Vite 配置。

6 v6 W) S: C% U! u! s

1. import { defineConfig } from 'vite';
   # S7 z. S* a0 o, Z, F
2. 
   
3. export default defineConfig();</font>

复制代码

; A9 j7 p" m. p

你会在控制台中看到一条信息：

1. VITE ready in 112 ms
   % n; R' L4 s$ q) [( v$ s8 N
2. 
   
3. ➜  Local:   http://localhost:5173
   
4. ➜  press h + enter to show help</font>

复制代码

现在，您可以在浏览器中打开本地链接 (http://localhost:5173) 来查看应用程序。

您可能已经注意到，该链接不符合 BotFather 的要求，因为它必须使用 HTTPS 协议。接下来，我们来获取 HTTPS 链接。

Vite 插件[color=var(--vp-c-brand-1)]​

Vite 的生态系统提供了 @vitejs/plugin-basic-ssl 插件。 允许在指定域上使用自签名 SSL 证书启动应用程序。

下面是一个基本例子：

1. import { defineConfig } from 'vite';
     I3 k  F* l( ^; Q
2. import basicSsl from '@vitejs/plugin-basic-ssl';
   ' X' l+ I* A% u0 c
3. 
   
4. export default defineConfig({
   # h' o- v# s" Z8 m
5.     plugins: [
   
6.     basicSsl(),
   6 R7 H- {( F2 Y7 H5 N7 B8 M
7.   ],
   
8. });</font>

复制代码

您可能会发现还有一些其他有用的选项。 要了解更多相关信息，请访问 插件的 文档 。

启动开发服务器后，您会看到类似的信息：

1. VITE ready in 275 ms
   
2. 
   
3. ➜  Local:   https://localhost:5173
   4 Q0 ^3 m7 r+ r, a0 m- `: N
4. ➜  press h + enter to show help</font>

复制代码

本地链接 (https://localhost:5173) 指向本地开发服务器。在浏览器、Telegram for macOS、Telegram Desktop 或 Telegram Web A/K 中打开此链接时，会出现一条与不信任证书相关的警告消息。

只需将此作为例外，然后继续申请。

mkcert
7 |. Z! d1 t) q* C3 j' bmkcert 是一个允许开发人员生成 SSL 证书及相关私钥的工具。它还会创建一个证书颁发机构，使本地设备信任生成的证书。以下是安装指南。

比方说，您想创建一个只有您的设备知道的自定义域，仅用于开发目的。 让它类似于 tma.internal。 为了让当前设备 知道哪个 IP 与该域相关联，我们应该修改 hosts文件，并将 tma.internal 映射到 127.0.0.1。

然后，运行指定该域的 mkcert 工具，就会收到两个文件：SSL 证书和私钥。 这两个文件都应在 Vite 配置中指定。

下面是使用 mkcert 生成的实体配置 Vite 开发服务器的示例：

1. import { defineConfig } from 'vite';
   , U) p+ B, j& X- c* n" Y# E
2. import { resolve } from 'node:path';
   
3. import { readFileSync } from 'node:fs';
   ) J" b% Y: b) d+ Z& g
4. 
   - t' d) _' m+ Y6 r, Y* y
5. export default defineConfig({
   
6.    server: {
   / s4 {. A6 x/ k2 t/ ?
7.     host: 'tma.internal',
   / }- `* Z0 J' m) u. O4 a. `
8.     https: {
   
9.     cert: readFileSync(resolve('tma.internal.pem')),
   * U  E" o( ?# g# {- C% U3 {
10.     key: readFileSync(resolve('tma.internal-key.pem')),
    " C, X; L/ V4 X  X" ?
11.    },
    
12.   },
    ' ], L, T$ f2 {8 H+ A) d) C
13. });</font>

复制代码

网络

有时，开发人员需要在不同设备上打开应用程序。我们可以通过在 Vite 中使用 host 选项来实现这一功能。

1. import { defineConfig } from 'vite';
     m7 l3 w1 J0 \+ ^  y- W* ]
2. 
   
3. export default defineConfig({
     f( i3 _8 R4 u- V
4.   server: {
   5 v4 ]0 i+ n" L2 Q
5.    host: true,
   
6.   },
   8 u# o  y7 _" j/ Z! P) h
7. });</font>

复制代码

或者，我们可以使用以下命令：vite --host.

启动开发服务器后，您会在控制台中看到类似的信息：

1. VITE v5.2.12  ready in 15 ms
   - Q' v7 j1 d$ f3 Z
2. 
   ' n# J1 g" z6 e$ D$ C
3.   ➜  Local:   http://localhost:5173
   + n0 Z" V. R6 K
4.   ➜  Network: http://172.20.10.8:5173
   
5.   ➜  press h + enter to show help</font>

复制代码

现在，你可以在同一网络的设备上访问 "网络 "链接 (http://172.20.10.8:5173)。

要获取 HTTPS 链接，请参阅本指南的前几节。

( |7 v* I, @  a$ ]: ~用于生产​

获得生产链接也并非难事。 为此，您可以使用流行的免费 静态服务：

• GitHub页面
• Heroku
• Vercel
  ) h: g: A/ X3 `7 _/ R6 @6 G$ n

( [1 K( L( v- D7 V0 |/ M. w) v
: l$ \2 b, i& _: }( E
1 K4 J) c8 ?* m; r