A method, apparatus, computer device, and storage medium for generating a page program

The pre-generated original program templates and templates obtain instructions, combined with functional logic screening and editing, solve the problem of inefficient web page development, and achieve flexible and efficient page program generation.

CN114168875BActive Publication Date: 2025-05-30DOUYIN VISION CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202111534778.7
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-12-15
Publication Date
2025-05-30
Estimated Expiration
2041-12-15

AI Technical Summary

Technical Problem

In the current web page development, developers need to determine the page access logic by themselves and write corresponding program code, which leads to inefficient development and the needs of different developers are difficult to meet.

Method used

By pre-creating the original program template, the original template code file containing a variety of original functional logic, the template acquisition instructions are used to obtain the required template, and the functional logic is filtered and edited to generate the target page program.

Benefits of technology

There is no need for developers to write corresponding code for each function, which significantly improves the efficiency of page development and meets the needs of different developers, reducing the need for adjustment of engineering frameworks.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114168875B_ABST
    Figure CN114168875B_ABST
Patent Text Reader

Abstract

The present disclosure provides a method for generating a page program, which is applied to a terminal device. The method includes: in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template includes: original template code files respectively corresponding to various original function logics of a page; the original template code files are organized according to a standard directory structure corresponding to the original program template; in response to a screening operation on various original function logics, generating a target program template based on the original template code file corresponding to the target function logic determined by the screening operation; receiving editing information for the target program template, and generating a target page program based on the editing information and the target program template.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present disclosure relates to the technical field of Web front - end, and more particularly, to a method, an apparatus, a computer device, and a storage medium for generating a page program. Background Art

[0002] Currently, with the development of the front - end technology of the World Wide Web (Web), there are more and more Web page development tasks. In the current page development work, developers need to determine the page access logic by themselves and write corresponding program codes. Since different R & D projects belong to different projects, each function of each page needs to be independently developed in different projects, which consumes a large amount of time and resources during the page development process, resulting in low development efficiency. Summary of the Invention

[0003] Embodiments of the present disclosure at least provide a method, an apparatus, a computer device, and a storage medium for generating a page program.

[0004] In a first aspect, an embodiment of the present disclosure provides a method for generating a page program, which is applied to a terminal device. The method includes: in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template includes: original template code files corresponding to various original function logics of a page; the original template code files are organized according to a standard directory structure corresponding to the original program template; in response to a screening operation on various original function logics, generating a target program template based on the original template code file corresponding to the target function logic determined by the screening operation; receiving editing information for the target program template, and generating a target page program based on the editing information and the target program template.

[0005] In an optional implementation, the step of in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction includes: in response to receiving the template acquisition instruction, based on the template identification information carried in the template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction from a server; wherein, at least one original program template is stored in the server.

[0006] In an alternative embodiment, the original program template further includes: a directory corresponding to the standard directory structure; the directory includes directory information corresponding to the original template code files respectively; generating a target program template for the original template code files corresponding to the target function logic determined based on the filtering operation in response to a filtering operation on multiple original function logics, including: displaying multiple original function logics; in response to determining a target function logic by performing a filtering operation on the original function logics, deleting the original template code files corresponding to non-target function logics from the original program template, and deleting the directory information corresponding to the non-target function logics from the directory corresponding to the standard directory, to obtain the target program template.

[0007] In an alternative embodiment, the editing information includes at least one of the following: page materials, page formats, and page content.

[0008] In an alternative embodiment, the original function logic includes at least one of the following: a rendering update logic of a page, a log reporting logic, a page listening logic, and an injection logic of adaptive information.

[0009] In an alternative embodiment, the original function logic includes: a rendering update logic of a page; the rendering update logic includes: in response to receiving an access request for the page, obtaining cache data of a fallback page of the page; in response to failing to obtain the cache data of the fallback page, sending a first data acquisition request to a Web server; receiving page data fed back by the Web server based on the first data acquisition request; the page data and the cache data are used to render and display the page in the rendering update logic of the page.

[0010] In an alternative embodiment, the rendering update logic further includes: in response to successfully obtaining the cache data of the fallback page, rendering and displaying the fallback page of the page based on the cache data.

[0011] In an alternative embodiment, the rendering update logic further includes: in response to successfully obtaining the page data by using the first acquisition request, rendering and displaying the page based on the page data.

[0012] In an alternative embodiment, the rendering update logic further includes: in response to failing to obtain the page data by using the first acquisition request, rendering and displaying a preset error page.

[0013] In an alternative embodiment, the cache data includes: global variables for the page and / or locally cached data for the page in advance;

[0014] In response to receiving an access request for the page, obtaining cache data of the fallback page of the page includes: initializing a page view Webview control, and using the initialized Webview control to obtain page data of the fallback page of the page from a first server; in response to successfully obtaining the page data of the page by using the Webview control, generating global variable data for the page based on the page data; and / or determining whether the local data exists based on a target storage location determined in advance for the local data.

[0015] In an alternative implementation, the rendering update logic further includes: in response to generating the global variable data and the local data existing at the target storage location, determining target data from the global variable data and the local data based on the global variable data and attribute information of the local data; the target data is used to render and display the page in the rendering update logic of the page.

[0016] In a second aspect, an embodiment of the present disclosure further provides a generating device for a page program, which is applied to a terminal device. The device includes:

[0017] An obtaining module, configured to obtain an original program template corresponding to the template obtaining instruction in response to receiving the template obtaining instruction; the original program template includes: original template code files respectively corresponding to multiple original function logics of the page; the original template code files are organized according to a standard directory structure corresponding to the original program template;

[0018] A first generating module, configured to generate a target program template based on the original template code file corresponding to the target function logic determined based on the filtering operation in response to a filtering operation on multiple original function logics;

[0019] A second generating module, configured to receive editing information for the target program template, and generate a target page program based on the editing information and the target program template.

[0020] In an alternative implementation, when obtaining the original program template corresponding to the template obtaining instruction in response to receiving the template obtaining instruction, the obtaining module is configured to obtain the original program template corresponding to the template obtaining instruction from a server based on template identification information carried in the template obtaining instruction in response to receiving the template obtaining instruction; wherein, at least one original program template is stored in the server.

[0021] In an alternative implementation, the original program template further includes: a directory corresponding to the standard directory structure; the directory includes directory information respectively corresponding to the original template code files.

[0022] In an alternative embodiment, when generating a target program template based on the original template code file corresponding to the target function logic determined based on the screening operation in response to the screening operation on multiple pieces of the original function logic, the first generation module is configured to display multiple pieces of the original function logic; in response to determining the target function logic by performing a screening operation on the original function logic, delete the original template code files corresponding to the non-target function logics from the original program template, and delete the directory information corresponding to the non-target function logics from the directories corresponding to the standard directory structure, so as to obtain the target program template.

[0023] In an alternative embodiment, the editing information includes at least one of the following: page materials, page formats, and page contents.

[0024] In an alternative embodiment, the original function logic includes at least one of the following: rendering update logic of a page, log reporting logic, page listening logic, and injection logic of adaptive information.

[0025] In an alternative embodiment, a processing module is further included, and the original function logic includes: rendering update logic of a page; when performing the rendering update logic, in response to receiving an access request for the page, obtaining cached data of a fallback page of the page; in response to a failure to obtain the cached data of the fallback page, sending a first data acquisition request to a Web server; receiving page data fed back by the Web server based on the first data acquisition request; the page data and the cached data are used to render and display the page in the rendering update logic of the page.

[0026] In an alternative embodiment, when performing the rendering update logic, the processing module is further configured to, in response to successfully obtaining the cached data of the fallback page, render and display the fallback page of the page based on the cached data.

[0027] In an alternative embodiment, when performing the rendering update logic, the processing module is further configured to, in response to successfully obtaining the page data by using the first acquisition request, render and display the page based on the page data.

[0028] In an alternative embodiment, when performing the rendering update logic, the processing module is further configured to, in response to a failure to obtain the page data by using the first acquisition request, render and display a preset error page.

[0029] In an alternative implementation, the cached data includes: global variables for the page, and / or locally cached data for the page; when the processing module receives an access request for the page and obtains the cached data of the fallback page of the page, it is further configured to initialize the page view Webview control, and use the initialized Webview control to obtain the page data of the fallback page of the page from a first server; in response to successfully obtaining the page data of the page by using the Webview control, generate global variable data for the page; and / or determine whether the local data exists based on a target storage location determined in advance for the local data.

[0030] In an alternative implementation, when the processing module renders and updates the logic, it is further configured to, in response to generating the global variable data and the local data existing at the target storage location, determine target data from the global variable data and the local data based on the global variable data and the attribute information of the local data; the target data is used to render and display the page in the rendering and update logic of the page.

[0031] In a third aspect, an alternative implementation of the present disclosure further provides a computer device, a processor, and a memory. The memory stores machine-readable instructions executable by the processor. The processor is configured to execute the machine-readable instructions stored in the memory. When the machine-readable instructions are executed by the processor, the machine-readable instructions execute the steps in the first aspect, or any possible implementation manner in the first aspect.

[0032] In a fourth aspect, an alternative implementation of the present disclosure further provides a computer-readable storage medium. A computer program is stored on the computer-readable storage medium. When the computer program is run, it executes the steps in the first aspect, or any possible implementation manner in the first aspect.

[0033] In the embodiments of the present disclosure, an original program template is pre-generated. In the original program template, there are original template code files corresponding to various original functional logics. During the process of page development, the required original program template can be called through a template acquisition instruction, and on the basis of the original program template, a screening operation of the functional logic is performed to generate a target program template, and then the target program template is edited to obtain a target page program. Therefore, it is not necessary for developers to write corresponding program codes for each function of the page during the page development process, which improves the development efficiency of the page. At the same time, based on the screening of the functional logic in the original program template by each developer, a target program template can be generated. Therefore, different needs of different developers can be met, and there is no need to manually adjust the engineering framework anymore. Instead, only the target program template needs to be edited, and the required codes are written in the target program template, further improving the development efficiency of the page.

[0034] To make the above objects, features, and advantages of the present disclosure more obvious and understandable, the following specific preferred embodiments are given, and in conjunction with the accompanying drawings, the detailed description is as follows. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] To more clearly illustrate the technical solutions of the embodiments of the present disclosure, the accompanying drawings required for use in the embodiments will be briefly introduced below. The accompanying drawings are incorporated into the specification and form a part of the specification. These drawings show embodiments that conform to the present disclosure and are used together with the specification to illustrate the technical solutions of the present disclosure. It should be understood that the following drawings only show some embodiments of the present disclosure, and therefore should not be regarded as limiting the scope. For those of ordinary skill in the art, other related drawings can be obtained based on these drawings without creative efforts.

