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({
   
4.   accent_text_color: "#6ab2f2",
   
5.   bg_color: "#17212b",
   1 m, Y/ L" k+ ]; h( Y. Z: O+ m
6.   button_color: "#5288c1",
   
7.   button_text_color: "#ffffff",
   
8.   destructive_text_color: "#ec3942",
   
9.   header_bg_color: "#17212b",
   , o" k0 P2 c' C  m2 M. n
10.   hint_color: "#708499",
    
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",
    
16.   text_color: "#f5f5f5"
    ( K! Q0 }% O- g5 g  u
17. });

复制代码

Expected Result :

1. const result = {
   9 M& s+ N" ?  d' K! O- u; O
2.   accentTextColor: "#6ab2f2",
   ( z) H2 J7 e1 |3 O: q; h0 C2 |
3.   bgColor: "#17212b",
   
4.   buttonColor: "#5288c1",
   * e6 c/ B4 q% d- C7 j
5.   buttonTextColor: "#ffffff",
   0 G. m! p# V; d
6.   destructiveTextColor: "#ec3942",
   
7.   headerBgColor: "#17212b",
   4 j- O: n  h$ I5 _/ c
8.   hintColor: "#708499",
   $ ^5 y3 m' L4 l& ?8 O
9.   linkColor: "#6ab3f3",
   
10.   secondaryBgColor: "#232e3c",
    
11.   sectionBgColor: "#17212b",
    " x9 [8 E2 E0 U6 E% q% x# M
12.   sectionHeaderTextColor: "#6ab3f3",
    : N& z7 E0 N! f- ]! R0 k2 V6 I/ H( P2 j
13.   subtitleTextColor: "#708499",
    3 C8 B" P$ @# s, E+ N' U+ \9 J' N- q
14.   textColor: "#f5f5f5"
    
15. };

复制代码

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

$ A* o3 g( }, h! f$ O; f序列化​

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

1. import { serializeThemeParams } from '@telegram-apps/sdk';
   
2. 
   ; ~) Q4 M" j  e6 N
3. serializeThemeParams({
   3 ?$ m4 S, x. t8 y( i4 Q+ D! ]" f! `
4.   accentTextColor: "#6ab2f2",
   
5.   bgColor: "#17212b",
   % _$ r' i/ o# K1 W  d4 F
6.   buttonColor: "#5288c1",
   
7.   buttonTextColor: "#ffffff",
   & E: S& f( p3 ^/ J
8.   destructiveTextColor: "#ec3942",
   
9.   headerBgColor: "#17212b",
   
10.   hintColor: "#708499",
    
11.   linkColor: "#6ab3f3",
    5 K1 s7 E* i* |. g3 {7 Z
12.   secondaryBgColor: "#232e3c",
    
13.   sectionBgColor: "#17212b",
    
14.   sectionHeaderTextColor: "#6ab3f3",
    # ]8 F0 T9 N  k2 _% S. n  @
15.   subtitleTextColor: "#708499",
    
16.   textColor: "#f5f5f5"
    
17. });
    * a& z1 [+ M) J4 v; A, u- o9 y
18. 
      Z( M$ G2 e4 m* B! n- A4 _. {
19. // Result:
    
20. // `{
    & s3 T4 G  T0 e! U  }) A! {
21. //   "accent_text_color":"#6ab2f2",
    9 s# t, L. {. Z  [; ?8 ?# ~! K
22. //   "bg_color":"#17212b",
    
23. //   "button_color":"#5288c1",
    & k; `% T0 s; c  d# P2 c( o
24. //   "button_text_color":"#ffffff",
    / J; o- n" S0 G8 E. `- ~
25. //   "destructive_text_color":"#ec3942",
    
26. //   "header_bg_color":"#17212b",
    0 K! N# l/ J1 I! Y4 d4 {3 v" `
27. //   "hint_color":"#708499",
    
28. //   "link_color":"#6ab3f3",
    # B8 v( n6 h+ @: t# \5 _& M0 e2 j; ]
29. //   "secondary_bg_color":"#232e3c",
    
30. //   "section_bg_color":"#17212b",
    
31. //   "section_header_text_color":"#6ab3f3",
      z5 i6 v& A8 W& j
32. //   "subtitle_text_color":"#708499",
    
33. //   "text_color":"#f5f5f5"
    
34. // }`

复制代码

  w* J+ K' |( f: |' z( s