Telegram 小程序 | TypeScript @telegram-apps/sdk @1.x | 主题参数

riyad

主题参数​

本节 SDK 涵盖与 主题参数 相关的主题。

解析​

要解析作为主题参数的值，软件包提供了 parseThemeParams 方法。 该 方法接受一个 JSON 字符串对象或 JavaScript 对象，返回 ThemeParams 接口。 如果提供的数据无效，则会出错。

Usage Example :

1. import { parseThemeParams } from '@telegram-apps/sdk';
   
2. 
   
3. parseThemeParams({
   : y6 B8 f& [# n% s7 i5 o' w8 y( P
4.   accent_text_color: "#6ab2f2",
     q$ k  u1 e  g! v! L/ _* B* y
5.   bg_color: "#17212b",
   
6.   button_color: "#5288c1",
   
7.   button_text_color: "#ffffff",
   
8.   destructive_text_color: "#ec3942",
   
9.   header_bg_color: "#17212b",
   
10.   hint_color: "#708499",
    9 [$ [0 s- X! @1 l( [
11.   link_color: "#6ab3f3",
    
12.   secondary_bg_color: "#232e3c",
    * [$ |) k- t, A$ J( s7 R( v
13.   section_bg_color: "#17212b",
    8 g, ~, f$ {; f: U% m
14.   section_header_text_color: "#6ab3f3",
    
15.   subtitle_text_color: "#708499",
    
16.   text_color: "#f5f5f5"
    $ s4 P1 _* i; [. q2 a
17. });

复制代码

Expected Result :

1. const result = {
   # J/ ~- q$ l* D8 B. O
2.   accentTextColor: "#6ab2f2",
   9 ?, w8 J# E" G! a9 t  H. r0 z; x6 [5 H
3.   bgColor: "#17212b",
   
4.   buttonColor: "#5288c1",
   2 O- n: h7 G( q! K8 c. d
5.   buttonTextColor: "#ffffff",
   
6.   destructiveTextColor: "#ec3942",
   1 y4 `* s0 m: A& [
7.   headerBgColor: "#17212b",
   
8.   hintColor: "#708499",
   
9.   linkColor: "#6ab3f3",
   
10.   secondaryBgColor: "#232e3c",
    
11.   sectionBgColor: "#17212b",
      b6 r! J0 C" P/ C1 J# M
12.   sectionHeaderTextColor: "#6ab3f3",
    ' o$ c5 M1 u4 _0 E/ l2 r+ V3 i
13.   subtitleTextColor: "#708499",
    ; r4 ]; \. H# i8 \1 s' [
14.   textColor: "#f5f5f5"
    
15. };

复制代码

假设每个属性都使用蛇形大小写，它会将其转换为驼峰形大小写。

序列化​

要将主题参数对象表示转换为字符串，开发人员应使用 的 serializeThemeParams 函数：

1. import { serializeThemeParams } from '@telegram-apps/sdk';
   
2. 
   $ @1 c0 c' U" V8 a! a. T
3. serializeThemeParams({
   2 f2 {; [! l% `; A0 m
4.   accentTextColor: "#6ab2f2",
   
5.   bgColor: "#17212b",
   
6.   buttonColor: "#5288c1",
   , G6 ]2 `4 c' s  w) J, E
7.   buttonTextColor: "#ffffff",
   
8.   destructiveTextColor: "#ec3942",
   
9.   headerBgColor: "#17212b",
   
10.   hintColor: "#708499",
    & @( C; m/ }# R, H( B
11.   linkColor: "#6ab3f3",
    7 P& ^4 f* B# a
12.   secondaryBgColor: "#232e3c",
    
13.   sectionBgColor: "#17212b",
    , l  z, `8 N3 `7 I
14.   sectionHeaderTextColor: "#6ab3f3",
    ' {, @4 Q# d2 z% H- T% {
15.   subtitleTextColor: "#708499",
    
16.   textColor: "#f5f5f5"
    
17. });
    , ^8 f: q9 W. y3 |0 J( C3 `1 |
18. 
    
19. // Result:
    
20. // `{
    , ^2 r* z, Y, {* ^3 K$ D
21. //   "accent_text_color":"#6ab2f2",
    
22. //   "bg_color":"#17212b",
    / v/ p0 x! T/ L  l
23. //   "button_color":"#5288c1",
    ) m+ p- E) g+ l! k" M" T& C
24. //   "button_text_color":"#ffffff",
    
25. //   "destructive_text_color":"#ec3942",
    
26. //   "header_bg_color":"#17212b",
    5 _; _  c3 Z9 r/ `- n4 c$ J
27. //   "hint_color":"#708499",
    
28. //   "link_color":"#6ab3f3",
    
29. //   "secondary_bg_color":"#232e3c",
    
30. //   "section_bg_color":"#17212b",
    
31. //   "section_header_text_color":"#6ab3f3",
    & V+ Y4 e7 y9 b. I) V  Y+ @
32. //   "subtitle_text_color":"#708499",
    
33. //   "text_color":"#f5f5f5"
    0 F( u* x" r$ o( _, y6 l- V
34. // }`

复制代码

# {% \! ~# b: s+ ]
, d9 e) X- o0 R4 |- n
3 K5 W- ~: T) Y5 c! R9 S( e