Mobile application development system based on visual arrangement

Abstract

The invention discloses a mobile application development system based on visual arrangement, one-time code writing is carried out based on a cross-platform development framework of an ArkUI-X framework, a mobile application running on an operating system platform is constructed, and an application interface visual arrangement system provides multiple granularity modules from templates, components to elements. A user is supported to freely arrange an application interface in a mode of dragging and configuring components, the dynamic UI rendering and hot updating engine adjusts the application interface in real time and performs dynamic updating after issuing an application, and an automatic packaging engine of a multi-operating system platform is supported to automatically generate an adaptive application installation package according to characteristics and dependencies of different platforms. An efficient and flexible cross-platform development solution is provided for developers through a mobile application development platform composed of a low-code visual interface arrangement system, an automatic packaging system, dynamic UI rendering and a hot update engine.

Description

Technical Field

[0001] The present application relates to the field of software development technology, and in particular to a mobile application development system based on visual orchestration. Background Art

[0002] With the rapid development of the mobile application market, the demand for high-quality, high-performance applications is growing. However, developers are faced with the major challenge of multi-platform compatibility. Due to the significant differences in the development environments of different operating systems, the traditional development method requires developers to code separately for each operating system platform, which not only increases the cost of development, maintenance and updates, but also raises the technical threshold.

[0003] To meet this challenge, some low-code application development platforms have emerged on the market, aiming to reduce programming complexity and technical barriers through visual operations. However, existing low-code solutions still have problems, such as not supporting emerging operating systems. Current cross-platform low-code development platforms mainly rely on frameworks such as Flutter and ReactNative. These frameworks are incompatible due to architectural differences, which makes developers face new technical barriers when adapting to new platforms. Poor component flexibility: Although some low-code platforms provide a rich library of application components to facilitate developers to orchestrate interfaces through visual operations, these components have high granularity and can only be adjusted within the preset framework and parameters. This lack of flexibility limits the scope of application of low-code platforms in dealing with personalized needs and complex enterprise-level projects. No support for dynamic updates: Most low-code development platforms do not support secondary adjustments to the application interface and real-time dynamic updates after users complete the application design and package to generate the application installation package. This results in the inability of applications to respond quickly to market changes and user needs, reducing the competitiveness and user experience of applications.

[0004] To sum up, the existing low-code application development platforms have obvious shortcomings in multi-platform compatibility, component flexibility and dynamic update capabilities, and there is an urgent need for a new technical solution that can effectively solve these problems. Summary of the invention

[0005] The purpose of this application is to overcome the existing technical defects and provide a mobile application development system based on visual orchestration. Through a mobile application development platform composed of a low-code visual interface orchestration system, an automated packaging system, dynamic UI rendering and a hot update engine, it provides developers with an efficient and flexible cross-platform development solution.

[0006] The purpose of this application is achieved through the following technical solutions:

[0007] In a first aspect, the present application proposes a mobile application development system based on visual orchestration, the system comprising:

[0008] A cross-platform development framework based on the ArkUI-X framework, which is used to write code once and build mobile applications that run on the operating system platform;

[0009] The application interface visual layout system is used to provide various granular modules from templates, components to elements, and supports users to freely layout the application interface by dragging and configuring components;

[0010] Dynamic UI rendering and hot update engine, used to adjust the application interface in real time and perform dynamic updates after the application is released;

[0011] An automated packaging engine that supports multiple operating system platforms, used to automatically generate adapted application installation packages based on the characteristics and dependencies of different platforms.

[0012] In a possible implementation, the application interface visual arrangement system includes a component library, an editor, an editing panel, and an editing tool;

[0013] The component library is used to provide atomic elements, components, containers, and composite modules, and each component supports configurable operations and has attributes, styles, data, and event configuration items;

[0014] Editor, used to provide a visual design interface, supports moving, scaling, copying, deleting, packaging, importing or exporting, moving up and down, and placing at the top or bottom of elements and components in the application interface, and provides preview mode, proportional scaling, and scan code preview functions;

[0015] Editing panel, which is used to provide property, data, style, and event editing panels, and display the basic properties, data sources, style properties, and event interaction properties of editing components;

