Kotlin Multiplatform共享模块中如何关联HTML与JS文件？

首先明确：直接在commonMain中实现Android WebView加载本地HTML/JS的逻辑不可行。因为commonMain是跨平台共享代码区，WebView是Android平台专属API，不属于Kotlin Multiplatform的通用API范畴。以下是符合KMP架构的实现思路：

一、核心方案：平台专属代码+共享逻辑抽象 #

将WebView相关操作放到Android端的androidMain目录，同时在commonMain中抽象通用接口，让平台端实现，既保留跨平台逻辑共享，又适配平台特有功能。

1. 在commonMain定义抽象接口 #

创建通用的网页加载接口，统一跨平台的调用逻辑：

// commonMain/src/.../WebContentLoader.kt
interface WebContentLoader {
    fun loadLocalWebContent()
    // 可扩展其他通用方法，如加载远程URL、定义JS交互回调等
}

2. 在androidMain实现接口 #

把原Java的WebView逻辑转为Kotlin，放到Android平台模块：

// androidMain/src/.../AndroidWebContentLoader.kt
class AndroidWebContentLoader(private val webView: WebView) : WebContentLoader {
    override fun loadLocalWebContent() {
        webView.settings.javaScriptEnabled = true
        // HTML/JS文件需放在Android模块的assets目录（app/src/main/assets）
        webView.loadUrl("file:///android_asset/index.html")
    }
}

3. 在Android端调用实现类 #

在Android的Activity中初始化WebView并使用实现类：

// Android模块的MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val webView = findViewById<WebView>(R.id.webview)
        val webLoader = AndroidWebContentLoader(webView)
        webLoader.loadLocalWebContent()
    }
}

二、HTML/JS文件的存放规则 #

• 不能放到commonMain目录：commonMain的资源不会自动分发到各平台，Android端的HTML/JS必须放在**Android模块的src/main/assets**目录下，才能被WebView通过file:///android_asset/路径访问。
• 跨平台共享资源：如果iOS端也需要使用相同的HTML/JS，可以把文件放到commonMain的resources目录，再在各平台编写代码将资源复制到对应可访问位置（比如Android的assets、iOS的Bundle）。

三、可选：JS与Kotlin的交互实现 #

若需要JS调用Kotlin代码，可在androidMain中添加如下逻辑：

// 在AndroidWebContentLoader中扩展
fun setupJsInterface() {
    webView.addJavascriptInterface(JsBridge(), "KotlinBridge")
}

class JsBridge {
    @JavascriptInterface
    fun showMessage(message: String) {
        // 处理JS传递的消息
        Log.d("JsBridge", message)
    }
}

在HTML的JS中即可调用：KotlinBridge.showMessage("Hello from JS!")

内容的提问来源于stack exchange，提问作者mosaicleaf