DOCSEARCHbyAlgolia
Submit Docs

JeecgUniapp Documentation

repository·master·Indexed 23 days ago

https://github.com/jeecgboot/jeecguniapp

A mobile application framework for the JeecgBoot low-code platform, supporting multi-terminal adaptation for Mini-programs, H5, App, iOS, Android, and HarmonyOS Next. Built with Uniapp, Vue 3.0, Vite, and TypeScript, it provides ready-to-use interfaces for login, dashboards, and online forms, and includes specialized components like lime-echart for data visualization and lime-color for color manipulation.

Tokens
51.4K
Snippets
87
Records
303
Agent score
77%

What's inside JeecgUniapp

  1. Overview of z-paging

    master

    z-paging is a high-performance paging component for uni-app that simplifies implementing pull-to-refresh and load-more-on-scroll functionality. It is designed to be low-coupling and low-intrusion, meaning it manages pagination logic internally so you don't have to define extra pagination variables in your component's data.

    Key features include:

    • Simple Configuration: Complete pagination by simply binding a network request method and a results array.
    • High Performance: Supports virtual lists for rendering millions of data items and uses wxs + renderjs on supported platforms for smooth pull-to-refresh.
    • Full Platform Support: Compatible with Vue2 & Vue3, JS & TS, and works across H5, App, HarmonyOS Next, and various mini-programs.
    • Rich Functionality: Includes support for custom refresh effects, chat modes (no flicker), sticky headers, empty data management, and theme switching.

  5. Use uni-sass for global styling and layout

    master
    uni-sass is a global styling utility provided by uni-ui. It allows you to perform simple page layout operations—such as managing colors, margins, and border radii—using a combination of predefined CSS class names and sass variables. This helps maintain visual consistency across your UniApp project without writing repetitive CSS.

  6. JeecgUniapp Technical Stack Overview

    master

    JeecgUniapp is a mobile application framework designed to work seamlessly with the JeecgBoot low-code platform. It uses a modern frontend stack to support multi-terminal deployment (Mini-programs, H5, Android, iOS, and HarmonyOS Next).

    Core Technologies

    • Framework: Uniapp + Vue 3.0
    • Build Tool: Vite
    • Language: TypeScript
    • UI Components: Wot-design-uni
    • State Management: Pinia
    • CSS: UnoCSS
    • Package Manager: pnpm

  7. Use the drag dashboard components

    master

    The drag package is a set of dashboard components provided by uni-ui. It allows you to implement simple dashboard operations, such as bar charts, pie charts, and other data visualizations, through specific configuration items and data structures.

    Component Directory Structure

    The drag main package is organized into several functional sub-components:

    • Core UI Components:

      • button: Custom button component
      • carousel: Carousel/slider component
      • editor: Rich text component
      • iframe: Iframe component
      • number: Numeric display component
      • uni-popup: Popup component
      • Empty.vue: Component for displaying empty states

    • Echarts Visualization Components (echarts folder):

      • JBar: Bar chart
      • JPie: Pie chart
      • JLine: Line chart
      • JRing: Ring chart
      • JRadar: Radar chart
      • JCircleRadar: Circular radar chart
      • JGauge: Gauge chart
      • JColorGauge: Color gauge
      • JFunnel: Funnel chart
      • JPyramid: Pyramid chart
      • JScatter: Scatter plot
      • JStackBar: Stacked bar chart
      • JMUltipleBar: Multiple bar chart
      • JMUltipleLine: Multiple line chart
      • JNegativeBar: Positive/negative bar chart
      • JBubble: Bubble chart
      • Map: Map components (including BarMap, BubbleMap, and HeatMap)

    • Supporting Files:

      • mixins: Echart mixins
      • utils: Utility classes
      • props.js: Component parameter definitions

  9. Use uni-datetime-picker for date and time selection

    master

    The uni-datetime-picker component (referenced as uDatetimePicker in code blocks) allows users to select dates and times. A key advantage is its support for timestamps for both input and output (including start and end times), and its ability to select both date and time simultaneously.

    Important Version Note (v2.0.0+):

    • Supports date + time range selection.
    • Uses a calendar UI for date selection.
    • Supports both PC and Mobile.
    • Breaking Change: This version is NOT backward compatible. It no longer supports standalone time selection (type=time) or the hide-second property. If you only need time selection without timestamps, use the built-in picker component instead.

    Default Value Rules:

    • If an initial value is set, it will be displayed in the picker input box.
    • If no value is provided, the initial value defaults to the current local time (Date.now()), but it will not be displayed in the picker input box.

  10. Use the uni-list component for optimized lists

    master

    The uni-list component serves as a parent container for creating lists with basic styling, extensible slot mechanisms, and performance optimizations for long lists.

    Key Features:

    • Performance: In app-nvue pages, it uses native list component scrolling, which recycles rendering memory for off-screen items to prevent lag in long lists. In standard Vue pages, it defaults to page-level scrolling.
    • Structure: uni-list is the container, while uni-list-item is the core child component representing a repeatable row.
    • Customization: You can use built-in attributes for common scenarios (navigation, settings, icons, address books, chat) or use extension slots for complex layouts like news feeds or e-commerce product lists.

    Note: uni-list does not include pull-to-refresh or infinite scrolling (load more) functionality. For pagination, use the uni-load-more component.

  11. Implement multi-column linkage (Cascading)

    master

    To create a cascading effect (where selecting an item in one column updates the options in the next), listen to the @pick event. Use the column index to determine which column was changed and update the corresponding data source for the subsequent columns.

    // Example logic for Province -> City -> County linkage
const onChange = ({values, column, index} : PickerPickEvent) => {
	if (column == 0) {
		// Column 0 (Province) changed: update City and County data
		const data = getCities(provinces.value[index].value);
		cities.value = data[0];
		counties.value = data[1];
	}

	if (column == 1) {
		// Column 1 (City) changed: update County data
		counties.value = getCounties(cities.value[index].value);
	}
}

  12. Understand mp-html limitations in nvue

    master

    In nvue mode, mp-html uses a web-view for rendering to achieve HTML-like effects. This differs from the native rendering used in other platforms and has the following implications:

    Performance & Usage:

    • Performance is lower than native rendering. If native richtext can satisfy your needs, it is recommended to use that instead.
    • If you have extensive rich text content, consider using a standard vue page instead of nvue.

    Limitations:

    • lazy-load property is not supported.
    • Video does not support full-screen playback.
    • If used inside a container with flex-direction: row, you must explicitly set a width or flex: 1 to occupy the remaining space.

    Installation Note: Until a specific issue is fixed, mp-html cannot be introduced via uni_modules in pure nvue mode. You must use the local introduction method (copying contents from dist/uni-app to your project root).