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

riyad

主题参数​

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

解析​

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

Usage Example :

1. import { parseThemeParams } from '@telegram-apps/sdk';
   
2. 
   / e: b6 P; O6 \
3. parseThemeParams({
   
4.   accent_text_color: "#6ab2f2",
   9 l" ~( W% y( o7 Z
5.   bg_color: "#17212b",
   
6.   button_color: "#5288c1",
   # u! |& e$ ~0 |/ Q) ~
7.   button_text_color: "#ffffff",
   
8.   destructive_text_color: "#ec3942",
   ) u- Z* i3 w  L5 E9 ^3 q$ g
9.   header_bg_color: "#17212b",
   
10.   hint_color: "#708499",
    
11.   link_color: "#6ab3f3",
    : U& G& J6 T! T
12.   secondary_bg_color: "#232e3c",
    - ?/ w# u% Q7 Y* q$ k  m( y
13.   section_bg_color: "#17212b",
    2 h9 b' q$ B' `4 Z
14.   section_header_text_color: "#6ab3f3",
    / k+ {$ ^  c2 \1 W$ K4 }9 y; z
15.   subtitle_text_color: "#708499",
    # C9 l6 U8 [! p3 o
16.   text_color: "#f5f5f5"
    ( V) e/ n6 s3 r9 [
17. });

复制代码

Expected Result :

1. const result = {
   
2.   accentTextColor: "#6ab2f2",
   
3.   bgColor: "#17212b",
   ( Y) k1 c0 G1 j6 u. u
4.   buttonColor: "#5288c1",
   " [0 d# k: J. I* y, U# E2 g
5.   buttonTextColor: "#ffffff",
   
6.   destructiveTextColor: "#ec3942",
   * v( s" h1 G0 E! r8 ]! H3 C, Q
7.   headerBgColor: "#17212b",
   
8.   hintColor: "#708499",
   
9.   linkColor: "#6ab3f3",
   
10.   secondaryBgColor: "#232e3c",
    $ z  N0 t* h+ {: \, C
11.   sectionBgColor: "#17212b",
    9 q' i0 x* g6 s. A/ y
12.   sectionHeaderTextColor: "#6ab3f3",
    
13.   subtitleTextColor: "#708499",
    
14.   textColor: "#f5f5f5"
    ) I# x6 C' Z: e; o) `7 U9 B5 H8 Y2 w
15. };

复制代码

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

序列化​

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

1. import { serializeThemeParams } from '@telegram-apps/sdk';
   
2. 
   : f# N& M: |& O) A" c% L: |
3. serializeThemeParams({
   9 H/ G0 a: Q  n3 n  z3 Q
4.   accentTextColor: "#6ab2f2",
   
5.   bgColor: "#17212b",
   2 U0 e8 L( {3 Q5 u
6.   buttonColor: "#5288c1",
   7 P0 n% h/ Z  O5 O. W7 _4 N+ W0 W
7.   buttonTextColor: "#ffffff",
   
8.   destructiveTextColor: "#ec3942",
   + ?' R- f2 g3 }! s
9.   headerBgColor: "#17212b",
   
10.   hintColor: "#708499",
    7 W; f# L2 O4 w- d  @
11.   linkColor: "#6ab3f3",
    ( x# d( D( a+ C! \9 _1 J$ w. V& L& ^
12.   secondaryBgColor: "#232e3c",
    : F0 {% N$ R$ F) I0 S
13.   sectionBgColor: "#17212b",
    % V/ ?% v4 ?. h! t! _
14.   sectionHeaderTextColor: "#6ab3f3",
    * N& Q) q6 j, r
15.   subtitleTextColor: "#708499",
    
16.   textColor: "#f5f5f5"
    
17. });
    0 W- q; z7 Z9 T0 e  Q8 c6 w
18. 
    : f6 V, c# y4 h9 b5 M) C' J% H* T( c& m
19. // Result:
    0 N9 `, ?) `2 \- y: n( `4 Y4 {
20. // `{
    
21. //   "accent_text_color":"#6ab2f2",
    4 a6 ]) G6 v$ Z  h$ d' T
22. //   "bg_color":"#17212b",
    
23. //   "button_color":"#5288c1",
    ) E4 d- w" Z  m5 j# H3 p
24. //   "button_text_color":"#ffffff",
    ; _* R7 u# `) r" g/ ~5 O
25. //   "destructive_text_color":"#ec3942",
    # |6 D7 N3 ?  [& o9 ?: ?9 K
26. //   "header_bg_color":"#17212b",
    ' P; d' _* h* A# M
27. //   "hint_color":"#708499",
    
28. //   "link_color":"#6ab3f3",
    
29. //   "secondary_bg_color":"#232e3c",
    6 N& K4 o4 b+ Z* j7 x9 D! x- o1 N
30. //   "section_bg_color":"#17212b",
    
31. //   "section_header_text_color":"#6ab3f3",
    # g7 e. r* n+ n- D' }* R- N
32. //   "subtitle_text_color":"#708499",
    # K# I8 X+ r0 u& e. q0 o0 ~
33. //   "text_color":"#f5f5f5"
    
34. // }`

复制代码

8 I) M/ Y+ V' Q; r0 j4 z
5 k6 s/ }  H  N# Z6 |$ C, a& H
0 s& v+ Z4 J) R$ H) {3 x8 Z/ F