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

riyad

主题参数​

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

解析​

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

Usage Example :

1. import { parseThemeParams } from '@telegram-apps/sdk';
   4 O( i4 A! F$ w' |* p! T3 H, o
2. 
   - i9 f) L; a4 ~& d# T
3. parseThemeParams({
   2 s' X" t+ _! l
4.   accent_text_color: "#6ab2f2",
   . q; l9 L5 O; o) U. e* d
5.   bg_color: "#17212b",
   6 u6 H  s) V2 D' T) M# P/ e9 @
6.   button_color: "#5288c1",
   3 L3 l+ J- V/ {- p" ^
7.   button_text_color: "#ffffff",
   
8.   destructive_text_color: "#ec3942",
   
9.   header_bg_color: "#17212b",
   
10.   hint_color: "#708499",
    3 Q! ^- z; ^, h3 \5 y* M
11.   link_color: "#6ab3f3",
    
12.   secondary_bg_color: "#232e3c",
    + M  U7 b5 r+ v$ A, ^+ D( S
13.   section_bg_color: "#17212b",
    6 n$ W8 C. D3 S$ ^; N) Y
14.   section_header_text_color: "#6ab3f3",
    : Y: F; n4 N4 v
15.   subtitle_text_color: "#708499",
    0 i$ y+ Q3 o/ G  p
16.   text_color: "#f5f5f5"
    3 X! U: t5 z5 p+ T
17. });

复制代码

Expected Result :

1. const result = {
   
2.   accentTextColor: "#6ab2f2",
   6 t/ v' h/ G. R
3.   bgColor: "#17212b",
   ( ~: V' R# _1 H* h( Y# @
4.   buttonColor: "#5288c1",
   ; w- b6 _: j$ u8 L0 t% i) ^8 s
5.   buttonTextColor: "#ffffff",
   : a4 Z7 ]) X+ N) M% n* b/ E# J. R
6.   destructiveTextColor: "#ec3942",
   1 L8 c9 d: c- d
7.   headerBgColor: "#17212b",
   
8.   hintColor: "#708499",
   
9.   linkColor: "#6ab3f3",
   
10.   secondaryBgColor: "#232e3c",
    
11.   sectionBgColor: "#17212b",
    2 L8 [0 E$ r9 n( P
12.   sectionHeaderTextColor: "#6ab3f3",
    5 X' \0 U0 Y* n
13.   subtitleTextColor: "#708499",
    
14.   textColor: "#f5f5f5"
    
15. };

复制代码

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

; Z* F! k8 T9 M: _3 c+ ~序列化​

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

1. import { serializeThemeParams } from '@telegram-apps/sdk';
   : V9 l$ E; J+ F; g. B9 M5 L
2. 
   ! e& s1 e5 h6 o0 E! f2 K% ]0 z; m1 Q
3. serializeThemeParams({
   " \9 N# B- h' F/ q8 l
4.   accentTextColor: "#6ab2f2",
   
5.   bgColor: "#17212b",
   
6.   buttonColor: "#5288c1",
   8 U" f3 q5 z$ b9 x; W
7.   buttonTextColor: "#ffffff",
   
8.   destructiveTextColor: "#ec3942",
   
9.   headerBgColor: "#17212b",
   
10.   hintColor: "#708499",
    
11.   linkColor: "#6ab3f3",
    ! h+ h7 u# j/ F& }/ S7 u' V: y
12.   secondaryBgColor: "#232e3c",
    % b7 s' F* j& J/ `; f# b
13.   sectionBgColor: "#17212b",
    3 |/ Y0 b) @! y7 h, w; q6 p
14.   sectionHeaderTextColor: "#6ab3f3",
    
15.   subtitleTextColor: "#708499",
    * s6 @: N2 M1 W5 k
16.   textColor: "#f5f5f5"
    
17. });
    % m4 j1 N4 ~  i6 o# p
18. 
    # L0 V% S) n: [
19. // Result:
    
20. // `{
    6 H; i& X: ]) W( X; R* ?/ ^7 W
21. //   "accent_text_color":"#6ab2f2",
    + Q. J. Q- v9 D
22. //   "bg_color":"#17212b",
    * c% Y( s2 ~$ f, [: T* o9 {
23. //   "button_color":"#5288c1",
    
24. //   "button_text_color":"#ffffff",
    
25. //   "destructive_text_color":"#ec3942",
    / z  H5 J$ E( a" M
26. //   "header_bg_color":"#17212b",
    / V2 w8 _/ @1 R0 y) l
27. //   "hint_color":"#708499",
    / o* X( g& \+ F* Y8 q, s: Y# \! A
28. //   "link_color":"#6ab3f3",
    0 c$ X3 M3 Y' q7 T; f- z  ?) A
29. //   "secondary_bg_color":"#232e3c",
    9 J& ]5 ^) ~+ e% ^- m1 J
30. //   "section_bg_color":"#17212b",
    
31. //   "section_header_text_color":"#6ab3f3",
    " J5 ^' R- V) d# ^/ |" Z
32. //   "subtitle_text_color":"#708499",
    2 ]% x3 y% H1 C
33. //   "text_color":"#f5f5f5"
    
34. // }`

复制代码

  h# T$ j5 e& ^" `1 Y8 u