新闻详情

新闻详情

首页 / 资讯中心 / 详情

Kuikly Web与微信小程序快速上手:一份代码同时交付H5和小程序双端

发布时间:2026/9/27 3:50:03来源:尧图网络
Kuikly Web与微信小程序快速上手:一份代码同时交付H5和小程序双端
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),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

科学代码上的 LLM 怎么选型终裁:SciPy 基准评测与能写/不能写 2026/9/27 5:36:00

科学代码上的 LLM 怎么选型终裁:SciPy 基准评测与能写/不能写

千笔-AIWritePaper https://www.aiwritepaper.com 给课题组挑「写科学代码用哪个模型、配哪些工具」时,最常见的依据是排行榜截图和一句「我用着挺顺」。SciPy 2026 上,Institute for Disease Modeling 的 Cliff Kerr 做了一个更硬的实验(演…

阅读更多 →
一天一个开源项目(第228篇):AX —— Google 开源的「Kubernetes for Agents」,用声明式 YAML 编排十亿级 Agent 任务 2026/9/27 5:35:54

一天一个开源项目(第228篇):AX —— Google 开源的「Kubernetes for Agents」,用声明式 YAML 编排十亿级 Agent 任务

引言 “Agent 是一种全新的工作负载:它们不是无状态的微服务,也不是跑到完成就结束的批处理任务。” 这是"一天一个开源项目"系列的第 228 篇。今天的项目是 AX(仓库地址 google/ax)。 当团队开始批量运行 AI Agent 时…

阅读更多 →
Apereo CAS SSO Warning Cookie(CASPRIVACY)配置指南:实现单点登录访问前的二次确认提示 2026/9/27 5:35:54

Apereo CAS SSO Warning Cookie(CASPRIVACY)配置指南:实现单点登录访问前的二次确认提示

后端认证鉴权单点登录 【免费下载链接】cas Apereo CAS - Identity & Single Sign On for all earthlings and beyond. 项目地址: https://gitcode.com/gh_mirrors/ca/cas 点击查看 免费下载 导读 本文聚焦 Apereo CAS 的 SSO Warning Session Cookie&#xf…

阅读更多 →
MWORKS下光伏逆变器并网建模:PLL与dq电流环控制实战 2026/9/27 5:35:54

MWORKS下光伏逆变器并网建模:PLL与dq电流环控制实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
打工人深度实测Seed-2.1-pro-0915:一张草图跑完全流程?多模态Agent终于靠谱了 2026/9/27 5:35:47

打工人深度实测Seed-2.1-pro-0915:一张草图跑完全流程?多模态Agent终于靠谱了

作为常年泡在方案、预算、PPT里的职场运营人,我一直是AI办公工具的重度使用者,却也总被各类Agent的“半成品体验”劝退:看得懂图却理不清需求,会搜资料却总掺幻觉,能写初稿却改不动第二版,跑长流程半路必“…

阅读更多 →
AI 时代图像取证闸门:失败含义与当天最小实验 2026/9/27 5:35:47

AI 时代图像取证闸门:失败含义与当天最小实验

论文插图、实验照片、新闻配图被质疑「是不是 AI 生成的」,最常见的回应是两种极端:要么放大看看说「没问题」,要么丢进某个检测网站,拿一个百分比当结论。欧洲法证研究所(European Forensic Institute)202…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