预加载配置

以 URL 预加载配置更符合页面风格的 WebView 框架样式。

什么是预加载配置

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

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

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

工作原理

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

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

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

URL 预加载配置功能需要 imToken 2.9.1 版本或更高的支持,但配置 URL 参数并不会影响用户的 Web 页面 (或 DApp) 在低版本 imToken 应用上的工作。

所有参数

以下是所有可用的配置接口,在大多数场景中,用户并不需要手动配置每个参数,我们始终建议先尝试 URL 预加载配置可视化工具

头部

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

背景色

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

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

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

前景色

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

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

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

标题

设置头部标题文字。

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

如果你需要在页面加载完成后再次更改标题,推荐使用开放 SDK 提供的修改标题接口

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

左侧标题风格

设置标题为左对齐风格。

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

https://token.im?title_left=1

标题字号

设置标题的字号大小。

https://token.im?title_size=12

透明头部风格

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

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

https://token.im?trans=1

偏移展示头部

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

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

此功能仅在开启 透明头部风格 时才会生效。

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

加载条

背景色

设置加载条的背景色。

前景色

设置加载条的主色调。

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

状态栏 (status bar)

文字风格

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

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

  • 0: 默认。

  • 1: 亮色风格。

  • 2: 暗色风格。

https://token.im?sfg=1

主体内容

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

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

背景色

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

前景色

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

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

可视化工具

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

浏览 URL 预加载配置可视化工具 尝试自动的生成配置地址。

常见问题

在预加载配置中设置 title 以修改标题和使用 WebView SDK 修改标题有什么不同?

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

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

我已经添加了 Query 参数,为什么没有生效?

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

帮助

最后更新于