[0016] Editing tools are used to provide rulers, reference lines, adsorption lines, component tree tools, and provide undo, restore, alignment, component hiding, component locking, preview, and auto-save functions.

[0017] In a possible implementation, the component library includes:

[0018] Atomic elements of the interface include text, rich text, adaptive text, pictures, graphics, buttons, and lines, which are used to combine and match into components;

[0019] Containers include empty containers, loop containers, conditional judgment containers, flex flexible layout containers, grid grid layout containers, tab containers, pop-up containers, relationship containers, and random layout containers, which are used to accommodate elements and components and build combined components, and support saving as new components;

[0020] Media components include video, audio, live broadcast, TV, and radio, which are used to build media, news information, and UGC application interfaces;

[0021] List components include text lists, data lists, grid lists, tables, ordered lists, and gradient lists with images, which are used to build information lists and content cards;

[0022] Interactive components include input boxes, drop-down boxes, date selection boxes, check boxes, file uploads, as well as image carousels, dynamic carousels, and image accordions, which are used to display interactive content;

[0023] Custom components are used to combine elements and components to build composite components, and support saving as new custom components;

[0024] Import components, used to upload third-party components.

[0025] In a possible implementation, the editing panel includes:

[0026] Property editing panel, used to set basic properties of elements and components;

[0027] The data editing panel is used to set the data source, support local hard-coding of data, import of Excel structured data, obtain data from the interface, and perform data parsing mode, refresh mechanism, cache interface, request parameter settings, and support data transfer from parent components and specific components;

[0028] Style editing panel, used to set the style properties of elements and components, adjust component UI, support setting borders, shadows, margins, and provide code mode function;

[0029] The event editing panel is used to set the event interaction properties of application interface elements and components, and has built-in mobile application triggering events and event execution functions.

[0030] In a possible implementation, the dynamic UI rendering and hot update engine includes:

[0031] The visual layout parsing engine is used to analyze the attribute setting content according to the elements and components selected by the user in the application interface visual layout system, and convert them into the data structure of the corresponding application interface and store them in the database;

[0032] The interface rendering engine is used to map the predefined UI component code and interaction script library according to the data structure of the application interface, and render and generate the UI, interaction and functional logic of the application interface in real time.

[0033] In a possible implementation, the automated packaging engine includes:

[0034] The platform configuration module is responsible for managing and setting various configurations of each operating system platform;

[0035] The code generation engine is used to use the ArkUI development framework to obtain libraries and dependencies for the corresponding operating system platform, perform code conversion and generation, and automatically generate application installation packages for the corresponding platform.

[0036] In a possible implementation, the system further includes a collaborative editing module for providing application visualization arrangement for multiple developers and providing real-time content synchronization modification under multi-person collaboration.

[0037] In a possible implementation, the system further includes a resource sharing module for providing a built-in shared resource library and shared templates, components, and UI elements.

[0038] The above-mentioned main scheme of the present application and its further options can be freely combined to form multiple schemes, all of which are schemes that can be adopted and claimed for protection in the present application; and in the present application, (non-conflicting options) options and other options can also be freely combined. After understanding the scheme of the present application, those skilled in the art can understand that there are multiple combinations based on the prior art and common knowledge, all of which are technical schemes to be protected by the present application, and they are not exhaustively listed here.

[0039] This application discloses a mobile application development system based on visual arrangement, which uses a cross-platform development framework based on the ArkUI-X framework to write code once and build mobile applications running on operating system platforms. The application interface visual arrangement system provides a variety of granularity modules from templates, components to elements, and supports users to freely arrange application interfaces by dragging and configuring components. The dynamic UI rendering and hot update engine adjusts the application interface in real time after the application is released and updates it dynamically. The automated packaging engine that supports multiple operating system platforms automatically generates an adapted application installation package based on the characteristics and dependencies of different platforms. The mobile application development platform composed of a low-code visual interface arrangement system, an automated packaging system, a dynamic UI rendering and a hot update engine provides developers with an efficient and flexible cross-platform development solution. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0041] Figure 1 A schematic diagram of a mobile application development system based on visual orchestration proposed in an embodiment of the present application is shown.

