Web-based dynamic rendering method and system

Abstract

The invention discloses a Web-based dynamic rendering method and system, aiming at dynamic configuration and rendering of a form, a web container of a terminal is adopted to load server-side resources, resource dynamic updating and form configuration are realized, a mode of combining local cache resources and remote resources is adopted in terminal application, container rendering is used, mutual cooperation is adopted, and the form configuration is realized. According to a production application needing UI interface construction, a web container corresponding to the system, JSON files and resources in a server database and generated JSON data are constructed, target JSON data are analyzed, rendering is executed at an application end, and user display operation is executed. By implementing the method, front-end application development can be more efficient, and the development cost is reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of UI generation, and in particular to a Web dynamic rendering method and system. Background Art

[0002] With the rapid development of information technology and the continuous improvement of users' requirements for product experience, building and updating application development and UI interfaces has become a key link to meet users' needs. The existing technical solutions are independently developed for different operating systems, resulting in high labor costs. The disadvantages of the existing technologies are as follows: The main way to build and update the UI interface is for developers to manually modify the code and redeploy the application, and the timeliness cannot meet users' needs, and the convenience is low. Therefore, it is necessary to adjust the existing development method and perform dynamic rendering through server configuration.

[0003] In summary, a Web dynamic rendering method and system are needed to solve the deficiencies in the existing technologies. Summary of the Invention

[0004] In view of the deficiencies of the existing technologies, the present invention provides a Web dynamic rendering method and system, aiming to solve the above problems.

[0005] To achieve the above object, the present invention provides the following technical solution: A Web dynamic rendering method includes the following steps: Step S1: Build Web containers corresponding to multiple operating systems and assign relevant permissions to the containers according to requirements; Step S2: The server configures a corresponding JSON file for the target UI, generates JSON data and saves it; Step S3: The application end obtains JSON or resources, parses the data and resources, maps the information to the corresponding components, and performs an overwriting operation or an incremental operation; Step S4: According to the layout corresponding to the components, perform UI rendering and updating through the built Web containers.

[0006] Optionally, the Web containers in Step S1 are built in the following manner: After building the Web containers, load the resource files required for updating when the application starts or enters the background; Perform differential analysis, and perform rendering on the incremental part by comparing and analyzing the loaded resources; The front-end agrees on a component mapping table for converting the JSON data provided by the server into corresponding UI components; Pre-configure and cache the containers, pre-configure the application containers, and obtain them from the cache pool when needed; Manage the Web containers through the native application and dynamically allocate and release memory resources through the terminal operating system.

[0007] Optionally, the Web container uses the HTTP protocol to interact with the server, loads web page resources using the WebView function of the terminal system, and enables the permission settings for the normal operation of the container.

[0008] Optionally, the applications in the Web container are fortified by obfuscating function names and / or variable names, making the TypeScript code difficult to be reverse-engineered or stolen.

[0009] Optionally, the JSON information is configured in step S2 in the following manner: Step A1: Configure a JSON file. According to the target UI requirements of the application, configure the form to generate the corresponding JSON file; Step A2: Generate resources or JSON data. Based on the configured JSON file, generate the corresponding resources or JSON data; Step A3: Determine the file format. According to the preset rules, determine the file format information of the generated file; Step A4: Verify rule compliance. According to the inspection results, determine whether the JSON file is suitable for use by the front end. If so, it is suitable; otherwise, it needs to be further corrected or adjusted.

[0010] Optionally, the data and resources are parsed in step S3 in the following manner: Step B1: Parse the received data. Determine whether the JSON data resources conform to the predefined mapping rules to obtain a first result. If so, display the corresponding UI interface; otherwise, prompt an exception; Step B2: Perform full-load and execute differential analysis for optimization and update. For the first-time preloading, perform a full-load operation. After the preloading is completed, execute differential analysis based on the change of the hash value and update the changed part.

[0011] Optionally, the JSON data performs selective JSON data function extension for special functional requirements.

