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