[0036] Figure 1 The flowchart of a method for generating a page program provided by an embodiment of the present disclosure is shown;

[0037] Figure 2 The flowchart of a method for rendering and updating a page rendering and updating logic provided by an embodiment of the present disclosure is shown;

[0038] Figure 3 The schematic diagram of a specific process example for rendering and updating a page provided by an embodiment of the present disclosure is shown;

[0039] Figure 4 The schematic diagram of a specific process example for reading data provided by an embodiment of the present disclosure is shown;

[0040] Figure 5 The schematic diagram of a device for generating a page program provided by an embodiment of the present disclosure is shown;

[0041] Figure 6 The figure shows a schematic diagram of a computer device provided by an embodiment of the present disclosure. Detailed implementation manners

[0042] To make the objectives, technical solutions, and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present disclosure. Obviously, the described embodiments are only a part rather than all of the embodiments of the present disclosure. Components of the embodiments of the present disclosure described and illustrated herein can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present disclosure is not intended to limit the scope of the claimed present disclosure, but merely represents selected embodiments of the present disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of the present disclosure without creative efforts shall fall within the scope of protection of the present disclosure.

[0043] Through research, it is found that when developing Web pages currently, in one way, developers can determine by themselves the access logic of the required pages and write corresponding code. This results in that during the software development stage, corresponding program code needs to be written for each function of the page. Since different R & D projects belong to different projects, each function of each software needs to be independently developed in different projects, and most software has the same functions, which leads to a large amount of time and resources being consumed during the software development process, causing the problem of low development efficiency. In another way, developers can delete code based on the already developed project and write corresponding code under the project framework obtained after code deletion. However, since page development is usually a collaborative effort among multiple people and different developers are responsible for developing different functions, the project framework obtained in this way usually cannot meet the usage requirements and habits of all developers. During the development process, it will be readjusted by the corresponding developers, and the code in the project framework needs to be further deleted, added, or adjusted by developers according to their own needs to meet the usage requirements of developers. This readjustment process of the project framework can also cause the problem of low efficiency during page development.

[0044] Based on the above research, the present disclosure provides a method for generating a page program. By pre-generating an original program template, the original program template includes original template code files corresponding to various original functional logics. During the process of page development, the required original program template can be called through a template acquisition instruction, and the screening operation of the original functional logic can be performed on the basis of the original program template to generate a target program template. Then, the target program template is edited to obtain the target page program. Therefore, it is not necessary for developers to write corresponding program codes for each function of the page during the page development process, which improves the development efficiency of the page. At the same time, based on the screening of the functional logic in the original program template by each developer, a target program template can be generated. Therefore, different requirements of different developers can be met, and there is no need to manually adjust the engineering framework anymore. Instead, only the target program template needs to be edited, and the required codes are written in the target program template, further improving the development efficiency of the page.

[0045] All the defects existing in the above solutions are the results obtained by the inventors through practice and careful research. Therefore, the process of discovering the above problems and the solutions proposed by the present disclosure for the above problems in the following text should be the contributions made by the inventors to the present disclosure during the process of the present disclosure.

[0046] It should be noted that similar reference numerals and letters denote similar items in the following figures. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0047] To facilitate the understanding of this embodiment, first, a method for generating a page program disclosed in the embodiments of the present disclosure will be introduced in detail. The execution subject of the method for generating a page program provided in the embodiments of the present disclosure is generally a computer device with certain computing capabilities. Such a computer device includes, for example: a terminal device or a server or other processing devices. The terminal device may be a user equipment (UE), a mobile device, a user terminal, a terminal, etc. In some possible implementation manners, the method for generating a page program may be implemented by a processor calling computer-readable instructions stored in a memory.

[0048] The method for generating a page program provided in the embodiments of the present disclosure will be described below.

[0049] See Figure 1 As shown, it is a flowchart of the method for generating a page program provided in the embodiments of the present disclosure. The method includes steps S101 to S103, where:

[0050] S101: In response to receiving a template acquisition instruction, acquire an original program template corresponding to the template acquisition instruction; the original program template includes: original template code files respectively corresponding to various original functional logics of a page; the original template code files are organized according to a standard directory structure corresponding to the original program template;

[0051] S102: In response to a screening operation on various original functional logics, generate a target program template based on the original template code file corresponding to the target functional logic determined by the screening operation;

[0052] S103: Receive editing information for the target program template, and generate a target page program based on the editing information and the target program template.

[0053] In the embodiments of the present disclosure, in response to receiving a template acquisition instruction, an original program template corresponding to the template acquisition instruction is acquired; the original program template includes: original template code files respectively corresponding to various original functional logics of a page; the original template code files are organized according to a standard directory structure corresponding to the original program template; then, in response to a screening operation on various functional logics, a target program template is generated based on the original template code file corresponding to the target functional logic determined by the screening operation; receive editing information for the target program template, and generate a target page program based on the editing information and the target program template, so that by pre-generating an original program template and using the original program template as the template for the page program, it is not necessary for developers to write corresponding program codes for each function of the page during page development, improving the development efficiency of the page; at the same time, a target program template can be generated based on the screening of the functional logics in the original program template by each developer, so that different needs of different developers can be met, and there is no need to manually readjust the engineering framework anymore, but only need to edit the target program template and write the required codes in the target program template, further improving the development efficiency of the page.

