Kuikly Web與微信小程序快速上手一份代碼同時交付H5和小程序雙端【免費下載鏈接】KuiklyUI基于KMP技術(shù)的高性能、全平臺開發(fā)框架具備統(tǒng)一代碼庫、極致易用性和動態(tài)靈活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本倉庫為Github倉庫鏡像PR或Issue請移步至Github發(fā)起感謝支持項目地址: https://gitcode.com/Tencent-TDS/KuiklyUIKuikly 是基于 KMPKotlin Multiplatform技術(shù)的高性能全平臺開發(fā)框架。本文手把手帶你為已有 Kuikly 工程接入 H5 與微信小程序?qū)崿F(xiàn)一份代碼同時交付 Web 與小程序雙端快速完成雙端上線。如果你已經(jīng)在用 Kuikly 做 Android / iOS 業(yè)務大概率也聽說過它最誘人的一點業(yè)務代碼只寫一份平臺殼工程負責渲染。H5 和微信小程序正是這一特性的最佳證明——兩者都由同一個 core-render-web/ 渲染器把 Kotlin 代碼編譯成 JS分別跑在瀏覽器和微信小程序的 JS 環(huán)境里。 上圖是 Kuikly 的整體架構(gòu)Core 層承載跨端業(yè)務邏輯Render 層負責把 UI 指令映射到各平臺原生/DOM 環(huán)境。Web Render 就是其中面向瀏覽器與小程序的渲染實現(xiàn)。Kuikly 一份代碼為什么能同時輸出 H5 和小程序先理解原理后面配置時就不會迷路組成部分作用demo/ 業(yè)務模塊平臺無關(guān)的頁面與業(yè)務邏輯Kotlin 編寫只寫一次core-render-web/base/Web 渲染器的公共核心core-render-web/h5/面向瀏覽器的 H5 運行時core-render-web/miniapp/面向微信小程序的運行時h5App/H5 殼工程頁面入口、自定義模塊miniApp/小程序殼工程含dist殼模板也就是說頁面邏輯在業(yè)務模塊里共享H5 和小程序各自只有一個很薄的殼工程負責初始化渲染器、注冊平臺能力如 toast、緩存。這就是一份代碼雙端交付的工程形態(tài)。準備工作創(chuàng)建Kuikly跨端工程接入 H5 或小程序前你需要先有一個 Kuikly 工程含 Android / iOS 殼工程與 shared 業(yè)務模塊。兩種途徑方式一腳手架插件新建推薦在 Android Studio 中選擇File - New - New Project - Kuikly Project Template方式二克隆示例倉庫git clone https://gitcode.com/Tencent-TDS/KuiklyUI克隆下來即可看到 androidApp/、iosApp/、demo/ 等目錄其中demo就是共享業(yè)務模塊。環(huán)境要求可參考 docs/QuickStart/env-setup.md工程創(chuàng)建流程詳見 docs/QuickStart/common.md。確認工程能正常跑通 Android 或 iOS 后就可以按需給同一個工程追加H5 與小程序兩個端了——業(yè)務代碼零改動。Kuikly H5接入3步新建h5App模塊并跑通瀏覽器預覽H5 接入的核心思路新建h5App模塊 → 引入 Web Render 依賴 → 用 Gradle 任務啟動 dev server。完整文檔見 docs/QuickStart/h5.md。第 1 步把 h5App 加入工程依賴在根目錄settings.gradle.kts中追加一行include(:h5App)第 2 步配置構(gòu)建并同步依賴h5App的build.gradle.kts會引入core-render-web:base與core-render-web:h5并把業(yè)務 Bundle 打包進 Web 產(chǎn)物。配置完成后在 Android Studio 中執(zhí)行 Gradle Sync?? 注意build.gradle.kts中 Kuikly core 的依賴版本要與業(yè)務模塊如demo保持一致。第 3 步啟動 H5 調(diào)試服務# 啟動業(yè)務 dev server首次需 npm install npm run serve # 構(gòu)建業(yè)務 Debug 版 JS Bundle ./gradlew :shared:packLocalJsBundleDebug # 啟動 h5App 瀏覽器服務并拷貝靜態(tài)資源 ./gradlew :h5App:jsBrowserDevelopmentRun -t ./gradlew :h5App:copyAssetsToWebpackDevServer瀏覽器打開http://localhost:8080/?page_namerouter即可看到 Kuikly 頁面在 H5 端運行效果與 App 端完全一致。Kuikly小程序接入3步新建miniApp模塊并在微信開發(fā)者工具中預覽小程序接入與 H5 高度對稱只是產(chǎn)物目標換成了微信小程序環(huán)境。完整文檔見 docs/QuickStart/Miniapp.md。第 1 步把 miniApp 加入工程依賴include(:miniApp)第 2 步配置構(gòu)建miniApp的build.gradle.kts引入core-render-web:base與core-render-web:miniappWebpack 目標設為node以適配小程序 JS 環(huán)境構(gòu)建后自動把產(chǎn)物同步到miniApp/dist殼工程中。第 3 步編譯并用微信開發(fā)者工具打開# 構(gòu)建業(yè)務 Debug 版 ./gradlew :shared:packLocalJsBundleDebug # 構(gòu)建 miniApp 并同步到 dist 目錄 ./gradlew :miniApp:jsMiniAppDevelopmentWebpack ./gradlew :miniApp:copyAssets然后用微信開發(fā)者工具打開miniApp/dist目錄按實際頁面在app.json的pages數(shù)組中注冊頁面可用dist/create_page.sh腳本生成頁面模板編譯即可運行。 小提示小程序首頁建議在renderView參數(shù)里顯式配置pageName路由更穩(wěn)定頁面模板細節(jié)可參考 miniApp/README.md。H5與微信小程序調(diào)試技巧及常見問題雙端都支持SourceMap 調(diào)試可以直接斷點查看 Kotlin 源碼H5 調(diào)試瀏覽器 DevTools 在h5App與業(yè)務模塊的build.gradle.kts中開啟 sourcemap詳見 docs/DevGuide/h5-debug.md小程序調(diào)試微信開發(fā)者工具 開啟 sourcemap 后可直接定位到 Kotlin 源碼行詳見 docs/DevGuide/miniapp-debug.md業(yè)務代碼需要區(qū)分平臺時無需多套邏輯分支文件讀取頁面參數(shù)即可H5 端pageData.params.optString(is_H5) 1小程序端pageData.params.optString(is_wx_mp) true遇到接入問題頁面跳轉(zhuǎn)失敗、資源加載異常等優(yōu)先查閱 docs/QA/miniapp-qa.md 中的小程序常見問題清單。寫在最后一次開發(fā)雙端交付回顧一下你得到的東西? 同一份 Kotlin 業(yè)務代碼H5 與小程序共用? H5 通過 dev server 秒級預覽適合營銷頁、活動頁快速上線? 小程序殼工程開箱即用微信開發(fā)者工具直接編譯? 雙端均支持 SourceMap 源碼級調(diào)試排障成本大幅降低。延伸閱讀H5 工程接入詳解docs/QuickStart/h5.md微信小程序工程接入詳解docs/QuickStart/Miniapp.md小程序與 Kuikly 混用示例miniApp/example/多端工程總覽docs/QuickStart/common.md【免費下載鏈接】KuiklyUI基于KMP技術(shù)的高性能、全平臺開發(fā)框架具備統(tǒng)一代碼庫、極致易用性和動態(tài)靈活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本倉庫為Github倉庫鏡像PR或Issue請移步至Github發(fā)起感謝支持項目地址: https://gitcode.com/Tencent-TDS/KuiklyUI創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Kuikly Web與微信小程序快速上手：一份代碼同時交付H5和小程序雙端
Kuikly Web與微信小程序快速上手一份代碼同時交付H5和小程序雙端【免費下載鏈接】KuiklyUI基于KMP技術(shù)的高性能、全平臺開發(fā)框架具備統(tǒng)一代碼庫、極致易用性和動態(tài)靈活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本倉庫為Github倉庫鏡像PR或Issue請移步至Github發(fā)起感謝支持項目地址: https://gitcode.com/Tencent-TDS/KuiklyUIKuikly 是基于 KMPKotlin Multiplatform技術(shù)的高性能全平臺開發(fā)框架。本文手把手帶你為已有 Kuikly 工程接入 H5 與微信小程序?qū)崿F(xiàn)一份代碼同時交付 Web 與小程序雙端快速完成雙端上線。如果你已經(jīng)在用 Kuikly 做 Android / iOS 業(yè)務大概率也聽說過它最誘人的一點業(yè)務代碼只寫一份平臺殼工程負責渲染。H5 和微信小程序正是這一特性的最佳證明——兩者都由同一個 core-render-web/ 渲染器把 Kotlin 代碼編譯成 JS分別跑在瀏覽器和微信小程序的 JS 環(huán)境里。 上圖是 Kuikly 的整體架構(gòu)Core 層承載跨端業(yè)務邏輯Render 層負責把 UI 指令映射到各平臺原生/DOM 環(huán)境。Web Render 就是其中面向瀏覽器與小程序的渲染實現(xiàn)。Kuikly 一份代碼為什么能同時輸出 H5 和小程序先理解原理后面配置時就不會迷路組成部分作用demo/ 業(yè)務模塊平臺無關(guān)的頁面與業(yè)務邏輯Kotlin 編寫只寫一次core-render-web/base/Web 渲染器的公共核心core-render-web/h5/面向瀏覽器的 H5 運行時core-render-web/miniapp/面向微信小程序的運行時h5App/H5 殼工程頁面入口、自定義模塊miniApp/小程序殼工程含dist殼模板也就是說頁面邏輯在業(yè)務模塊里共享H5 和小程序各自只有一個很薄的殼工程負責初始化渲染器、注冊平臺能力如 toast、緩存。這就是一份代碼雙端交付的工程形態(tài)。準備工作創(chuàng)建Kuikly跨端工程接入 H5 或小程序前你需要先有一個 Kuikly 工程含 Android / iOS 殼工程與 shared 業(yè)務模塊。兩種途徑方式一腳手架插件新建推薦在 Android Studio 中選擇File - New - New Project - Kuikly Project Template方式二克隆示例倉庫git clone https://gitcode.com/Tencent-TDS/KuiklyUI克隆下來即可看到 androidApp/、iosApp/、demo/ 等目錄其中demo就是共享業(yè)務模塊。環(huán)境要求可參考 docs/QuickStart/env-setup.md工程創(chuàng)建流程詳見 docs/QuickStart/common.md。確認工程能正常跑通 Android 或 iOS 后就可以按需給同一個工程追加H5 與小程序兩個端了——業(yè)務代碼零改動。Kuikly H5接入3步新建h5App模塊并跑通瀏覽器預覽H5 接入的核心思路新建h5App模塊 → 引入 Web Render 依賴 → 用 Gradle 任務啟動 dev server。完整文檔見 docs/QuickStart/h5.md。第 1 步把 h5App 加入工程依賴在根目錄settings.gradle.kts中追加一行include(:h5App)第 2 步配置構(gòu)建并同步依賴h5App的build.gradle.kts會引入core-render-web:base與core-render-web:h5并把業(yè)務 Bundle 打包進 Web 產(chǎn)物。配置完成后在 Android Studio 中執(zhí)行 Gradle Sync?? 注意build.gradle.kts中 Kuikly core 的依賴版本要與業(yè)務模塊如demo保持一致。第 3 步啟動 H5 調(diào)試服務# 啟動業(yè)務 dev server首次需 npm install npm run serve # 構(gòu)建業(yè)務 Debug 版 JS Bundle ./gradlew :shared:packLocalJsBundleDebug # 啟動 h5App 瀏覽器服務并拷貝靜態(tài)資源 ./gradlew :h5App:jsBrowserDevelopmentRun -t ./gradlew :h5App:copyAssetsToWebpackDevServer瀏覽器打開http://localhost:8080/?page_namerouter即可看到 Kuikly 頁面在 H5 端運行效果與 App 端完全一致。Kuikly小程序接入3步新建miniApp模塊并在微信開發(fā)者工具中預覽小程序接入與 H5 高度對稱只是產(chǎn)物目標換成了微信小程序環(huán)境。完整文檔見 docs/QuickStart/Miniapp.md。第 1 步把 miniApp 加入工程依賴include(:miniApp)第 2 步配置構(gòu)建miniApp的build.gradle.kts引入core-render-web:base與core-render-web:miniappWebpack 目標設為node以適配小程序 JS 環(huán)境構(gòu)建后自動把產(chǎn)物同步到miniApp/dist殼工程中。第 3 步編譯并用微信開發(fā)者工具打開# 構(gòu)建業(yè)務 Debug 版 ./gradlew :shared:packLocalJsBundleDebug # 構(gòu)建 miniApp 并同步到 dist 目錄 ./gradlew :miniApp:jsMiniAppDevelopmentWebpack ./gradlew :miniApp:copyAssets然后用微信開發(fā)者工具打開miniApp/dist目錄按實際頁面在app.json的pages數(shù)組中注冊頁面可用dist/create_page.sh腳本生成頁面模板編譯即可運行。 小提示小程序首頁建議在renderView參數(shù)里顯式配置pageName路由更穩(wěn)定頁面模板細節(jié)可參考 miniApp/README.md。H5與微信小程序調(diào)試技巧及常見問題雙端都支持SourceMap 調(diào)試可以直接斷點查看 Kotlin 源碼H5 調(diào)試瀏覽器 DevTools 在h5App與業(yè)務模塊的build.gradle.kts中開啟 sourcemap詳見 docs/DevGuide/h5-debug.md小程序調(diào)試微信開發(fā)者工具 開啟 sourcemap 后可直接定位到 Kotlin 源碼行詳見 docs/DevGuide/miniapp-debug.md業(yè)務代碼需要區(qū)分平臺時無需多套邏輯分支文件讀取頁面參數(shù)即可H5 端pageData.params.optString(is_H5) 1小程序端pageData.params.optString(is_wx_mp) true遇到接入問題頁面跳轉(zhuǎn)失敗、資源加載異常等優(yōu)先查閱 docs/QA/miniapp-qa.md 中的小程序常見問題清單。寫在最后一次開發(fā)雙端交付回顧一下你得到的東西? 同一份 Kotlin 業(yè)務代碼H5 與小程序共用? H5 通過 dev server 秒級預覽適合營銷頁、活動頁快速上線? 小程序殼工程開箱即用微信開發(fā)者工具直接編譯? 雙端均支持 SourceMap 源碼級調(diào)試排障成本大幅降低。延伸閱讀H5 工程接入詳解docs/QuickStart/h5.md微信小程序工程接入詳解docs/QuickStart/Miniapp.md小程序與 Kuikly 混用示例miniApp/example/多端工程總覽docs/QuickStart/common.md【免費下載鏈接】KuiklyUI基于KMP技術(shù)的高性能、全平臺開發(fā)框架具備統(tǒng)一代碼庫、極致易用性和動態(tài)靈活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意本倉庫為Github倉庫鏡像PR或Issue請移步至Github發(fā)起感謝支持項目地址: https://gitcode.com/Tencent-TDS/KuiklyUI創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考