DOCSEARCHbyAlgolia
Submit Docs

Kuikly UI Framework Documentation

repository·main·Indexed 25 days ago

https://github.com/tencent-tds/kuiklyui

A high-performance, cross-platform UI and logic framework built on Kotlin Multiplatform. Kuikly enables a single codebase for Android, iOS, HarmonyOS, Web, Mini Programs, and macOS. Documentation includes environment setup for HarmonyOS (DevEco Studio 5.1.0+), integration guides, JS module migration for Webpack, and details on the integrated cJSON lightweight JSON parser.

Tokens
228.3K
Snippets
420
Records
1.1K
Agent score
36%

What's inside Kuikly

  1. Overview of Kuikly

    main
    Kuikly is a high-performance, cross-platform UI and logic framework based on Kotlin Multiplatform (KMP). It allows developers to maintain a single codebase across six platforms: Android, iOS, HarmonyOS, Web (Beta), Mini Programs (Beta), and macOS (Alpha). It provides native performance by generating platform-native binaries such as .aar, .framework, and .so files, and supports both declarative and reactive programming paradigms using custom and Compose DSLs.

  2. Overview of WeChat Mini Program API Integration

    main

    Kuikly provides a specialized layer for accessing WeChat Mini Program APIs to ensure type safety and prevent business logic from breaking the cross-platform architecture. While Kuikly offers cross-platform modules (like RouterModule or NetworkModule), WeChat-specific APIs (such as wx.login, wx.scanCode, or wx.showToast) require this dedicated integration to maintain native performance and access platform-exclusive features.

    There are three ways to access these APIs:

    1. Strongly Typed Modules (Recommended): Use pre-defined modules like WXApiModule, WXStorageModule, WXUIModule, etc., for type safety and parameter hints.
    2. Fallback Universal Bridge (WXRawApiModule): Use wxRaw.call to invoke any wx.xxx method directly without creating a new module.
    3. Custom Business Modules: Implement your own strongly typed DSL for frequently used business-specific APIs.

    Note: WXxxxModule only functions on the WeChat Mini Program platform. On other platforms, calls will fail with errMsg = "not supported: not in mini-app". To handle cross-platform logic, check pageData.params.optString("is_wx_mp") == "1".

  4. Overview of Kuikly Compose Documentation Structure

    main

    The Kuikly Compose documentation is organized into five primary categories to guide developers from initial setup to advanced cross-platform extension and migration:

    1. Introduction (入门): Covers overview, getting started, core concepts, and detailed architecture (Compose Runtime → KuiklyApplier → Core → Render).
    2. Development Guide (开发指南): Focuses on core UI tasks including Layout, Components (Material3), State Management, Lists/Scrolling, Modifiers, Animation, Gestures, Navigation, Performance, and Best Practices.
    3. Integration & Extension (集成与扩展): Explains how to integrate with Core, use Modules (Network, Storage), use the Router, implement Dynamic UI, and extend native components across Android, iOS, Web, and HarmonyOS.
    4. Multi-platform & Migration (多端与迁移): Provides guidance on multi-platform development, platform-specific capabilities, developer-specific guides (Android, iOS, Web), and migration paths from Jetpack Compose or custom DSLs.
    5. Reference (参考): Contains component and modifier lists, API difference comparisons with Jetpack Compose, official links, examples, and FAQs.

  5. Overview of KuiklyUI

    main

    Kuikly is a cross-platform UI and logic solution based on Kotlin Multiplatform (KMP). It provides a high-performance framework for developing applications across multiple platforms using a single codebase. It supports declarative and reactive development paradigms, including custom DSL and Compose DSL.

    Supported Platforms:

    • Android
    • iOS
    • HarmonyOS
    • Web (beta)
    • MiniApp (beta)
    • macOS (Alpha)

  6. Overview of Kuikly Compose

    main
    Kuikly Compose is a UI solution that supports the standard Jetpack Compose DSL on top of the Kuikly Core cross-platform engine. It allows developers to write UI code using familiar Compose syntax that can run across multiple platforms. It can be used alongside Kuikly's proprietary DSL, allowing teams to choose the best approach for their specific use case.

  9. Use RecompositionProfiler to debug performance

    main
    The RecompositionProfiler is a built-in tool in Kuikly Compose used to identify recomposition performance issues. It automatically tracks recomposition counts, duration, the State objects triggering changes (prev → now), and parameter-level changes without requiring business code modifications. It supports multiple platforms (iOS, Android, HarmonyOS) and provides a floating overlay for real-time visualization.

  10. Access Kuikly community resources

    main

    The Kuikly community provides several entry points for developers:

    • Component Market: Browse and discover community-shared components.
    • Community Sharing: Access technical articles, tutorials, and practical experience.
    • Q&A: Use the GitHub Discussions section to ask questions or provide answers.
    • GitHub Repository: Access source code, report Bugs via Issues, or submit Pull Requests.

  11. Understand the Kuikly Compose Architecture

    main

    Kuikly Compose uses a dual-stack architecture where the upper layer provides standard Compose semantics for UI description and state management, while the lower layer uses Kuikly Core for cross-platform rendering and dynamic capabilities.

    Key architectural mappings:

    • UI/Foundation/Material3: Migrated from androidx to com.tencent.kuikly.compose.*.
    • Runtime: Fully reuses androidx.compose.runtime (State, Snapshot, Recomposer, SideEffect).
    • Rendering: Replaces AndroidComposeView/Skia with KuiklyApplier which maps Compose tree operations to Kuikly atomic components (KNode).
    • Modifiers: Mapped to Kuikly attributes and events (Attr/Event).

  12. Understand KRThread Task Execution Paths

    main

    The KRThread encapsulates a context worker thread using a libuv event loop (uv_loop + uv_async). It provides two primary paths for task dispatching, both of which must ensure that only one thread is executing a task at any given time to prevent corruption of the V8/JS Context or native state.

    PathEntry PointExecution ThreadPurpose
    Asynchronous DispatchDispatchAsync → OnAsyncworker threadRegular cross-platform tasks, timer callbacks
    Synchronous Direct RunDispatchSync → DirectRunOnCurThreadCalling thread (usually main thread)Fast path for when the main thread needs immediate results from the kuikly side