[0042] Figure 2 A flowchart of native page visual arrangement, page assembly and application packaging proposed in an embodiment of the present application is shown.

[0043] Figure 3 A diagram of a visual arrangement interface of an application interface proposed in an embodiment of the present application is shown.

[0044] Figure 4 The following is an architecture diagram of an embodiment of the present application. DETAILED DESCRIPTION

[0045] The following describes the embodiments of the present application through specific examples, and those skilled in the art can easily understand other advantages and effects of the present application from the contents disclosed in this specification. The present application can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present application. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict.

[0046] Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making any creative work shall fall within the scope of protection of this application.

[0047] In the existing technology, some low-code application development platforms reduce programming complexity and technical barriers through visual operations. However, the existing cross-platform low-code solutions still have many problems. First, they do not support the emerging domestic operating system HarmonyOS NEXT. The current cross-platform technology mainly relies on Western frameworks such as Flutter and React Native, but due to architectural differences, HarmonyOS NEXT is not compatible with these frameworks. Secondly, although some low-code platforms provide application component libraries to facilitate developers to arrange interfaces through visual operations, these components have high granularity and can only be adjusted within the preset framework and parameters. They have poor flexibility and are difficult to meet the personalized and enterprise-level complex project requirements of developers, thus limiting the use scenarios of low-code development platforms. In addition, after the user completes the application design and packages the application installation package, the existing development platform generally does not support secondary adjustment of the application interface and real-time dynamic update, resulting in the inability of the application to quickly respond to market changes and user needs.

[0048] Therefore, in order to solve the shortcomings of existing cross-platform development solutions in terms of performance, adaptation to emerging platforms (such as HarmonyOS NEXT), UI orchestration flexibility and low-code support, the embodiment of the present application proposes a mobile application development system based on visual orchestration. Through a mobile application development platform composed of a low-code visual interface orchestration system, an automated packaging system, dynamic UI rendering and a hot update engine, it provides developers with an efficient and flexible cross-platform development solution, which is explained below.

[0049] Please refer to Figure 1 , Figure 1 A schematic diagram of a mobile application development system based on visual orchestration proposed in an embodiment of the present application is shown, and the system includes:

[0050] A cross-platform development framework based on the ArkUI-X framework, which is used to write code once and build mobile applications that run on the operating system platform;

[0051] The application interface visual layout system is used to provide various granular modules from templates, components to elements, and supports users to freely layout the application interface by dragging and configuring components;

[0052] Dynamic UI rendering and hot update engine, used to adjust the application interface in real time and perform dynamic updates after the application is released;

[0053] An automated packaging engine that supports multiple operating system platforms, used to automatically generate adapted application installation packages based on the characteristics and dependencies of different platforms.

[0054] The ArkUI-X framework is a cross-platform development framework based on the ArkUI-X framework. It is a fully autonomous and controllable cross-platform development framework that supports multiple operating systems such as iOS, Android and HarmonyOS NEXT. The unified development framework enables developers to use a set of codes to build high-performance mobile applications that run on multiple platforms, thereby greatly reducing development time and costs.

[0055] The ArkUI-X framework is deeply optimized for HarmonyOS NEXT, supporting its unique multi-device collaboration and service flow functions, giving full play to the performance advantages of HarmonyOS NEXT. The framework also provides multiple predefined UI component libraries to support efficient construction from basic components to complex interfaces. The components are uniformly rendered through the framework to ensure the consistency of cross-platform interfaces. Unlike existing cross-platform UI component libraries, the component library of the present invention is an application layer component that supports more fine-grained UI components, from templates, components to the arrangement of each level of elements.

[0056] The low-code visual orchestration system provides a real-time visual orchestration interface that allows developers or non-technical personnel to quickly build or adjust the application interface by dragging and configuring components. It also supports free orchestration of different granularities from templates, components to elements. Users can make fine-grained real-time adjustments to UI elements without recompiling and packaging the application.

[0057] Compared with existing visual orchestration systems, the application interface visual orchestration system of the present application supports richer UI orchestration capabilities. Users can make fine-grained real-time adjustments to UI elements. In addition, users can make real-time adjustments to UI elements without recompiling and packaging the application, greatly improving development efficiency.