[0054] The following will elaborate on the above steps S101 - S103 in detail.

[0055] In the above S101, the original functional logic can be implemented, for example, through a higher-order component of PageWrap. The role of the higher-order component of PageWrap is to wrap the page. All common methods and the logic of automatic filling within the page are implemented in the higher-order component of PageWrap. The original program template consists of the following parts: directory structure definition (i.e., the standard directory structure in the following text), necessary project configuration files and tool configuration files, tools and commands. Among them, the necessary project configuration files, tool configuration files, tools and commands are encapsulated into original template code files corresponding to different original functional logics. There is directory information of the corresponding original functional logic in the standard directory structure of the original program template. The directory folder of this original functional logic lists the original template code files corresponding to the original functional logic and the organizational relationship between the original template code files. By running the code in the original template code files, the functional logic in the page is implemented.

[0056] According to actual usage requirements, at least one original program template can be pre-generated. Among them, in the case where there are multiple original program templates, the functional logics in different original program templates are at least partially different.

[0057] For different original program templates, corresponding template identification information can be set for them, for example. The template identification information can include, for example: the type of the original program template, such as: shopping, reading, news, etc. Since different types of original program templates have different requirements. For example, for the original program template of the reading type, there is no need to monitor the dwell time. While for the original program template of the shopping type, it is necessary to monitor the dwell time of the user on a certain page to confirm whether the user is interested in the products related to the web page, which is convenient for subsequent product information push. Therefore, different functional logics can be set for different original program templates. In order to distinguish different original program templates, their types can be used as their corresponding template identification information.

[0058] In addition, the template identification information of the original program template can also be an identification agreed upon among developers. Through this identification, developers can use the same original program template to implement the development of the same page program.

[0059] In a specific embodiment, the present disclosure embodiment also provides a specific example of obtaining an original program template corresponding to the template acquisition instruction in response to receiving the template acquisition instruction, including:

[0060] In response to receiving the template acquisition instruction, based on the template identification information carried in the template acquisition instruction, an original program template corresponding to the template acquisition instruction will be obtained from the server, where there is at least one original program template in the server.

[0061] Exemplarily, in this embodiment, taking the method of executing a page program in a terminal device for page development as an example, a developer can input a template acquisition instruction in the terminal device; the terminal device sends the template acquisition instruction to the server; when the template acquisition instruction carries template identification information; after receiving the template acquisition instruction transmitted by the terminal device, the server matches the template identification information carried in the template acquisition instruction with the template identification information corresponding to at least one original program template stored in advance, and uses the successfully matched original program template as the original program template required by the terminal device and sends it to the terminal device.

[0062] In another embodiment, the original function logics in a page, for example, include at least one of the following: the rendering update logic of the page, the log reporting logic, the page listening logic, and the injection logic of adaptive information.

[0063] Among them, the rendering update logic of the page is used to render and display the page in the graphical user interface of the terminal. It may include specific function logics such as specific data prefetching, data caching, and data injection.

[0064] Exemplarily, as shown in Figure 2 the rendering update logic of the page includes the following steps S201 to S203, where:

[0065] S201: In response to receiving an access request for the page, obtain the cached data of the fallback page of the page;

[0066] Here, the fallback page of the page refers to the page information browsed last time, and this page still retains the traces of the last access, that is, the cached data in the page will be read. When an access request for the page is received, it will be judged whether there is cached data.

[0067] In addition, the fallback page of the page can also be rendered using global variables. The acquisition method of the global variables can be seen in the description of C below and will not be elaborated here.

[0068] S202: In response to the failure to obtain the cached data of the fallback page, send a first data acquisition request to the Web server;

[0069] Here, the first data request includes page data. When sending a request to the Web server, during the request process of the data, the Loading state is displayed, and the style of the Loading state is changed to the required Loading style through the style CSS.

[0070] In addition, in response to the successful acquisition of the cached data of the fallback page response, the fallback page of the rendering page will be displayed based on the cached data.

[0071] S203: Receive the page data fed back by the Web server based on the first data acquisition request; the page data and the cached data are used to render and display the page in the rendering and updating logic of the page.

[0072] There will be the following two situations A to B when the Web server feeds back based on the first data acquisition request:

[0073] A: In response to successfully acquiring the page data using the first data acquisition request, render and display the page based on the page data.

[0074] Here, in response to sending a first data acquisition request to the Web server and the Web server successfully returning the page data, render and display the page based on the received page data.

[0075] B: In response to failing to acquire the page data using the first data acquisition request, render and display a preset error page.

[0076] Here, due to abnormal backend return or some error validations at the front end, in response to failing to acquire the page data using the first data acquisition request, use the ErrorBoundary component in React to detect error data in the page, capture errors anywhere in their child component tree, and print out these errors and present a fallback UI to replace the component tree where exceptions occur; among them, when an error occurs on the page, display the error page through the page-level ErrorBoundary error. If an error occurs in a certain component on the page, for example, the server suddenly shows the signs of 503 or 502 and the front end cannot obtain the response, and at this time a certain component reports an error, then detect the error component through the component-level ErrorBoundary and re-render the page.

[0077] Based on the cached data of the fallback page of the page obtained in response to receiving an access request to the page in the embodiments of the present disclosure, the cached data includes: global variables for the page and / or locally cached data for the page in advance, and further includes the following steps C to D:

[0078] C: Initialize the page view Webview control, and use the initialized Webview control to obtain the page data of the fallback page of the page from the first server; in response to successfully obtaining the page data of the page using the Webview control, generate global variable data for the page based on the page data.

[0079] Here, the page view Webview control, which is also a browser, obtains the page data of the fallback page of the page from the first server through the browser. After the Webview obtains the data, when the child thread in the browser starts, it injects the page data of the fallback page of the page into the global variable.

[0080] Regarding injecting the page data of the fallback page of the page into the global variable, when the browser loads the JS, it will start the JS thread. Through the JS thread, it obtains the global variable obtained by the child thread. Based on the global variable and the page resources, the JS thread renders the page; the page resources include the style structure (HTML), styles (CSS), and interaction logic (JS).

[0081] When the page has a visible event or an invisible event, it will directly send a real-time request for page data to the Web server through the JS thread, and then reload the page data to render the page.

[0082] In addition, when the browser renders the page, from obtaining the page structure html document from the Hyper Text Transfer Protocol (HTTP) server to presenting the page to the user, the following steps will be involved:

[0083] c1. Parse the document to build the Document Object Model (DOM) tree. The parsing content of the browser can be divided into three parts:

[0084] Page structure (HTML / XHTML / Scalable Vector Graphics (SVG)): After parsing these three types of files, a DOM tree will be generated.

[0085] Styles CSS: Parse the style sheet to generate a CSS rule tree.

[0086] Interaction logic JavaScript: Parse the script and operate on the DOM Tree and CSS Rule Tree through the DOM Application Program Interface (API) and CSS Object Model (CSSOM) API to interact with the user.

[0087] The execution order of the above three types of files will be different according to their positions in the document and the different tag attributes.

[0088] c2. Build the render tree

[0089] After the parsing of the document is completed, the browser engine attaches the CSS Rule Tree to the DOM Tree and constructs the Rendering Tree based on the DOM Tree and the CSS Rule Tree.

[0090] To match the CSS Rule Tree to the DOM Tree, the CSS selectors need to be parsed. To improve the performance of this process, the DOM tree should be as small as possible, and the CSS selectors should preferably use id selectors and class selectors to avoid excessive cascading.

[0091] c3. Layout and rendering of the rendering tree

[0092] Parse attributes such as position, overflow, z-index, etc., calculate the position and size of each rendering tree node. This process is called reflow. Finally, call the native graphics interface API of the operating system to complete the painting (repain).

[0093] D: Based on the target storage location determined in advance for the local data, determine whether the local data exists.

[0094] Here, the target storage location of the local data is determined in advance. Based on the storage location of the local data of the terminal device, it is necessary to determine whether the local data exists in the target storage location; if the local data does not exist, a first data acquisition request will be sent to the Web server through the browser to obtain page data for rendering the page.

[0095] For the case where the local data exists in the target storage location and the global variable exists, in response to generating the global variable data and the existence of the local data in the target storage location, based on the global variable data and the attribute information of the local data, target data is determined from the global variable data and the local data;

[0096] The target data is used to render and display the page in the rendering update logic of the page.

[0097] Exemplarily, the attributes of the local data include the time of the local data and the priority level of the local data; comparing the global variable with the local data, if the update time of the local data is the most recent and the priority level is high, the target data is determined from the local data, otherwise, the target data is determined from the global variable.

[0098] See Figure 3 As shown, the embodiments of the present disclosure also provide a specific process example for rendering and updating a page, including:

[0099] Webview (Main Process): Initialize and send a page request to the server's first-screen interface; after obtaining the page data, inject the page data into global variables, load JS, and start the JS thread.

[0100] Front End (JS Thread): After startup, execute the interaction logic included in the JS thread; obtain global variables from the Webview or read local data to render the first-screen page. In this process, it first obtains global variables from the Webview; if the global variable acquisition fails, it reads local data; if the local data reading fails, it sends a page request to the server's first-screen interface.

[0101] After the JS starts, it first needs to read cached data to render the page. See Figure 4 As shown, the embodiments of the present disclosure also provide a specific process example for reading data, including:

[0102] Front End (JS Thread): Read cached data, where the cached data includes global variables and local data; if the browser successfully obtains the global variable, render the fallback page based on the global variable and update the page data of the fallback page; if the browser fails to obtain the global variable, it will further obtain local data. If the local data is successfully obtained, render the fallback page based on the local data and update the page data of the fallback page and store it back in the cache.

[0103] Front End (JS Thread): If the cached data acquisition fails, send a first data acquisition request to the Web server and display the Loading status.

[0104] Web Server: Receive the first data acquisition request and feedback the request information.

[0105] Front End (JS Thread): After successfully obtaining the page data, perform page rendering based on the obtained page data. If the first data acquisition request fails to obtain the page data, display an error page.

[0106] Front End (JS Thread): In response to events such as the visible event or automatic trigger event, re-request the first-screen data to refresh the page content.

[0107] The embodiments of the present disclosure also provide other original function logics, where the original function logics include at least one of the following: log reporting logic, page listening logic, and adaptive information injection logic; among them, the log reporting logic: after a front-end page is published, factors such as the device on which the page runs, the browser, the network environment, and the user's operation habits may all be the reasons for the abnormal page. The log reporting logic is used to monitor the page to a certain extent, monitor whether the page is running normally, collect data such as errors and performance, and report this data to the server; in addition, after collecting the log data generated by the execution of the business logic, a Uniform Resource Locator (URL) is constructed in the form of a parameter, and then sent to the server through an Image request to complete the log reporting.

