DOCSEARCHbyAlgolia
Submit Docs

uView Pro UI Component Library

website·Indexed 32 days ago

https://uviewpro.cn

A comprehensive UI component library for uni-app x, featuring a wide array of components such as ActionSheet, AlertTips, Avatar, Calendar, Form, and Grid. It provides a professional set of tools for color management, object cloning (deepClone), and unique identifier generation (guid), with extensive support across App, H5, and various Mini Program platforms.

Tokens
105.8K
Snippets
585
Records
701
Agent score
61%

What's inside uView Pro

  1. Overview of uView Pro framework

    uView Pro is a uni-app ecosystem framework completely rewritten using Vue3 syntax, based on the uView 1.8.8 official component library. Unlike compatibility layers, it features a source-level reconstruction of every component and tool to leverage Vue3's reactivity and Composition API. It includes 80+ high-quality components, a theme system, dark mode, and internationalization (i18n) support.

  2. Overview of tabsSwiper component

    The tabsSwiper component is used for scenarios requiring left-right page switching (e.g., order centers with 'Pending Shipment', 'Pending Payment', etc.). It is built upon uni-app's scroll-view and swiper components. Key features include color gradients for active tabs, a following bottom slider, and automatic centering of the active tab.

    Comparison with tabs component:

    • tabsSwiper requires the uni-app swiper component to function; tabs does not.
    • tabsSwiper provides advanced visual effects like slider following and color gradients, whereas tabs is simpler to configure.

    Constraints:

    • Not supported on Alipay Mini Programs due to lack of dx parameter support in the swiper transition event.
    • Currently available in Vue version (nvue version in progress).
    • Since it uses swiper (a single-page component), it is suitable for simple lists. For complex, long lists, performance may degrade; consider using nvue templates for high-complexity requirements.

  3. Overview of uview-pro HTTP library

    The uview-pro HTTP library is a lightweight request client for uni-app projects. It supports TypeScript, Vue 3, and the Composition API. It is designed for small to medium-sized projects and supports GET, POST, PUT, and DELETE methods. Note that it does not support file uploads or downloads.

    Platform Compatibility:

    • Supported: App, H5, WeChat Mini Program, Alipay Mini Program, Baidu Mini Program, ByteDance (Toutiao) Mini Program, QQ Mini Program.
    • Caveats:
      • DELETE requests are not supported on Alipay and ByteDance (Toutiao) mini-programs (as of HX2.6.15).
      • PUT requests are not supported on Alipay mini-programs (as of HX2.6.15).

  4. Overview of uView Pro Skills

    Skills are standardized, reusable, and encapsulatable "capability packages" provided by uView Pro. They are designed to enable AI Agents to reliably and stably generate business logic within the framework. By using Skills, developers can standardize the quality of AI-generated code, help AI understand uView Pro component usage more quickly, and increase overall development efficiency.

  5. Overview of useTheme theme management

    useTheme is a composable for managing themes in uView-Pro. It supports switching between multiple themes (e.g., brand colors, gradients), persisting theme settings to storage, automatic injection of CSS variables, and managing dark mode (system-follow, forced light, or forced dark) with persistence.
    import { useTheme } from 'uview-pro';

  6. Overview of uView Pro MCP Support

    uView Pro provides a Model Context Protocol (MCP) service that enables AI editors to retrieve real-time component API information. This allows AI to query Props, Events, Methods, and Slots, fetch usage examples, validate code correctness, and search for Hooks, Tools, and general documentation.

  7. Implement Vertical Category Layouts in uView

    uView provides two types of vertical category page layouts. These are provided as layout templates rather than standalone components, allowing developers to customize the page structure, logic, and styles to fit their specific needs.

  8. Implement Comment and Comment Detail pages using the Comment layout

    The Comment layout provides two pre-built pages: a Comment List page and a Comment Detail page (accessed by clicking 'Total xxx replies'). The Detail page includes functionality for liking comments. Note that these pages use local mock data; developers must modify the page structure, logic, and styles to align with their actual backend data formats.

  9. Implement a Waterfall layout with uView

    The Waterfall component creates a two-column masonry layout. It automatically assigns new data to the column with the shorter current height. For optimal performance and user experience, it is recommended to use this component in conjunction with uView's lazyload and loadmore components.

  10. Limit function execution frequency with useThrottle

    useThrottle is a composable used to control a function so that it only executes once within a specified time interval. It is ideal for scenarios like scroll listeners, preventing duplicate form submissions, and handling high-frequency input.
    import { useThrottle } from 'uview-pro';

  11. Use the u-section component for section headers

    The u-section component is used to display a section title and a 'view more' link, typically when only a subset of categorized information is shown and the user needs to navigate to a full list. It features a decorative vertical line on the left by default.
    <u-section title="今日热门" sub-title="查看更多"></u-section>

  12. Use editor code hints for uView Pro components

    uView Pro is rebuilt based on uView 1.8.8 and maintains API synchronization, allowing users of uView 1.x to switch seamlessly. While VSCode is recommended, uView Pro supports built-in code hints in HBuilder X without requiring additional plugins or configuration.