[0058] The built-in dynamic rendering engine in the dynamic UI rendering and hot update engine parses the stored data structure according to the application interface design, maps the predefined UI component code and interaction script library, and renders the UI, interaction and functional logic of the application interface in real time. The built-in hot update engine allows developers to adjust the UI style and interaction in real time without re-listing the application, ensuring rapid updates without affecting the user experience.

[0059] This hot update mechanism has higher real-time and flexibility, especially on HarmonyOS NEXT, and can be better integrated with the system's dynamic update mechanism. In addition, the dynamic update function ensures that users will not be affected by application updates during use, thereby improving the user experience.

[0060] In the automated packaging engine, the platform configuration module is responsible for managing and setting various configurations for each operating system platform, supporting third-party service configuration and global application configuration. The code generation engine uses the ArkUI-X development framework to automatically obtain libraries and dependencies for the corresponding operating system platform, perform code conversion and generation, and automatically generate application installation packages for the corresponding platform. It can automatically generate adaptive application installation packages based on the characteristics and dependencies of different platforms, simplifying the packaging process and reducing human errors. It also supports multiple operating system platforms such as iOS, Android, and HarmonyOS NEXT, ensuring the compatibility and performance of applications on different platforms.

[0061] The mobile application development system proposed in the embodiment of the present application provides an efficient, easy-to-use and secure mobile application development platform by combining advanced technologies such as low-code development, cross-platform support, and dynamic updates. It is particularly suitable for enterprises and individual developers who want to quickly develop high-quality mobile applications. Through this system, developers can significantly reduce development costs, improve development efficiency, and ensure high performance of applications on multiple platforms.

[0062] The application interface visual layout system includes component library, editor, editing panel, and editing tools;

[0063] The component library is used to provide atomic elements, components, containers, and composite modules, and each component supports configurable operations and has attributes, styles, data, and event configuration items;

[0064] Editor, used to provide a visual design interface, supports moving, scaling, copying, deleting, packaging, importing or exporting, moving up and down, and placing at the top or bottom of elements and components in the application interface, and provides preview mode, proportional scaling, and scan code preview functions;

[0065] Editing panel, which is used to provide property, data, style, and event editing panels, and display the basic properties, data sources, style properties, and event interaction properties of editing components;

[0066] Editing tools are used to provide rulers, reference lines, adsorption lines, component tree tools, and provide undo, restore, alignment, component hiding, component locking, preview, and auto-save functions.

[0067] In the component library, atomic elements can provide basic interface elements, such as text, pictures, etc. Components can provide predefined functional modules, such as information, video, etc. Containers can provide layout management tools, such as elastic layout, grid layout, etc. Combination modules allow users to combine multiple components into a new module to meet specific needs. Therefore, the component library can not only provide various types of components and layout tools to meet the needs of different scenarios, but also support a rich set of properties, styles, data and event configuration items for each component, and users can adjust and edit them as needed.

[0068] The editor provides an intuitive visual design interface. Users can build application interfaces by dragging and dropping components. It supports operations such as moving, scaling, copying, deleting, encapsulating, importing or exporting, moving up and down, and placing at the top or bottom of the elements and components in the interface. It also provides preview mode, proportional scaling, and code scanning preview functions to facilitate users to view and test interface effects in real time. By dragging and dropping components, users can quickly build complex interface layouts. The preview function allows users to view the effects in real time during the design process and make timely adjustments.

[0069] The editing panel provides a property editing panel, which is used to edit the font, color and other basic properties of the component, supports data source binding, associates the component with the backend data, and provides a style editing panel to edit the size, position, border, shadow and other style properties of the component, and provides an event editing panel to bind click and other trigger events to achieve interactive effects. This allows users to make precise adjustments to every detail of the component, realize dynamic content display through data binding, and improve the flexibility of the application.

[0070] The editing tool can provide tools such as rulers, reference lines, adsorption lines, component trees, etc. to help users design and layout efficiently. It also provides functions such as undo, restore, align, component hiding, component locking, preview, and automatic saving to improve editing efficiency. Through tools such as rulers and reference lines, users can quickly achieve precise layouts. It provides rich editing functions to help users easily complete complex interface design tasks.

