Kuikly Web与微信小程序快速上手一份代码同时交付H5和小程序双端【免费下载链接】KuiklyUI基于KMP技术的高性能、全平台开发框架具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本仓库为Github仓库镜像PR或Issue请移步至Github发起感谢支持项目地址: https://gitcode.com/Tencent-TDS/KuiklyUIKuikly 是基于 KMPKotlin Multiplatform技术的高性能全平台开发框架。本文手把手带你为已有 Kuikly 工程接入 H5 与微信小程序实现一份代码同时交付 Web 与小程序双端快速完成双端上线。如果你已经在用 Kuikly 做 Android / iOS 业务大概率也听说过它最诱人的一点业务代码只写一份平台壳工程负责渲染。H5 和微信小程序正是这一特性的最佳证明——两者都由同一个 core-render-web/ 渲染器把 Kotlin 代码编译成 JS分别跑在浏览器和微信小程序的 JS 环境里。 上图是 Kuikly 的整体架构Core 层承载跨端业务逻辑Render 层负责把 UI 指令映射到各平台原生/DOM 环境。Web Render 就是其中面向浏览器与小程序的渲染实现。Kuikly 一份代码为什么能同时输出 H5 和小程序先理解原理后面配置时就不会迷路组成部分作用demo/ 业务模块平台无关的页面与业务逻辑Kotlin 编写只写一次core-render-web/base/Web 渲染器的公共核心core-render-web/h5/面向浏览器的 H5 运行时core-render-web/miniapp/面向微信小程序的运行时h5App/H5 壳工程页面入口、自定义模块miniApp/小程序壳工程含dist壳模板也就是说页面逻辑在业务模块里共享H5 和小程序各自只有一个很薄的壳工程负责初始化渲染器、注册平台能力如 toast、缓存。这就是一份代码双端交付的工程形态。准备工作创建Kuikly跨端工程接入 H5 或小程序前你需要先有一个 Kuikly 工程含 Android / iOS 壳工程与 shared 业务模块。两种途径方式一脚手架插件新建推荐在 Android Studio 中选择File - New - New Project - Kuikly Project Template方式二克隆示例仓库git clone https://gitcode.com/Tencent-TDS/KuiklyUI克隆下来即可看到 androidApp/、iosApp/、demo/ 等目录其中demo就是共享业务模块。环境要求可参考 docs/QuickStart/env-setup.md工程创建流程详见 docs/QuickStart/common.md。确认工程能正常跑通 Android 或 iOS 后就可以按需给同一个工程追加H5 与小程序两个端了——业务代码零改动。Kuikly H5接入3步新建h5App模块并跑通浏览器预览H5 接入的核心思路新建h5App模块 → 引入 Web Render 依赖 → 用 Gradle 任务启动 dev server。完整文档见 docs/QuickStart/h5.md。第 1 步把 h5App 加入工程依赖在根目录settings.gradle.kts中追加一行include(:h5App)第 2 步配置构建并同步依赖h5App的build.gradle.kts会引入core-render-web:base与core-render-web:h5并把业务 Bundle 打包进 Web 产物。配置完成后在 Android Studio 中执行 Gradle Sync⚠️ 注意build.gradle.kts中 Kuikly core 的依赖版本要与业务模块如demo保持一致。第 3 步启动 H5 调试服务# 启动业务 dev server首次需 npm install npm run serve # 构建业务 Debug 版 JS Bundle ./gradlew :shared:packLocalJsBundleDebug # 启动 h5App 浏览器服务并拷贝静态资源 ./gradlew :h5App:jsBrowserDevelopmentRun -t ./gradlew :h5App:copyAssetsToWebpackDevServer浏览器打开http://localhost:8080/?page_namerouter即可看到 Kuikly 页面在 H5 端运行效果与 App 端完全一致。Kuikly小程序接入3步新建miniApp模块并在微信开发者工具中预览小程序接入与 H5 高度对称只是产物目标换成了微信小程序环境。完整文档见 docs/QuickStart/Miniapp.md。第 1 步把 miniApp 加入工程依赖include(:miniApp)第 2 步配置构建miniApp的build.gradle.kts引入core-render-web:base与core-render-web:miniappWebpack 目标设为node以适配小程序 JS 环境构建后自动把产物同步到miniApp/dist壳工程中。第 3 步编译并用微信开发者工具打开# 构建业务 Debug 版 ./gradlew :shared:packLocalJsBundleDebug # 构建 miniApp 并同步到 dist 目录 ./gradlew :miniApp:jsMiniAppDevelopmentWebpack ./gradlew :miniApp:copyAssets然后用微信开发者工具打开miniApp/dist目录按实际页面在app.json的pages数组中注册页面可用dist/create_page.sh脚本生成页面模板编译即可运行。 小提示小程序首页建议在renderView参数里显式配置pageName路由更稳定页面模板细节可参考 miniApp/README.md。H5与微信小程序调试技巧及常见问题双端都支持SourceMap 调试可以直接断点查看 Kotlin 源码H5 调试浏览器 DevTools 在h5App与业务模块的build.gradle.kts中开启 sourcemap详见 docs/DevGuide/h5-debug.md小程序调试微信开发者工具 开启 sourcemap 后可直接定位到 Kotlin 源码行详见 docs/DevGuide/miniapp-debug.md业务代码需要区分平台时无需多套逻辑分支文件读取页面参数即可H5 端pageData.params.optString(is_H5) 1小程序端pageData.params.optString(is_wx_mp) true遇到接入问题页面跳转失败、资源加载异常等优先查阅 docs/QA/miniapp-qa.md 中的小程序常见问题清单。写在最后一次开发双端交付回顾一下你得到的东西✅ 同一份 Kotlin 业务代码H5 与小程序共用✅ H5 通过 dev server 秒级预览适合营销页、活动页快速上线✅ 小程序壳工程开箱即用微信开发者工具直接编译✅ 双端均支持 SourceMap 源码级调试排障成本大幅降低。延伸阅读H5 工程接入详解docs/QuickStart/h5.md微信小程序工程接入详解docs/QuickStart/Miniapp.md小程序与 Kuikly 混用示例miniApp/example/多端工程总览docs/QuickStart/common.md【免费下载链接】KuiklyUI基于KMP技术的高性能、全平台开发框架具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本仓库为Github仓库镜像PR或Issue请移步至Github发起感谢支持项目地址: https://gitcode.com/Tencent-TDS/KuiklyUI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考