Telegram小程序 UI | 主题设计

riyad

迷你应用程序是一种网络应用程序，旨在拥有原生外观。 这不仅包括使用模仿本地元素的组件 ，还包括采用父应用程序的颜色 方案。
# \- n1 u+ ~" U7 \* @
* x6 A) d0 ~  {迷你应用程序的颜色目前与 Telegram 应用程序中使用的颜色一致。 迷你应用程序应使用这些颜色，以确保外观的一致性和原生性。
& R( n0 n5 `4 A0 N: i9 W6 `5 D
1 H% ^0 A% j7 }  r* O检索
应用启动参数
( ^* b1 R% d& Y0 I/ Y- n" cTelegram 小应用程序通过名为 tgWebAppThemeParams 的应用启动参数提供主题数据。 该 参数表示一个序列化 JSON 对象，其中包含一系列可选属性，每个 属性描述一种调色板颜色。
. Q/ ^( m1 m! }* P
( f5 a: m1 V9 v) B6 w' e/ B: c下面是一个完整的参数值示例：

{  "accent_text_color": "#6ab2f2",  "bg_color": "#17212b",  "button_color": "#5288c1",  "button_text_color": "#ffffff",  "bottom_bar_bg_color": "#ffffff",  "destructive_text_color": "#ec3942",  "header_bg_color": "#17212b",  "hint_color": "#708499",  "link_color": "#6ab3f3",  "secondary_bg_color": "#232e3c",  "section_bg_color": "#17212b",  "section_header_text_color": "#6ab3f3",  "subtitle_text_color": "#708499",  "text_color": "#f5f5f5"}

- o( p+ L% |; w; U2 O/ ]/ r) j% YTelegram 迷你应用程序方法不过，通过应用启动参数检索主题数据并不是唯一的方法。 Telegram 小应用程序 还允许通过名为 web_app_request_theme 的方法 获取主题。调用此方法后，Telegram 将发出名为 theme_changed 的事件 。 该事件 的有效载荷包含一个名为 theme_params 的属性，其格式如上一节所述。
: @3 n8 s- M% J# c
8 f* z% ^% ]& k8 C1 w5 f背景和标题颜色
; z2 D# ~" L% k5 T$ a* {& }只要迷你应用程序始终显示在原生组件（由 header 和 body 等部分组成）中，Telegram 迷你应用程序也允许更改其颜色。
% b# E- P+ {" D1 {- F1 y
要更改标题颜色，开发人员应使用 web_app_set_header_color 方法，该方法提供了一种通过使用主题键或自定义 RGB 字符串来设置颜色的方法。

* ~+ E' m* U6 b9 K要更新主体颜色，需要使用 web_app_set_background_color 方法。
" ~& L/ D2 k; m  O
0 l/ w0 T6 |" ]2 P
3 Q% ?/ |. e! S! h. u( U: f$ a2 W
- g) @- K2 S6 n* B- `