[0071] Visual application interface visual layout system helps users quickly and efficiently build and adjust the interface of mobile applications. Whether professional developers or non-technical personnel, this system can easily realize complex application interface design, improve development efficiency and enhance user experience.

[0072] The component library includes:

[0073] Atomic elements of the interface include text, rich text, adaptive text, pictures, graphics, buttons, and lines, which are used to combine and match into components;

[0074] Containers include empty containers, loop containers, conditional judgment containers, flex flexible layout containers, grid grid layout containers, tab containers, pop-up containers, relationship containers, and random layout containers, which are used to hold elements and components and build components, and support saving as components.

[0075] Media components include video, audio, live broadcast, TV, and radio, which are used to build media, news information, and UGC application interfaces;

[0076] List components include text lists, data lists, grid lists, tables, ordered lists, and gradient lists with images, which are used to build information lists and content cards;

[0077] Interactive components include form components such as input boxes, drop-down boxes, date selection boxes, check boxes, file uploads, as well as image carousels, dynamic carousels, and image accordions for interactive content display;

[0078] Custom components are used to combine elements and components to build composite components, and support saving as new custom components;

[0079] Import components, used to upload third-party components.

[0080] The atomic elements of the interface can be freely combined into more complex components, where text is ordinary text display, rich text refers to text that supports formatting, such as bold, italic, hyperlinks, etc. Adaptive text can automatically adjust the font size and layout according to the screen size. It can also display static images, draw various shapes such as rectangles, circles, polygons, etc., buttons trigger user operations, and draw dividing lines or other decorative lines.

[0081] Container components can hold other elements and components and are used to build components with special effects. They can also be saved as personalized components.

[0082] An empty container is a blank container used for custom filling content. A loop container is used to display dynamic data lists, such as looping news items. A conditional container can display different content based on conditions. A flex container can support flexible layout and automatically adjust the size and arrangement of child elements. A grid container can support grid layout and is suitable for displaying grid-like content. A tab container can achieve tab switching effects. A pop-up container can display pop-up windows. A relationship container can display related content, such as parent-child relationships. A random container can randomly arrange content.

[0083] Media components are mainly used to build media, news information, and UGC application interfaces. They can play video content, audio content, real-time live content, simulate TV programs, and broadcast content.

[0084] The list component is used to build information lists and content cards, and display plain text columns, information lists with data, grid lists, data in table form, numbered lists, and lists with images and gradient effects.

[0085] Interactive components are used to build data collection pages and interactive content displays. The input box is used for users to enter text, the drop-down box is used to select predefined options, the date selection box is used to select dates, the check box is used for multiple selection operations, the file upload is used to upload files, the image carousel is used to display multiple images and supports carousel effects, the dynamic carousel is used to display dynamic content and supports carousel effects, the image accordion is used to display multiple images and supports accordion effects, the positioning is used to obtain the user's geographic location, the switch is used to switch states, the navigation is used to realize navigation between pages, and the sharing is used to share content to other platforms.

[0086] The custom component function allows users to freely combine elements and components to build composite components, and supports saving as new custom components for subsequent reuse. Users can combine multiple atomic elements and components into a new component, and the combined component can be saved as a new custom component for later use.

[0087] The import component function allows users to upload third-party components, improving the flexibility and scalability of the technology platform.

[0088] The editing panel includes:

[0089] Property editing panel, used to set basic properties of elements and components;

[0090] The data editing panel is used to set the data source, set local hard-coded data, import Excel structured data, support obtaining data from the interface, and perform data parsing mode, refresh mechanism, cache interface, request parameter settings, and support data transfer from parent components and specific components;

[0091] Style editing panel, used to set style properties of elements and components, adjust component UI, set borders, shadows, margins, and provide code mode functions;

[0092] The event editing panel is used to set the event interaction properties of application interface elements and components, and has built-in mobile application triggering events and event execution functions.

[0093] The property editing panel is used to set the basic properties of elements and components. The text component sets the font, font size, color, etc. The image component sets the image path, size, rounded corners, etc. The button component sets the button text, background color, border, etc. Other components set the corresponding basic properties according to the characteristics of different components.

