> For the complete documentation index, see [llms.txt](https://imtoken.gitbook.io/developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://imtoken.gitbook.io/developers/zh/products/webview/preload-url-options.md).

# 预加载配置

## 什么是预加载配置

在 [WebView SDK](/developers/zh/products/webview/sdk.md#setoptions) 文档中我们可以借助 `layout.setOptions` 更新 WebView 的框架样式，使其更符合你的页面风格，但这也意味着我们必须等到页面完全加载并解析完成后才能修改 WebView 布局。也许你可能发现，在页面尚未加载解析完成 SDK 运行之前，WebView 框架布局还是初始样式，那么我们如何才能确保 Web 应用 (包含 DApp) 在加载时的用户体验呢？

预加载配置允许用户在 URL 地址中定义一些额外参数，以此指定 Web 应用需要的样式与框架布局，imToken 应用会在原生层解析这些参数并渲染响应的布局，并在 WebView 开始之前就准备好相应风格的布局。

![Comparison of preloaded configurations](/files/-MXVcWn9ljOzl5qjC7if)

如上图所示，即时我们的页面仍旧处于加载状态，imToken 应用的 WebView 还是能够预渲染标题与多种颜色，以此确保我们始终拥有一致的用户体验。

## 工作原理

事实上，这些配置仅是 URL 地址尾部携带的 Query 参数，如 `https://token.im?hbg=000000`，不需要额外的 API 或 SDK 支持。

当 imToken 应用读取到任何配置 Query 参数的 URL 地址时，会开始准备序列化和解析，如果来自 Query 参数的配置通过验证，WebView 则会在原生层面添加响应的 View 并渲染为指定样式，最后附加在 WebView 框架上。

此外，用户完全不用担心性能问题，这一切发生的非常快，得益于我们深度优化的 WebView，任何预加载配置都不会对用户的页面加载时间造成负担，所有的布局样式都会预解析并在 DNS 查询前完成渲染。

{% hint style="warning" %}
URL 预加载配置功能需要 imToken `2.9.1` 版本或更高的支持，但配置 URL 参数并不会影响用户的 Web 页面 (或 DApp) 在低版本 imToken 应用上的工作。
{% endhint %}

## 所有参数

以下是所有可用的配置接口，在大多数场景中，用户并不需要手动配置每个参数，我们始终建议先尝试 [URL 预加载配置可视化工具](https://token-url.vercel.app/)。

### 头部

所有的色彩值都不需要额外的 hash 标签 (`#`)，默认格式为 16 进制色彩值。

#### 背景色

设置头部标题位置的背景色，支持渐变色 (指定多个颜色值)。

```bash
# black
https://token.im?hbg=000000

# gradient y 0% -> y 100%
https://token.im?hbg=000000,333333
```

![Header background color](/files/-MXVtnMRIVxwEsRwmE8b)

#### 前景色

设置头部标题位置的前景色。这会影响头部标题文字的颜色与右侧菜单的色彩。(菜单栏的主色调将根据已配置的前景色自动生成)

请注意区分背景色与前景色并使它们有所不同。

```
# red
https://token.im?hfg=ff0000
```

![Header foreground color](/files/-MXVvhMaa-ip_aEhgIVk)

#### 标题

设置头部标题文字。

此标题**仅在页面未加载完成时显示**，当页面加载完成后 WebView 会自动更新为当前页面的 `title` 内容。

如果你需要在页面加载完成后再次更改标题，推荐使用开放 SDK 提供的[修改标题接口](/developers/zh/products/webview/sdk.md#settitle)。

```
# on loading
https://token.im?title=loading
```

#### 左侧标题风格

设置标题为左对齐风格。

相较于居中对齐的标题，这可以允许标题展示更多的文字。

```
https://token.im?title_left=1
```

![Stay on the left side of the title](/files/-MXVyCE2fi5vK2RuqOVG)

#### 标题字号

设置标题的字号大小。

```
https://token.im?title_size=12
```

![font size of header title](/files/-MXVzHKyarqv-QV3IwmQ)

#### 透明头部风格

设置头部标题栏为透明风格，这会使 WebView 头部不再占据高度并且处于透明状态。

当你的 Web 页面上方有自定义横幅时，隐藏 WebView 头部可以获得更加一致的设计风格。

```
https://token.im?trans=1
```

![Hide the background color of the header](/files/-MXW0Z-888gu-fGvqA3t)

#### 偏移展示头部

在页面滚动一段距离后再显示头部。

滚动事件的监听器来自于 WebView 原生层，这不会对 Web 页面造成任何性能负担。

{% hint style="warning" %}
此功能仅在开启 *透明头部风格* 时才会生效。
{% endhint %}

```
https://token.im?trans=1&trans_y=150
```

![Show header after scrolling](/files/-MXWCBCrsRJIRi4Gm3oa)

### 加载条

#### 背景色

设置加载条的背景色。

#### 前景色

设置加载条的主色调。

```
https://token.im?lbg=697689&lfg=f47373
```

![Customized loading bar colors](/files/-MXWDMSQoG7Fl8MBYG4Z)

### 状态栏 (status bar)

#### 文字风格

设置状态栏的文字风格 (主色调)。

状态栏的背景色无需配置，所有平台中状态栏都处于背景透明风格。

* `0`: 默认。
* `1`: 亮色风格。
* `2`: 暗色风格。

```
https://token.im?sfg=1
```

### 主体内容

设置主题内容的颜色并不会影响你的 Web 页面，这仅作用于外部框体。

设置前景色将会影响显示在主体内加载器或占位符颜色。

#### 背景色

设置页面框架主体内容的背景色。

#### 前景色

设置页面框架主体内容的主色调。

```
https://token.im?bbg=000000&bfg=f47373
```

![Set loading backgrounds with primary colors](/files/-MXWEy6-ZZu0jKsbnzLs)

## 可视化工具

创建 URL 预加载配置是非常繁琐的工作，同时你可能还需要调试与验证值的内容以确保有效性，为此我们提供了 URL 预加载配置的可视化配置工具。

浏览 [URL 预加载配置可视化工具](https://dapp-url-generator.vercel.app/) 尝试自动的生成配置地址。

## **常见问题**

> 在预加载配置中设置 `title` 以修改标题和使用 [WebView SDK 修改标题](/developers/zh/products/webview/sdk.md#settitle)有什么不同？

预加载配置中的标题设置仅会在页面未完成加载时显示，一旦页面加载成功后 WebView 就会自动更新为页面自身的标题 (常来自于页面的 `head > title`)。

当页面加载完成后你还需要修改标题文字，请使用 WebView SDK 中的 `setTitle` 完成。

> 我已经添加了 Query 参数，为什么没有生效？

如果你配置的参数超出边界或不合法，WebView 将忽略此参数。请使用可视化工具尝试自动创建。

## 帮助

* 如果你仍旧有与开发者相关问题，请 [创建一个讨论](https://github.com/consenlabs/webview/discussions/new)。
* 如果你想反馈 Bug 或是请求新功能，请 [创建一个问题](https://github.com/consenlabs/webview/issues)。