如何在Kotlin/Wasm中设置字符串资源为document.title？

问题分析 #

你遇到的核心问题是：硬编码字符串能正常设置浏览器标题，但通过getString(Res.string.app_name)获取资源时，无论是在GlobalScope协程还是LaunchedEffect中都无法生效。这大概率是资源初始化时机不对或Compose上下文未就绪导致的。

解决方案 #

1. 先完成资源初始化

Compose for Web的Res资源必须先初始化才能正常读取，确保在启动Compose前调用Res.init()配置资源：

2. 在Compose上下文内安全获取并设置标题

使用remember缓存字符串资源（避免重复获取），配合LaunchedEffect在Compose上下文就绪后更新标题：

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    // 初始化资源，根据你的项目结构配置参数（比如资源bundle路径）
    Res.init(/* 你的资源配置 */)

    ComposeViewport(document.body!!) {
        // 缓存字符串资源，仅在首次组合时获取一次
        val appTitle = remember { getString(Res.string.app_name) }

        // 当标题资源变化时自动更新浏览器标签页标题
        LaunchedEffect(appTitle) {
            document.title = appTitle
        }

        MainContent()
    }
}

关键说明 #

• 不要在main函数的GlobalScope中直接调用getString：此时Compose资源体系还未初始化，无法正确读取资源值。
• remember的作用是缓存资源结果，避免每次重组都重复获取资源，提升性能。
• LaunchedEffect(appTitle)会在appTitle变化时重新执行，确保标题始终和资源同步。

内容的提问来源于stack exchange，提问作者Some Noob Student