[0108] Page listening logic: In mobile pages, users have a very low tolerance for page response latency, so it is necessary to monitor the page; by listening to the reported page views (PVs) when the user enters the page, burying points, that is, page views, reporting the first-screen duration, and at the same time listening to the visible and invisible states, then calculating the user's stay duration on the page, detecting the page performance, and improving the user experience.

[0109] Adaptive information injection logic: The page container judges the font size and skin color mode displayed on the page, injects a global mark uniformly at the page entry, and can uniformly change the font size, font style, and skin color mode through CSS styles.

[0110] After receiving the original program template sent by the cloud server, the terminal device stores the original program template in a preset storage space, which is convenient for further screening operations on each original function logic in the original program template based on the screening method described in S102 of the present disclosure.

[0111] In the above S102, when screening multiple original function logics, for example, the following method can be adopted:

[0112] Display multiple original function logics;

[0113] In response to determining the target function logic after screening the original function logic, delete the original template code file corresponding to the non-target function logic from the original program template, and delete the directory information corresponding to the non-target function logic from the directory corresponding to the standard directory structure to obtain the target program template.

[0114] In a specific implementation, in the original program template, it includes a directory corresponding to the standard directory structure; the directory includes directory information corresponding to the original template code files respectively.

[0115] When displaying multiple original function logics, for example, directory information corresponding to each brain function logic can be displayed; developers can select the required target function logic from the original program template through the filtering operation on the directory information.

[0116] Then, delete the original template code file corresponding to the non-target function logic from the original program template.

[0117] In addition, since the original template code files are organized according to the standard directory structure, when deleting the original template code file corresponding to the non-target function logic from the original program template, it is also necessary to delete the directory information corresponding to the non-target function logic from the directory corresponding to the standard directory structure to obtain a new standard directory structure.

[0118] Furthermore, since there may be multiple original template code files corresponding to multiple original function logics of the page, there can be sub-directory structures corresponding to multiple original function logics in the standard directory structure, and each sub-directory structure includes directory information corresponding to multiple original template code files corresponding to the corresponding original function logic.

[0119] When performing a filtering operation on multiple original function logics in the original program template, for example, according to different page requirements, for different function logics, filter out the target function logic from the obtained original program template, and delete the sub-directory structure of the non-target function logic from the standard directory structure to obtain a new standard directory structure.

[0120] Based on the obtained new standard directory structure and the original template code file corresponding to the target function logic, a target program template is formed.

[0121] In the above S103, based on the obtained target program template, developers can perform editing, input the required editing information for the target program template, and generate a target page program based on the editing information and the target program template.

[0122] Among them, the editing information includes, for example, at least one of the following: page materials, page formats, and page content.

[0123] Exemplarily, page materials include icons, pictures, text information, sounds, videos, and other web links used in the page, page formats include font sizes, specific positions of page materials and page content, etc.; page content includes text content, picture content, etc. of the page.

[0124] In addition, the editing information may further include: functional codes for other logical functions that developers can secondarily write based on the functional requirements of the software on the basis of the target program template.

[0125] By editing the target program template, a complete target page program is finally generated. Those skilled in the art can understand that in the above method of the specific implementation manner, the writing order of each step does not mean a strict execution order that constitutes any limitation on the implementation process, and the specific execution order of each step should be determined according to its function and possible internal logic.

[0126] Based on the same inventive concept, the embodiments of the present disclosure also provide a device for generating a page program corresponding to the method for generating a page program. Since the principle of solving problems by the device in the embodiments of the present disclosure is similar to the above method for generating a page program in the embodiments of the present disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0127] Refer to Figure 5 As shown in the figure, it is a schematic diagram of a device for generating a page program provided by an embodiment of the present disclosure. The device includes: an acquisition module 50, a first generation module 51, and a second generation module 52; wherein,

[0128] The acquisition module 50 is configured to, in response to receiving a template acquisition instruction, acquire an original program template corresponding to the template acquisition instruction; the original program template includes: original template code files respectively corresponding to various original functional logics of the page; the original template code files are organized according to a standard directory structure corresponding to the original program template.

[0129] The first generation module 51 is configured to, in response to a screening operation on various original functional logics, generate a target program template based on the original template code file corresponding to the target functional logic determined by the screening operation.

[0130] The second generation module 52 is configured to receive editing information of the target program template, and generate a target page program based on the editing information and the target program template.

[0131] In an optional implementation manner, when the acquisition module 50 acquires the original program template corresponding to the template acquisition instruction in response to receiving the template acquisition instruction, it is configured to, in response to receiving the template acquisition instruction, acquire the original program template corresponding to the template acquisition instruction from the server based on the template identification information carried in the template acquisition instruction; wherein, at least one original program template is stored in the server.

[0132] In an alternative embodiment, the original program template further includes: a directory corresponding to the standard directory structure; the directory includes directory information corresponding to the original template code files respectively.