[0094] The data editing panel is used to set the data source and control the data acquisition mode when displaying the application interface content. Fixed data can be directly entered in the panel, and structured data can be imported from Excel files. It can also set how to parse the data returned by the interface, the automatic refresh frequency of the data, the data cache strategy, and the parameters when requesting the interface. It can not only support the transfer of data from the parent component to the child component, but also support the transfer of data from the specified component to the target component to achieve data linkage effect.

[0095] The style editing panel is used to set the style properties of elements and components, adjust the user interface (UI) of the component, and can set the width and height of the component, the horizontal and vertical position of the component, the background color or background image of the component, the border style of the component, the shadow effect of the component, the inner and outer margins of the component, and provide a code mode function to facilitate users with development capabilities to quickly operate and directly edit CSS styles.

[0096] The event editing panel is used to set the event interaction properties of the application interface elements and components. In the trigger event, it is triggered when the user clicks the element, triggers the refresh when the user pulls down the page, triggers when the user slides on the screen, triggers when the user slides inside or outside the component, triggers when the user long presses the element, triggers when the data changes, and triggers when the content changes. In the built-in event execution function, it can load data from the interface or locally, start the code scanning function, display pop-up windows, and show or hide components. In addition, its built-in script editor supports users with development capabilities to edit JavaScript scripts and add personalized events.

[0097] Dynamic UI rendering and hot update engine includes:

[0098] Visual layout parsing engine, used to analyze the attribute setting content according to the elements and components selected by the user in the visual layout system of the visual application interface, and convert the parsed content into the data structure of the corresponding application interface and store it in the database;

[0099] The interface rendering engine is used to map the predefined UI component code and interaction script library according to the data structure of the application interface, and render and generate the UI, interaction and functional logic of the application interface in real time.

[0100] The visual orchestration parsing engine is responsible for parsing and converting the elements and components selected by the user in the visual application interface visual orchestration system and their attribute settings into the corresponding application interface data structure. Specifically, it parses the basic attributes of the elements and components set by the user (such as text, pictures, buttons, etc.), data sources, style attributes, event interactions, etc., and stores the parsed data structure in the database for subsequent interface rendering and function implementation.

[0101] The interface rendering engine can select the appropriate UI component code for rendering based on the information in the data structure, call the predefined interactive script library according to the event settings in the data structure, implement various interactive effects, and dynamically generate the UI of the application interface to ensure that the interface seen by the user is consistent with the design. According to the logical settings in the data structure, it generates and implements the functional logic of the application, such as page jump, data loading, form submission, etc.

[0102] The automated packaging engine includes:

[0103] The platform configuration module is responsible for managing and setting various configurations of each operating system platform;

[0104] The code generation engine is used to use the ArkUI development framework to obtain libraries and dependencies for the corresponding operating system platform, perform code conversion and generation, and automatically generate application installation packages for the corresponding platform.

[0105] The platform configuration module is responsible for managing and setting various configurations of each operating system platform to ensure the consistency and compatibility of applications on different platforms. It can set various configurations of different operating systems, such as package name, signature, etc., configure keys and parameters of third-party services, such as Baidu Statistics, WeChat Payment, Jiguang Push Key, etc., and set global configurations of applications, such as domain name, application icon, etc.

[0106] The code generation engine uses the ArkUI development framework to automatically obtain the libraries and dependencies of the corresponding operating system platform, perform code conversion and generation, and finally automatically generate the application installation package of the corresponding platform. It can automatically obtain the libraries and dependencies required by the corresponding operating system platform, convert the general code into platform-specific code, generate the application installation package of the corresponding platform, and ensure the normal operation of the application on the target platform.

[0107] The system also includes a collaborative editing module for providing visual application arrangement for multiple developers and real-time content synchronization modification under multi-person collaboration.

[0108] The collaborative editing module can support multiple developers to perform visual orchestration, select and configure application elements and components on the same interface. All developers participating in the collaboration can see the modifications made by others in real time to avoid conflicts and duplication of work. It provides version control functions to facilitate the backtracking and management of different versions of orchestration results, and supports different levels of permission management to ensure that each developer can only operate within the scope of his or her authority.

