必填的前景样式配置。foregroundStyle 只能是 light 或 dark。
Host 报告本次设置完成后以 undefined resolve;不会返回当前样式或实际渲染色值。
HbMiniProgramSDKError options 不是对象,或 foregroundStyle 缺失、
不是 light/dark 时以 INVALID_PARAMS 拒绝;当前 Host 未开放该能力时以
METHOD_FORBIDDEN 拒绝,Host 无法处理当前请求时以 REQUEST_UNSUPPORTED 拒绝。
握手失败、SDK 或 Runtime 已销毁、bridge 请求超时以及 Host 设置失败时抛出对应
SDK 错误。
该 API 无需在 package.json#heybox.permissions 中声明权限,也不要求可信用户手势
或平台批准;仍需当前 Host 开放 viewport.setNavigationBarStyle capability。
该方法只控制关闭按钮和状态栏图标/文字的前景明暗,不修改导航栏背景色,也不
改变网页自身的 color-scheme。它不提供读取接口、自动主题模式或恢复默认值;
后续调用可以覆盖先前样式,Host 重建容器后也不应依赖先前调用继续生效。
移动端 Host 将该语义应用到 App 顶部容器和系统状态栏,PC Host 将其应用到桌面 小程序窗口的导航控件;不同操作系统可以采用不同的实际颜色和渲染方式。Browser Dev Host 只更新本地设备预览中的 Host chrome,不能替代真机或桌面客户端验收。
MiniProgramViewportModule.getWindowInfo 只读取窗口几何与安全区域,既不会
返回当前前景样式,也不是调用本方法的前置条件。package.json#heybox.window 只
声明开窗尺寸和可缩放性,与导航栏前景样式互不覆盖。
import hbSDK from '@heybox/hb-sdk'
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
async function syncNavigationBarStyle() {
await hbSDK.viewport.setNavigationBarStyle({
// 深色页面使用浅色前景,浅色页面使用深色前景。
foregroundStyle: colorScheme.matches ? 'light' : 'dark',
})
}
await syncNavigationBarStyle()
const handleColorSchemeChange = () => {
void syncNavigationBarStyle().catch(console.error)
}
colorScheme.addEventListener('change', handleColorSchemeChange)
window.addEventListener('pagehide', () => {
colorScheme.removeEventListener('change', handleColorSchemeChange)
}, { once: true })
设置导航栏关闭按钮与状态栏图标/文字的前景样式。