[0133] In an alternative embodiment, when the first generation module 51 generates a target program template based on the original template code files corresponding to the target functional logic determined based on the filtering operation in response to the filtering operation on multiple original functional logics, it is configured to display multiple original functional logics; in response to determining the target functional logic by performing a filtering operation on the original functional logics, delete the original template code files corresponding to the non-target functional logics from the original program template, and delete the directory information corresponding to the non-target functional logics from the directory corresponding to the standard directory structure, so as to obtain the target program template.

[0134] In an alternative embodiment, the editing information includes at least one of the following: page materials, page formats, and page content.

[0135] In an alternative embodiment, the original functional logic includes at least one of the following: rendering update logic of a page, log reporting logic, page listening logic, and injection logic of adaptive information.

[0136] In an alternative embodiment, it further includes a processing module 53, and the original functional logic includes: rendering update logic of a page; when performing the rendering update logic, it is configured to, in response to receiving an access request for the page, obtain cached data of the fallback page of the page; in response to failing to obtain the cached data of the fallback page, send a first data acquisition request to a Web server; receive page data fed back by the Web server based on the first data acquisition request; the page data and the cached data are used to render and display the page in the rendering update logic of the page.

[0137] In an alternative embodiment, when performing the rendering update logic, the processing module 53 is further configured to, in response to successfully obtaining the cached data of the fallback page, render and display the fallback page of the page based on the cached data.

[0138] In an alternative embodiment, when performing the rendering update logic, the processing module 53 is further configured to, in response to successfully obtaining the page data by using the first acquisition request, render and display the page based on the page data.

[0139] In an alternative embodiment, when performing the rendering update logic, the processing module 53 is further configured to, in response to failing to obtain the page data by using the first acquisition request, render and display a preset error page.

[0140] In an alternative embodiment, the cached data includes: global variables for the page, and / or locally cached data for the page; when receiving an access request for the page and obtaining the cached data of the fallback page of the page, the processing module 53 is further configured to initialize a page view Webview control, and use the initialized Webview control to obtain the page data of the fallback page of the page from a first server; in response to successfully obtaining the page data of the page by using the Webview control, generate global variable data for the page; and / or determine whether the locally cached data exists based on a target storage location determined in advance for the locally cached data.

[0141] In an alternative embodiment, when rendering and updating the logic, the processing module 53 is further configured to, in response to generating the global variable data and the locally cached data existing at the target storage location, determine target data from the global variable data and the locally cached data based on the global variable data and the attribute information of the locally cached data; the target data is used to render and display the page in the rendering and updating logic of the page.

[0142] Descriptions of the processing procedures of the various modules in the device and the interaction procedures between the various modules may refer to the relevant descriptions in the above method embodiments and will not be elaborated here.

[0143] Embodiments of the present disclosure further provide a computer device, as Figure 6 shown, which is a schematic structural diagram of the computer device provided by the embodiments of the present disclosure, including:

[0144] a processor 61 and a memory 62; the memory 62 stores machine-readable instructions executable by the processor 61, and the processor 61 is configured to execute the machine-readable instructions stored in the memory 62. When the machine-readable instructions are executed by the processor 61, the processor 61 performs the following steps:

[0145] In response to receiving a template acquisition instruction, acquire an original program template corresponding to the template acquisition instruction; the original program template includes: original template code files corresponding to various original function logics of a page; the original template code files are organized according to a standard directory structure corresponding to the original program template;

[0146] In response to a screening operation on the various original function logics, generate a target program template based on the original template code file corresponding to the target function logic determined by the screening operation;

[0147] Receive editing information for the target program template, and generate a target page program based on the editing information and the target program template.

[0148] The above-mentioned memory 62 includes an internal memory 621 and an external memory 622; the internal memory 621 here is also called the main memory, which is used to temporarily store the operation data in the processor 61 and the data exchanged with the external memory 622 such as a hard disk. The processor 61 exchanges data with the external memory 622 through the internal memory 621.

[0149] For the specific execution process of the above instructions, reference can be made to the steps of the method for generating a page program described in the embodiments of the present disclosure, which will not be elaborated here.

[0150] The embodiments of the present disclosure also provide a computer-readable storage medium, on which a computer program is stored. When the computer program is run by a processor, it executes the steps of the method for generating a page program described in the above method embodiments. Among them, the storage medium can be a volatile or non-volatile computer-readable storage medium.

[0151] The embodiments of the present disclosure also provide a computer program product, which carries program codes. The instructions included in the program codes can be used to execute the steps of the method for generating a page program described in the above method embodiments. For details, reference can be made to the above method embodiments, which will not be elaborated here.

[0152] Among them, the above computer program product can be specifically implemented in a manner of hardware, software or a combination thereof. In an alternative embodiment, the computer program product is specifically embodied as a computer storage medium. In another alternative embodiment, the computer program product is specifically embodied as a software product, such as a Software Development Kit (SDK), etc.

[0153] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the above-described systems and devices can refer to the corresponding processes in the foregoing method embodiments, which will not be elaborated here. In several embodiments provided by the present disclosure, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. The device embodiments described above are only illustrative. For example, the division of the units is only a logical function division, and there may be other division methods in actual implementation. For another example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some communication interfaces. The indirect coupling or communication connection of the devices or units can be in an electrical, mechanical or other forms.

[0154] The unit described as a separation component may or may not be physically separated. The component shown as a unit may or may not be a physical unit, that is, it may be located in one place or may be distributed over multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0155] In addition, in each embodiment of the present disclosure, each functional unit may be integrated in a processing unit, may exist physically alone for each unit, or two or more units may be integrated in one unit.

