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({
   3 Y) e4 p* o7 N% B
4.   accent_text_color: "#6ab2f2",
   & n) r0 `( F: O& u
5.   bg_color: "#17212b",
   
6.   button_color: "#5288c1",
   ' }+ U3 r/ R, r- T5 c) r8 f
7.   button_text_color: "#ffffff",
   
8.   destructive_text_color: "#ec3942",
   
9.   header_bg_color: "#17212b",
   
10.   hint_color: "#708499",
    , v4 @" x( R' A% o9 |% v2 f
11.   link_color: "#6ab3f3",
    
12.   secondary_bg_color: "#232e3c",
    
13.   section_bg_color: "#17212b",
    
14.   section_header_text_color: "#6ab3f3",
    
15.   subtitle_text_color: "#708499",
    * h/ n! v7 N3 @1 s
16.   text_color: "#f5f5f5"
    
17. });

复制代码

Expected Result :

1. const result = {
   $ d8 r% _) _, K* B9 G7 F! a& H: y
2.   accentTextColor: "#6ab2f2",
   9 G, ~1 n0 ?0 @( q  g5 T: S6 S
3.   bgColor: "#17212b",
   
4.   buttonColor: "#5288c1",
   ! |2 {, ^* ~6 T
5.   buttonTextColor: "#ffffff",
   4 [+ Z. O7 u, r& l; O
6.   destructiveTextColor: "#ec3942",
   / ?0 {8 @  a2 V* b+ M
7.   headerBgColor: "#17212b",
   8 \# L0 a4 n8 X+ P' H6 d6 ^
8.   hintColor: "#708499",
   
9.   linkColor: "#6ab3f3",
   
10.   secondaryBgColor: "#232e3c",
    
11.   sectionBgColor: "#17212b",
    
12.   sectionHeaderTextColor: "#6ab3f3",
    
13.   subtitleTextColor: "#708499",
    
14.   textColor: "#f5f5f5"
    
15. };

复制代码

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

序列化​

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

1. import { serializeThemeParams } from '@telegram-apps/sdk';
   
2. 
   
3. serializeThemeParams({
   ( l! {# C  u) M0 E
4.   accentTextColor: "#6ab2f2",
   + Z; u1 w' \' d  I
5.   bgColor: "#17212b",
   
6.   buttonColor: "#5288c1",
   7 `- j8 Q3 r2 c
7.   buttonTextColor: "#ffffff",
   
8.   destructiveTextColor: "#ec3942",
   , [6 L7 ]2 n) Q: _
9.   headerBgColor: "#17212b",
   # b' J( [: n" A* A
10.   hintColor: "#708499",
    9 N1 M+ i1 {5 {
11.   linkColor: "#6ab3f3",
    : ~0 |6 z0 F$ V3 A; T. n
12.   secondaryBgColor: "#232e3c",
    
13.   sectionBgColor: "#17212b",
    
14.   sectionHeaderTextColor: "#6ab3f3",
    
15.   subtitleTextColor: "#708499",
    . @- Z: W; Y5 Y
16.   textColor: "#f5f5f5"
    
17. });
    
18. 
    7 G. y8 L- b  O& @; T
19. // Result:
    
20. // `{
      l4 g2 r5 u5 x5 ~, ?- h6 [
21. //   "accent_text_color":"#6ab2f2",
    3 A+ P/ E* d) L4 j6 p
22. //   "bg_color":"#17212b",
    / Y8 \7 p5 I" Q. Q7 m+ ]3 e
23. //   "button_color":"#5288c1",
    7 V: j! w5 D7 R5 k2 g
24. //   "button_text_color":"#ffffff",
    
25. //   "destructive_text_color":"#ec3942",
    $ U- u4 Y6 }, X
26. //   "header_bg_color":"#17212b",
    
27. //   "hint_color":"#708499",
    # z2 r7 N+ m6 X8 ]; j2 Y
28. //   "link_color":"#6ab3f3",
    8 n' C  [: l; Y+ ^& w
29. //   "secondary_bg_color":"#232e3c",
    
30. //   "section_bg_color":"#17212b",
    - c1 O2 A+ k& D; ?
31. //   "section_header_text_color":"#6ab3f3",
    / X  w# j$ R" _  Z, c. y
32. //   "subtitle_text_color":"#708499",
    
33. //   "text_color":"#f5f5f5"
    
34. // }`

复制代码