[0012] Optionally, the UI rendering in step S4 is performed in the following manner: Step C1: Perform the corresponding UI interface display operation according to the construction result of the rendering component, enabling the target application to achieve dynamic update of the UI interface; Step C2: Recursively construct the corresponding component objects according to the types and attributes defined in the JSON, define their relevant attributes, and load them using the Web container; Step C3: Deploy the project resources to the server, and deploy the developed project resources to the server.

[0013] A Web dynamic rendering system, adopting the Web dynamic rendering method, includes a construction module, a parsing module, a differential analysis module, and a rendering and display module; The construction module is used to construct Web containers corresponding to multiple operating systems; The parsing module is used to generate a target UI interface according to the JSON information configured by the server and parse the JSON data; The differential analysis module is used to perform differential analysis on the loaded resources and render the incremental part; The rendering and display module is used to perform the rendering operation and display the UI interface.

[0014] Advantages of the present invention: 1. In the present invention, the flexibility and iteration efficiency of the UI interface update at the application end are improved, the development efficiency is increased, and the cost is reduced; 2. In the present invention, for the dynamic configuration and rendering of forms, the web container of the terminal is used to load the server resources, so as to achieve dynamic resource update and form configuration. In the terminal application, the local cache resources and remote resources are combined, and the container rendering is used, which cooperate with each other; 3. In the present invention, for the production application that needs to construct the UI interface, the corresponding web container of the system, the JSON file and resources in the server database, the generated JSON data are parsed, the target JSON data is parsed, the rendering is performed at the application end, and the user display operation is performed. Implementing the present invention can make the front-end application development more efficient, reduce the development cost, and improve the user experience. Description of the Drawings

[0015] Figure 1 It is a schematic diagram of a method flow of the present invention.

[0016] Figure 2 It is a schematic diagram of the interaction between the application end and the server of the present invention. Detailed Embodiments

[0017] In order to more clearly illustrate the technical solutions in the embodiments of the invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments of the invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0018] As Figure 1 and Figure 2 shown, a Web dynamic rendering method includes the following: The first step: construct the web container at the application end: Build corresponding Web containers: For mainstream operating systems in the market (such as Android, iOS, HarmonyOS), build corresponding Web containers; when the application starts or enters the background, load the resource files required for updates.

[0019] Perform differential analysis: Compare and analyze the loaded resources, and only render the incremental part to reduce system consumption.

[0020] Develop a component mapping table: The front-end agrees on a component mapping table to convert the JSON data provided by the server into corresponding UI components.

[0021] Adopt the HTTP protocol (optional): Select to use the HTTP protocol as the way to interact with the server for data.

[0022] Utilize the system WebView (optional): Use the WebView function of the terminal system to load web page resources and enable necessary permission settings to ensure the normal operation of the container.

[0023] Configure and cache the container in advance: Pre-configure the application container and obtain it from the cache pool when needed to improve the loading speed and reduce the user waiting time.

[0024] Optimize the loading strategy in a weak network environment: When the network condition is poor, preferentially load the cached page resources; if an exception occurs during loading, prompt the user to improve the experience.

[0025] Manage the container and its memory allocation: The native application is responsible for managing the Web container, and relies on the terminal operating system to dynamically allocate and release memory resources.

[0026] Enhance mobile security: Implement reinforcement processing on the generated application and conduct compatibility tests to ensure its security and stability.

[0027] Obfuscate the code of the H5 application: Strengthen the H5 application in the container by obfuscating function names and variable names, etc., making it difficult for TypeScript code to be reverse engineered or stolen.

[0028] Monitor application crash information in real time: When the application crashes, automatically upload the crash log, including information such as device model, operating system version, and the number of affected users, etc., for a quick response and problem solving.

[0029] Second step: The server configures JSON information according to the agreement and the target UI Configure the JSON file: Configure the form according to the target UI requirements of the application to generate the corresponding JSON file.

[0030] Generate resources or JSON data: Based on the configured JSON file, generate the corresponding resources or JSON data for the application side to pull and use.

[0031] Determine the file format and verify rule compliance: Determine the generated file format information and check whether the file meets the preset rules.

[0032] Obtain the first result based on the inspection result: If the first result is "yes", confirm that the file is suitable for front-end use; if the first result is "no", it indicates that the file does not meet the preset rules and needs to be further corrected or adjusted.