[0109] The system also includes a resource sharing module for providing a built-in resource library and shared templates, components, and UI elements.

[0110] The resource sharing module provides a variety of predefined templates that developers can use directly or customize based on them. It contains a wealth of UI components that developers can quickly select and configure, accelerating interface development. The UI element library provides common UI elements, such as buttons, input boxes, navigation bars, etc., to facilitate developers to quickly build interfaces. It also supports developers to upload custom resources and download required resources from the resource library. It provides resource version control functions to facilitate the management and backtracking of different versions of resources, and supports different levels of permission management to ensure the security and rationality of resources.

[0111] In one possible implementation, Figure 2 A flowchart of the visual arrangement of native pages, page assembly and application packaging proposed in the embodiment of the present application is shown, showing the complete process of the visual arrangement of native pages, page assembly and application packaging. Specifically, the process is divided into three main parts: the first is the visual arrangement of native pages, including creating pages (such as creating blank pages or template generation pages), editing pages (such as selecting components, editing component properties, adjusting component styles, determining component events, component combinations) and publishing pages (setting page information, previewing publishing pages). The second is page assembly and application packaging, covering creating applications, creating versions, configuring application modules, native page assembly, configuring third-party services and application packaging. Finally, the process also includes online updates of applications to ensure that applications can be continuously optimized and improved. The whole process starts from creating a page until the final packaging and online update of the application, achieving an efficient and convenient development experience. Figure 3 A diagram of a visual arrangement interface of an application interface proposed in an embodiment of the present application is shown, in which a page editor is shown, with a component library on the left, an editing area in the middle, and a property setting area on the right.

[0112] In one possible implementation, Figure 4 An architecture diagram proposed in an embodiment of the present application is shown, which is divided into multiple levels and modules. The top shows supported client applications, including Android APP, iOS APP and HarmonyOS NEXTAPP. The middle part is the core of the low-code platform, including a template library (providing template types, management, styles and data), a component library (including chart components, Web components, animation components, 3D components, canvas layers, event scripts, drawing, dynamic styles and data scripts) and a visual designer. The public service part covers system management (such as user management, permission management and role management), data management (PV, UV traffic, page access ranking, average access time, user data statistics and resource data statistics), resource management (pictures, audio, video, text and models), low-code engine (rendering engine, data engine, application packaging and application release), component management (component version, component properties and component code) and other functions (task scheduling, system monitoring, system log and system configuration). The bottom is the basic services, including Redis, MySQL, MongoDB, Elasticsearch, object storage and AI services, and the two sides are service management and security protection systems.

[0113] Compared with the prior art, the embodiments of the present application have the following beneficial effects:

[0114] First, it provides visual editing tools. Users can select components and edit their properties by simply dragging and dropping to quickly build application interfaces. This method greatly simplifies the application development process, making it easy for even people without a programming background to get started, greatly reducing the difficulty for companies or organizations to develop mobile applications. In addition, the system also provides automated packaging tools. Users only need to select a built application interface, and the system will automatically generate application installation packages for different operating systems through a visual process, further simplifying the application release steps and improving development efficiency.

[0115] Second, the cost of building mobile application installation packages for multiple operating system platforms is greatly reduced. Domestic framework, safe This solution adopts the ArkUI-X cross-platform development framework, which supports mainstream iOS and Android operating systems, and is also compatible with the emerging domestic HarmonyOS NEXT system. This means that developers only need to write one set of code to generate high-performance applications for multiple operating systems, significantly reducing development time and labor costs. In addition, because the development framework is completely autonomous and controllable, it avoids the security risks that may arise from relying on foreign technology, especially in terms of key information protection, greatly reducing the risk of information leakage and improving the security of the application.

[0116] Third, it provides interface editing functions with multiple granularities from templates, components to elements. Users can freely combine and adjust various components to achieve highly personalized UI design. The editor supports rich attribute, data, style and event configurations, making interface design more flexible and diverse. The built-in dynamic rendering and hot update technology allow users to adjust UI style and interaction at any time after publishing the application without repackaging and listing the application, reducing the waiting time for republishing the application, improving the flexibility and response speed of the update, and enabling enterprises to respond to market changes and user needs more quickly.