[0156] If the above function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such an understanding, the technical solution of the present disclosure, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present disclosure. The foregoing storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs that can store program codes.

[0157] Finally, it should be noted that the above-described embodiments are only specific implementation manners of the present disclosure, used to illustrate the technical solutions of the present disclosure, and are not intended to limit them. The protection scope of the present disclosure is not limited thereto. Although the present disclosure has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: any person skilled in the art within the technical scope disclosed by the present disclosure can still modify the technical solutions recorded in the foregoing embodiments or can easily think of changes, or perform equivalent replacements on some of the technical features; and these modifications, changes, or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present disclosure, and should all be covered by the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be subject to the protection scope of the claims.

Claims

1. A method for generating a page program, characterized in that, applied to a terminal device, the method includes: In response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template includes: original template code files respectively corresponding to various original function logics of the page; the original template code files are organized according to a standard directory structure corresponding to the original program template; In response to a screening operation on various original function logics, generating a target program template based on the original template code file corresponding to the target function logic determined by the screening operation and a new standard directory structure; Receiving editing information for the target program template, and generating a target page program based on the editing information and the target program template.

2. The method for generating a page program according to claim 1, characterized in that, the step of in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction includes: In response to receiving the template acquisition instruction, based on the template identification information carried in the template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction from a server; wherein, at least one original program template is stored in the server.

3. The method for generating a page program according to claim 1 or 2, characterized in that, the original program template further includes: a directory corresponding to the standard directory structure; the directory includes directory information respectively corresponding to the original template code files; the step of in response to a screening operation on various original function logics, generating a target program template based on the original template code file corresponding to the target function logic determined by the screening operation includes: Displaying various original function logics; In response to determining a target function logic by performing a screening operation on the original function logics, deleting the original template code files corresponding to non-target function logics from the original program template, and deleting the directory information corresponding to the non-target function logics from the directory corresponding to the standard directory structure, to obtain the target program template.

4. The method for generating a page program according to claim 1, characterized in that, the editing information includes at least one of the following: Page materials, page formats, and page content.

5. The method for generating a page program according to claim 1, characterized in that, the original function logics include at least one of the following: The rendering update logic of the page, the log reporting logic, the page monitoring logic, and the injection logic of adaptive information.

6. The method for generating a page program according to claim 5, characterized in that, the original function logics include: the rendering update logic of the page; the rendering update logic includes: In response to receiving an access request for the page, acquiring cached data of the fallback page of the page; In response to failing to acquire the cached data of the fallback page, sending a first data acquisition request to a Web server; Receiving page data fed back by the Web server based on the first data acquisition request; The page data and the cache data are used to render and display the page in the rendering and updating logic of the page.

7. The method for generating a page program according to claim 6, wherein, the rendering and updating logic further includes: In response to successfully obtaining the cache data of the fallback page, rendering and displaying the fallback page of the page based on the cache data.

8. The method for generating a page program according to claim 6, wherein, the rendering and updating logic further includes: In response to successfully obtaining the page data by using the first data acquisition request, rendering and displaying the page based on the page data.

9. The method for generating a page program according to claim 6, wherein, the rendering and updating logic further includes: In response to the failure of obtaining the page data by using the first data acquisition request, rendering and displaying a preset error page.

10. The method for generating a page program according to claim 6, wherein, the cache data includes: global variables for the page and / or locally cached data for the page in advance; The step of obtaining the cache data of the fallback page of the page in response to receiving an access request for the page includes: Initializing the page view Webview control, and using the initialized Webview control to obtain the page data of the fallback page of the page from a first server; in response to successfully obtaining the page data of the page by using the Webview control, generating global variable data for the page based on the page data; and / or, Determining whether the local data exists based on a target storage location determined in advance for the local data.

11. The method for generating a page program according to claim 10, wherein, the rendering and updating logic further includes: In response to generating the global variable data and the local data existing at the target storage location, determining target data from the global variable data and the local data based on the global variable data and the attribute information of the local data; The target data is used to render and display the page in the rendering and updating logic of the page.

12. A device for generating a page program, which is applied to a terminal device, and the device includes: An acquisition module, configured to acquire an original program template corresponding to the template acquisition instruction in response to receiving the template acquisition instruction; The original program template includes: original template code files corresponding to various original function logics of the page; the original template code files are organized according to a standard directory structure corresponding to the original program template; A first generation module, configured to generate a target program template based on the original template code file corresponding to the target function logic determined by the screening operation and a new standard directory structure in response to a screening operation on various original function logics; A second generation module, configured to receive editing information for the target program template, and generate a target page program based on the editing information and the target program template.

13. A computer device, wherein, it includes: A processor and a memory, the memory stores machine-readable instructions executable by the processor, the processor is configured to execute the machine-readable instructions stored in the memory, and when the machine-readable instructions are executed by the processor, the processor executes the generation steps of the page program according to any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that, a computer program is stored on the computer-readable storage medium, and when the computer program is run by a computer device, the computer device executes the generation steps of the page program according to any one of claims 1 to 11.

Citation Information

Patent Citations

  • Front-end page construction method and device and electronic equipment

    CN110968311A

  • Page rendering method and system, equipment and storage medium

    CN113254819A

  • Data processing method and device, equipment and storage medium

    CN113656041A