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

riyad

主题参数​

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

解析​

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

Usage Example :

1. import { parseThemeParams } from '@telegram-apps/sdk';
   2 ?% G+ A7 ?  y! T0 b
2. 
   % q! F4 S3 A% a% ^, _% \
3. parseThemeParams({
   
4.   accent_text_color: "#6ab2f2",
   ' {. V& I/ P1 `
5.   bg_color: "#17212b",
   ) c( \! v# P- l4 \: V: R% W! H
6.   button_color: "#5288c1",
   
7.   button_text_color: "#ffffff",
   
8.   destructive_text_color: "#ec3942",
   
9.   header_bg_color: "#17212b",
   ; R% J* l$ u0 j% V" L' ?
10.   hint_color: "#708499",
    & M' I; n* j$ m
11.   link_color: "#6ab3f3",
    # l- f: A- P# _# [8 I6 ^2 m; `+ d
12.   secondary_bg_color: "#232e3c",
    - u, T% J& ~1 K  n
13.   section_bg_color: "#17212b",
    
14.   section_header_text_color: "#6ab3f3",
    1 q1 q; Q8 ^( ~' j3 C3 j
15.   subtitle_text_color: "#708499",
      d' Q& p2 d1 e
16.   text_color: "#f5f5f5"
    . y3 u3 V- S( x( i- |
17. });

复制代码

Expected Result :

1. const result = {
   4 Q/ u. \* T# T& u! m5 d. j
2.   accentTextColor: "#6ab2f2",
   
3.   bgColor: "#17212b",
   
4.   buttonColor: "#5288c1",
   
5.   buttonTextColor: "#ffffff",
   
6.   destructiveTextColor: "#ec3942",
   
7.   headerBgColor: "#17212b",
   
8.   hintColor: "#708499",
   5 C: g2 I" b0 Z! [! z: c
9.   linkColor: "#6ab3f3",
   % A' h0 K0 L# V: W$ A& Z! R8 ?& P
10.   secondaryBgColor: "#232e3c",
    
11.   sectionBgColor: "#17212b",
    
12.   sectionHeaderTextColor: "#6ab3f3",
    
13.   subtitleTextColor: "#708499",
    
14.   textColor: "#f5f5f5"
    
15. };

复制代码

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

: a3 T+ ~$ ]7 j序列化​

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

1. import { serializeThemeParams } from '@telegram-apps/sdk';
   1 ^( K; R+ V# H  j* o2 u
2. 
   6 v1 _1 ~. N' C. j0 B: B
3. serializeThemeParams({
   4 z# y( g- `& q2 [& E3 M6 A' m0 t
4.   accentTextColor: "#6ab2f2",
   
5.   bgColor: "#17212b",
   : [4 z5 m. ~' a
6.   buttonColor: "#5288c1",
   
7.   buttonTextColor: "#ffffff",
   + ~5 y( _* Y) I. N  O1 I: g& X
8.   destructiveTextColor: "#ec3942",
   2 B6 O4 ?" R6 _, u! H# |( m6 P# ]
9.   headerBgColor: "#17212b",
   
10.   hintColor: "#708499",
    
11.   linkColor: "#6ab3f3",
    
12.   secondaryBgColor: "#232e3c",
    
13.   sectionBgColor: "#17212b",
    ' \" l  u8 m2 q2 q
14.   sectionHeaderTextColor: "#6ab3f3",
    9 \6 e9 i& E' N1 }
15.   subtitleTextColor: "#708499",
    
16.   textColor: "#f5f5f5"
    % O2 W( u! i6 I" f0 M! K
17. });
    & L( h8 u7 Q6 U2 l
18. 
    
19. // Result:
      U& P9 n& }* u$ v* F: D9 B4 q
20. // `{
    
21. //   "accent_text_color":"#6ab2f2",
    
22. //   "bg_color":"#17212b",
    
23. //   "button_color":"#5288c1",
    ' L  n5 E7 z" q( U5 m
24. //   "button_text_color":"#ffffff",
    
25. //   "destructive_text_color":"#ec3942",
    
26. //   "header_bg_color":"#17212b",
    ; ?3 Q+ P2 C/ a
27. //   "hint_color":"#708499",
    
28. //   "link_color":"#6ab3f3",
    
29. //   "secondary_bg_color":"#232e3c",
    ; ~; q# b% E5 r1 G0 u
30. //   "section_bg_color":"#17212b",
    
31. //   "section_header_text_color":"#6ab3f3",
    
32. //   "subtitle_text_color":"#708499",
    
33. //   "text_color":"#f5f5f5"
    
34. // }`

复制代码

0 \5 N* q' b7 h7 s' O4 A( h* f9 U
0 I% _% g1 i& r2 y1 ?2 H  f5 }