6.2.1 概览
3 分钟阅读
6.2.1 概览
通过 Kotlin Multiplatform，Kotlin 为 Web 开发提供了两种方式：
两种方式都让你能在 Web 应用中共享代码，但它们支持不同的用例，在目标浏览器支持等技术层面也有所不同。
Kotlin/JS
Kotlin/JS 通过把你的代码、标准库以及所有受支持的依赖转译为 JS，让 Kotlin 应用可以在 JavaScript (JS) 环境中运行。
使用 Kotlin/JS 开发时，你既可以在浏览器中运行应用，也可以在 Node.js 环境中运行。
提示： 关于配置 Kotlin/JS 目标的信息，请参阅配置 Gradle 项目指南。
Kotlin/JS 用例
当你的目标是以下情形时，Kotlin/JS 是合适的选择：
与 JavaScript/TypeScript 代码库共享业务逻辑
如果你需要把 Kotlin 代码（例如领域逻辑或数据逻辑）与原生 JavaScript/TypeScript 应用共享，Kotlin/JS 目标提供了：
- 与 JavaScript/TypeScript 的直接互操作。
- 极小的互操作开销（例如避免不必要的数据复制）。这让共享代码可以平滑地融入基于 JS 的工作流。
用 Kotlin 构建不共享代码的 Web 应用
对于 Web 应用完全用 Kotlin 实现、不与其他平台（iOS、Android 或桌面）共享的项目，基于 HTML 的方案能提供更好的控制力。
基于 HTML 的方案可以改善 SEO 和可访问性，也提供更好的浏览器集成，包括页内查找和页面翻译等功能。
对于基于 HTML 的方案，Kotlin/JS 支持多种方式：
- 使用基于 Compose HTML 的框架（例如 Kobweb 或 Kilua），以 Compose 风格的架构构建 UI。
- 使用带 Kotlin 封装的 React 方案，在 Kotlin 中实现 React 组件。
Kotlin/Wasm
Beta
把 Kotlin 代码编译为 WebAssembly (Wasm)，让应用能够在支持 Wasm 并满足 Kotlin 要求的环境和设备上运行。
在浏览器中，Kotlin/Wasm 让你可以用 Compose Multiplatform 构建 Web 应用。在浏览器之外，它运行在独立的 Wasm 虚拟机中，通过 WebAssembly 系统接口 (WASI) 访问平台 API。
使用 Kotlin/Wasm 开发时，你可以面向：
wasmJs：用于在浏览器或 Node.js 中运行。wasmWasi：用于在支持 WASI 的 Wasm 环境中运行，例如 Wasmtime、WasmEdge 等。
提示： 关于配置 Kotlin/Wasm 目标的信息，请参阅配置 Gradle 项目指南。
Kotlin/Wasm 用例
如果你想在多个平台之间共享逻辑和 UI，请使用 Kotlin/Wasm。
用 Compose Multiplatform 构建跨平台应用
如果你想在包括 Web 在内的多个平台间共享逻辑和 UI，Kotlin/Wasm 结合 Compose Multiplatform 可以提供共享的 UI 层：
- 确保所有平台的 UI 实现保持一致。
- 使用 Wasm 获得更好的渲染效果和更平滑的 UI 更新，例如响应式动画。
- 支持最新版本的 WebAssembly 垃圾回收 (WasmGC) 提案，这让 Kotlin/Wasm 能在所有主流现代浏览器上运行。
选择你的 Web 方案
下表根据你的用例总结了推荐的目标：
| 用例 | 推荐目标 | 说明 |
| 共享业务逻辑，但使用 Web 原生 UI | Kotlin/JS | 提供与 JS 的直接互操作和极小的开销。 | | 同时共享 UI 和业务逻辑 | Kotlin/Wasm | 配合 Compose Multiplatform 提供更好的渲染性能。 | | 不共享 UI | Kotlin/JS | 允许使用 Kobweb、Kilua 或 React 等基于 HTML 的框架，沿用现有的 JS 生态和工具链来构建 UI。 |
注意： 如果你在选择合适的目标时需要指导，欢迎加入我们的 Slack 社区。你可以询问平台差异、性能考量以及针对具体用例的推荐实践。
Web 目标的兼容模式
你可以为 Web 应用启用兼容模式，确保它在所有浏览器上开箱即用。在该模式下，你可以为现代浏览器用 Wasm 构建 UI，而较旧的浏览器则回退到 JS。
兼容模式通过同时为 js 和 wasmJs 目标进行交叉编译来实现。进一步了解 Web 兼容模式以及如何启用它。