[0117] The above description is only a preferred embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present application should be included in the protection scope of the present application.

Claims

1. A mobile application development system based on visual arrangement, characterized in that: The system comprises: A cross-platform development framework based on the ArkUI-X framework, which is used to write code once and build mobile applications that run on the operating system platform; The application interface visual layout system is used to provide various granular modules from templates, components to elements, and supports users to freely layout the application interface by dragging and configuring components; Dynamic UI rendering and hot update engine, used to adjust the application interface in real time and perform dynamic updates after the application is released; An automated packaging engine that supports multiple operating system platforms, used to automatically generate adapted application installation packages based on the characteristics and dependencies of different platforms.

2. The mobile application development system according to claim 1, characterized in that: The application interface visual layout system includes component library, editor, editing panel, and editing tools; The component library is used to provide atomic elements, components, containers, and composite modules, and each component supports configurable operations and has attributes, styles, data, and event configuration items; Editor, used to provide a visual design interface, supports moving, scaling, copying, deleting, packaging, importing or exporting, moving up and down, and placing at the top or bottom of elements and components in the application interface, and provides preview mode, proportional scaling, and scan code preview functions; Editing panel, which is used to provide property, data, style, and event editing panels, and display the basic properties, data sources, style properties, and event interaction properties of editing components; Editing tools are used to provide rulers, reference lines, adsorption lines, component tree tools, and provide undo, restore, alignment, component hiding, component locking, preview, and auto-save functions.

3. The mobile application development system according to claim 2, characterized in that: The component library includes: Atomic elements of the interface include text, rich text, adaptive text, pictures, graphics, buttons, and lines, which are used to combine and match into components; Containers include empty containers, loop containers, conditional judgment containers, flex flexible layout containers, grid grid layout containers, tab containers, pop-up containers, relationship containers, and random layout containers, which are used to accommodate elements and components and build combined components, and support saving as new components; Media components include video, audio, live broadcast, TV, and radio, which are used to build media, news information, and UGC application interfaces; List components include text lists, data lists, grid lists, tables, ordered lists, and gradient lists with images, which are used to build information lists and content cards; Interactive components include input boxes, drop-down boxes, date selection boxes, check boxes, file uploads, as well as image carousels, dynamic carousels, and image accordions, which are used to display interactive content; Custom components are used to combine elements and components to build composite components, and support saving as new custom components; Import components, used to upload third-party components.

4. The mobile application development system according to claim 2, characterized in that: The editing panel includes: Property editing panel, used to set basic properties of elements and components; The data editing panel is used to set the data source, support local hard-coding of data, import of Excel structured data, obtain data from the interface, and perform data parsing mode, refresh mechanism, cache interface, request parameter settings, and support data transfer from parent components and specific components; Style editing panel, used to set the style properties of elements and components, adjust component UI, support setting borders, shadows, margins, and provide code mode function; The event editing panel is used to set the event interaction properties of application interface elements and components, and has built-in mobile application triggering events and event execution functions.

5. The mobile application development system according to claim 1, characterized in that: Dynamic UI rendering and hot update engine includes: The visual layout parsing engine is used to analyze the attribute setting content according to the elements and components selected by the user in the application interface visual layout system, and convert them into the data structure of the corresponding application interface and store them in the database; The interface rendering engine is used to map the predefined UI component code and interaction script library according to the data structure of the application interface, and render and generate the UI, interaction and functional logic of the application interface in real time.

6. The mobile application development system according to claim 1, characterized in that: The automated packaging engine includes: The platform configuration module is responsible for managing and setting various configurations of each operating system platform; The code generation engine is used to use the ArkUI development framework to obtain libraries and dependencies for the corresponding operating system platform, perform code conversion and generation, and automatically generate application installation packages for the corresponding platform.

7. The mobile application development system according to claim 1, characterized in that: The system also includes a collaborative editing module for providing application visual arrangement for multiple developers and providing real-time content synchronization modification under multi-person collaboration.

8. The mobile application development system according to claim 1, wherein: The system also includes a resource sharing module for providing a built-in shared resource library and shared templates, components, and UI elements.

Images