[0033] Deploy the file: Deploy the generated file to the required electronic devices, including but not limited to servers. Local deployment or cloud deployment can be selected, and the specific method is not limited.

[0034] The third step: The application side pulls the latest JSON or resources and parses the data and resources Parse the data and verify the mapping rules: Parse the received data, determine whether the JSON resources conform to the predefined mapping rules, and obtain the first result.

[0035] If the first result is in line, display the corresponding UI interface; if not, throw an exception.

[0036] Initial full-load: For users who preload the application for the first time, directly perform the full-load operation without performing differential analysis.

[0037] Perform differential analysis to optimize updates: For users who have completed preloading, perform differential analysis based on the change of the hash value, and only update the changed part to avoid resource waste caused by full updates.

[0038] Extend JSON data (optional): Optionally, perform functional extensions on the obtained JSON data, such as adding local animation effects, etc., to enhance the user experience or meet specific functional requirements.

[0039] Pre-buried point for H5 project content: Set data collection points in advance during the development stage of the H5 project to provide valuable information and reference for later data analysis.

[0040] The fourth step: UI rendering Execute the UI interface display operation: Use the interface display module to perform the corresponding UI interface display operation according to the construction result of the rendering component, so that the target application realizes the dynamic update of the UI interface.

[0041] Development using the Vue framework (optional): Select to develop using the Vue framework and agree with the server on a consistent mapping table to ensure the correct conversion of data and components.

[0042] Recursively construct components and define properties: According to the types and properties defined in the JSON, recursively construct the corresponding component objects and define their related properties. Use the container constructed in step 1 for loading, without restricting the specific container type.

[0043] Deploy project resources to the server: Deploy the developed project resources to the server so that end users can access and use them.

[0044] Silently update the server JSON file (optional): When the JSON file on the server changes, the application side can update it as needed without the user's awareness.

[0045] Interaction format selection (optional): The interaction format between the server side and the application side can be selected as the JSON format, but the specific format is not limited in the embodiments of the present invention.

[0046] Handle exception situations: If the returned JSON does not meet the preset conditions, perform exception handling operations to ensure the stability of the application and the user experience.

[0047] Testing and release process: For the generated application, first conduct preliminary tests on mainstream system platforms such as Android, iOS, and HarmonyOS, and then conduct detailed tests for different models.

[0048] If the first test result is not ideal, perform hotfix; if the first result basically meets the expected goal, then gray release can be carried out and gradually promoted to a wider user group.

[0049] A Web dynamic rendering system based on the Web dynamic rendering method described above, including a construction module, a parsing module, a differential analysis module, and a rendering display module; The construction module is used to construct Web containers corresponding to multiple operating systems; The parsing module is used to generate a target UI interface according to the JSON information configured by the server and parse the JSON data; The differential analysis module is used to perform differential analysis on the loaded resources and render the incremental part; A rendering display module for performing rendering operations and displaying a UI interface.

[0050] A method, apparatus, and system for dynamically generating a front-end UI interaction interface based on a web container and JSON data. The method includes: constructing a corresponding web container for the system according to a production application that needs to construct a UI interface, JSON files and resources in a server database, generating JSON data, parsing the target JSON data, performing rendering on the application side, and performing user display operations. Implementing the present invention can make front-end application development more efficient, reduce development costs, and improve the user experience.

[0051] Terminal browser rendering is adopted to ensure the scalability of the application side. A computer device is provided, including: at least one processor; and a memory, where the memory stores a computer program that can run on the processor, and the computer program, when executed by the processor, implements the steps of the above method. A computer-readable storage medium is provided, and the computer-readable storage medium stores a computer program that, when executed by the processor, implements the steps of the above method.

[0052] Improve the flexibility and iteration efficiency of UI interface updates on the application side, improve development efficiency, and reduce costs; For the dynamic configuration and rendering of forms, the web container of the terminal is used to load server resources to achieve dynamic resource updates and form configuration. In the terminal application, a combination of local cached resources and remote resources is used, and container rendering is used and coordinated with each other. The invention is adapted to Android, iOS, and HarmonyOS; According to a production application that needs to construct a UI interface, construct a corresponding web container for the system, JSON files and resources in a server database, generate JSON data, parse the target JSON data, perform rendering on the application side, and perform user display operations. Implementing the present invention can make front-end application development more efficient, reduce development costs, and improve the user experience.

[0053] The above are only the preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent replacements, or improvements made within the spirit and principles of the present invention shall be included in the protection scope of the present invention.

Claims

1. A Web-based dynamic rendering method, characterized in that It includes the following steps: Step S1: Construct Web containers corresponding to multiple operating systems and assign relevant permissions to the containers according to requirements; Step S2: The server configures a corresponding JSON file for the target UI, generates JSON data and saves it; Step S3: The application side obtains JSON or resources, parses the data and resources, maps them to the corresponding components according to the information, and performs overwriting operations or incremental operations; Step S4: According to the layout corresponding to the components, perform UI rendering and update through the constructed Web containers.

2. The Web dynamic rendering method according to claim 1, wherein In the above Step S1, the Web containers are constructed in the following ways: After constructing the Web containers, load the resource files required for update when the application starts or enters the background; Differential analysis, by comparing and analyzing the loaded resources, render the incremental part; The front-end agrees on a component mapping table for converting the JSON data provided by the server into corresponding UI components; Pre-configure and cache the containers, pre-configure the application containers, and obtain them from the cache pool when needed; Manage the Web containers through the native application and dynamically allocate and release memory resources through the terminal operating system.

3. The Web dynamic rendering method according to claim 2, wherein The Web containers use the HTTP protocol to interact with the server for data, use the WebView function of the terminal system to load web resources, and enable the permission settings for the normal operation of the containers.

4. The Web dynamic rendering method according to claim 3, wherein The applications in the Web containers are fortified by obfuscating function names and / or variable names, making it difficult for TypeScript code to be reverse-engineered or stolen.

5. The Web dynamic rendering method according to claim 1, characterized in that In the above Step S2, the JSON information is configured in the following ways: Step A1: Configure the JSON file. According to the target UI requirements of the application, configure the form to generate the corresponding JSON file; Step A2: Generate resources or JSON data. Based on the configured JSON file, generate the corresponding resources or JSON data; Step A3: Determine the file format. According to the preset rules, determine the file format information of the generated file; Step A4: Verify the compliance with the rules. According to the inspection results, judge whether the JSON file is suitable for the front-end use. If so, it is suitable; otherwise, it needs to be further corrected or adjusted.

6. The Web dynamic rendering method according to claim 1, wherein In the above Step S3, the data and resources are parsed in the following ways: Step B1: Parse the received data, judge whether the JSON data resources conform to the predefined mapping rules, and get the first result. If so, display the corresponding UI interface; otherwise, prompt an exception; Step B2: Full-load and perform differential analysis for optimization and update. For the first preloading, perform a full-load operation. After the preloading is completed, perform differential analysis according to the change of the hash value and update the changed part.

7. The Web dynamic rendering method according to claim 6, wherein The JSON data performs selective JSON data function extension for special functional requirements.

8. The Web-based dynamic rendering method according to claim 1, wherein In the above Step S4, the UI rendering is performed in the following ways: Step C1: Perform the corresponding UI interface display operation according to the construction result of the rendering components, so that the target application realizes the dynamic update of the UI interface; Step C2: According to the types and attributes defined in the JSON, recursively construct the corresponding component objects, define their relevant attributes, and load them using the Web containers. Step C3: Deploy project resources to the server. Deploy the developed project resources to the server.

9. A Web-based dynamic rendering system that employs the Web-based dynamic rendering method described in any one of claims 1-8, characterized in that, It includes a building module, a parsing module, a differential analysis module, and a rendering and display module; The building module is used to build Web containers corresponding to multiple operating systems; The parsing module is used to generate a target UI interface according to the JSON information configured on the server side and parse the JSON data; The differential analysis module is used to perform differential analysis on the loaded resources and render the incremental part; The rendering and display module is used to perform rendering operations and display the UI interface.

Images