CN114168875A - Page program generation method and device, computer equipment and storage medium - Google Patents

Page program generation method and device, computer equipment and storage medium Download PDF

Info

Publication number
CN114168875A
CN114168875A CN202111534778.7A CN202111534778A CN114168875A CN 114168875 A CN114168875 A CN 114168875A CN 202111534778 A CN202111534778 A CN 202111534778A CN 114168875 A CN114168875 A CN 114168875A
Authority
CN
China
Prior art keywords
page
template
original
data
program
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111534778.7A
Other languages
Chinese (zh)
Inventor
彭志国
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN202111534778.7A priority Critical patent/CN114168875A/en
Publication of CN114168875A publication Critical patent/CN114168875A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/33Intelligent editors
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming

Abstract

The disclosure provides a method for generating a page program, which is applied to a terminal device, wherein the method comprises the following steps: in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template; responding to the screening operation of various original function logics, and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation; and receiving editing information of the target program template, and generating a target page program based on the editing information and the target program template.

Description

Page program generation method and device, computer equipment and storage medium
Technical Field
The present disclosure relates to the technical field of Web front ends, and in particular, to a method and an apparatus for generating a page program, a computer device, and a storage medium.
Background
At present, with the development of World Wide Web (Web) front-end technology, Web pages are developed more and more. In the current page development work, developers need to determine page access logic and write corresponding program codes, because different research and development projects belong to different projects, each function of each page needs to be developed independently in different projects, and the problem of low development efficiency caused by consumption of a large amount of time and resources in the page development process exists.
Disclosure of Invention
The embodiment of the disclosure at least provides a method and a device for generating a page program, computer equipment and a storage medium.
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, and 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 comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template; responding to the screening operation of various original function logics, and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation; and receiving editing information of the target program template, and generating a target page program based on the editing information and the target program template.
In an optional implementation, the obtaining, in response to receiving a template obtaining instruction, an original program template corresponding to the template obtaining instruction includes: in response to receiving the template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction from a server based on template identification information carried in the template acquisition instruction; wherein, the server stores at least one original program template.
In an optional embodiment, the original program template further includes: the directory corresponding to the standard directory structure; the directory comprises directory information respectively corresponding to the original template code files; the generating of the target program template based on the original template code file corresponding to the target function logic determined by the screening operation in response to the screening operation on the plurality of original function logics comprises: displaying a plurality of original function logics; and responding to the screening operation of the original function logic to determine a target function logic, deleting an original template code file corresponding to the non-target function logic from the original program template, and deleting the directory information corresponding to the non-target function logic from the directory corresponding to the standard directory to obtain the target program template.
In an alternative embodiment, the edit information includes at least one of: page material, page format, and page content.
In an alternative embodiment, the original function logic comprises at least one of: the method comprises the steps of rendering and updating logic of a page, log reporting logic, page monitoring logic and adaptive information injection logic.
In an alternative embodiment, the original function logic comprises: rendering update logic of the page; the rendering update logic comprising: responding to the received access request of the page, and acquiring cache data of a bottom page of the page; responding to failure of obtaining the cache data of the pocket bottom page, and sending a first data obtaining 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 for rendering and displaying the page in the rendering and updating logic of the page.
In an optional embodiment, the rendering update logic further comprises: and in response to the success of obtaining the cache data of the pocket bottom page, rendering and displaying the pocket bottom page of the page based on the cache data.
In an optional implementation, the rendering update logic further includes: and rendering and displaying the page based on the page data in response to the success of acquiring the page data by using the first acquisition request.
In an optional embodiment, the rendering update logic further comprises: and rendering and displaying a preset error page in response to failure of acquiring the page data by using the first acquisition request.
In an optional embodiment, the caching data includes: global variables for the page, and/or pre-cached local data for the page;
the obtaining cache data of a bottom page of the page in response to receiving the access request to the page comprises: initializing a Webview control, and acquiring page data of a bottom page of the page from a first server by using the initialized Webview control; responding to success of acquiring page data of the page by using the Webview control, and generating global variable data aiming at the page based on the page data; and/or determining whether the local data exists based on a target storage location determined for the local data in advance.
In an optional embodiment, the rendering update logic further comprises: in response to generating the global variable data and the local data existing in 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 for rendering and displaying the page in the rendering and updating logic of the page.
In a second aspect, an embodiment of the present disclosure further provides an apparatus for generating a page program, which is applied to a terminal device, where the apparatus includes:
the system comprises an acquisition module, a processing module and a processing module, wherein the acquisition module is used for responding to a received template acquisition instruction and acquiring an original program template corresponding to the template acquisition instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template;
the first generation module is used for responding to screening operation of various original function logics and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation;
and the second generation module is used for receiving the editing information of the target program template and generating the target page program based on the editing information and the target program template.
In an optional implementation manner, when the original program template corresponding to the template obtaining instruction is obtained in response to receiving the template obtaining instruction, the obtaining module is configured to obtain, in response to receiving the template obtaining instruction, the original program template corresponding to the template obtaining instruction from a server based on template identification information carried in the template obtaining instruction; wherein, the server stores at least one original program template.
In an optional embodiment, the original program template further includes: the directory corresponding to the standard directory structure; the directory includes directory information respectively corresponding to the original template code files.
In an optional implementation manner, the first generating module is configured to display a plurality of types of original function logics when the target program template is generated based on an original template code file corresponding to a target function logic determined by the screening operation in response to the screening operation on the plurality of types of original function logics; and responding to the screening operation of the original function logic to determine a target function logic, deleting an original template code file corresponding to the non-target function logic from the original program template, and deleting directory information corresponding to the non-target function logic from a directory corresponding to the standard directory structure to obtain the target program template.
In an alternative embodiment, the edit information includes at least one of: page material, page format, and page content.
In an alternative embodiment, the original function logic comprises at least one of: the method comprises the steps of rendering and updating logic of a page, log reporting logic, page monitoring logic and adaptive information injection logic.
In an alternative embodiment, the system further comprises a processing module, and the original function logic comprises: rendering update logic of the page; the rendering updating logic is used for responding to the received access request of the page and acquiring the cache data of the bottom page of the page; responding to failure of obtaining the cache data of the pocket bottom page, and sending a first data obtaining 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 for rendering and displaying the page in the rendering and updating logic of the page.
In an optional embodiment, the processing module, when rendering the update logic, is further configured to render and display a bottom page of the page based on the cache data in response to a success in obtaining the cache data of the bottom page.
In an optional embodiment, the processing module, when rendering the update logic, is further configured to render and display the page based on the page data in response to the page data being successfully obtained by using the first obtaining request.
In an optional implementation manner, the processing module, during the rendering update logic, is further configured to render and display a preset error page in response to failure of acquiring the page data by using the first acquisition request.
In an optional embodiment, the caching data includes: global variables for the page, and/or pre-cached local data for the page; the processing module is used for initializing a page view Webview control when the cache data of the bottom page of the page is acquired in response to the received access request of the page, and acquiring the page data of the bottom page of the page from a first server by using the initialized Webview control; responding to success of acquiring page data of the page by using the Webview control, and generating global variable data aiming at the page based on the page data; and/or determining whether the local data exists based on a target storage location determined for the local data in advance.
In an optional embodiment, the processing module, when rendering the update logic, is further configured to determine target data from the global variable data and the local data based on attribute information of the global variable data and the local data in response to generating the global variable data and the local data in the target storage location; the target data is used for rendering and displaying the page in the rendering and updating logic of the page.
In a third aspect, this disclosure also provides a computer device, a processor, and a memory, where the memory stores machine-readable instructions executable by the processor, and 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 machine-readable instructions are executed by the processor to perform the steps in the first aspect or any one of the possible implementations of the first aspect.
In a fourth aspect, this disclosure also provides a computer-readable storage medium having a computer program stored thereon, where the computer program is executed to perform the steps in the first aspect or any one of the possible implementation manners of the first aspect.
The method comprises the steps that an original program template is generated in advance, and original template code files corresponding to various original function logics are included in the original program template; in the process of page development, a command can be obtained through a template, a required original program template is called, functional logic screening operation is carried out on the basis of the original program template to generate a target program template, and then the target program template is edited to obtain a target page program, so that developers do not need to compile corresponding program codes for each function of a page in the page development process, and the page development efficiency is improved; meanwhile, the target program template can be generated based on the screening of each developer on the functional logic in the original program template, so that different requirements of different developers can be met, the engineering framework does not need to be readjusted manually, only the target program template needs to be edited, required codes are written in the target program template, and the development efficiency of the page is further improved.
In order to make the aforementioned objects, features and advantages of the present disclosure more comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings required for use in the embodiments will be briefly described below, and the drawings herein incorporated in and forming a part of the specification illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the technical solutions of the present disclosure. It is appreciated that the following drawings depict only certain embodiments of the disclosure and are therefore not to be considered limiting of its scope, for those skilled in the art will be able to derive additional related drawings therefrom without the benefit of the inventive faculty.
Fig. 1 is a flowchart illustrating a method for generating a page program according to an embodiment of the present disclosure;
FIG. 2 is a flowchart illustrating a method for rendering and updating page rendering and updating logic according to an embodiment of the disclosure;
FIG. 3 is a schematic diagram illustrating an example of a specific process for rendering an update page according to an embodiment of the present disclosure;
fig. 4 is a schematic diagram illustrating a specific flow of reading data provided by an embodiment of the present disclosure;
fig. 5 is a schematic diagram illustrating a device for generating a page program according to an embodiment of the disclosure;
fig. 6 shows a schematic diagram of a computer device provided by an embodiment of the present disclosure.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present disclosure more clear, the technical solutions of the embodiments of the present disclosure will be described clearly and completely with reference to the drawings in the embodiments of the present disclosure, and it is obvious that the described embodiments are only a part of the embodiments of the present disclosure, not all of the embodiments. The components of embodiments of the present disclosure, as generally described and illustrated herein, may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present disclosure is not intended to limit the scope of the disclosure, as claimed, but is merely representative of selected embodiments of the disclosure. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the disclosure without making creative efforts, shall fall within the protection scope of the disclosure.
Research shows that when Web page development is carried out at present, in one mode, developers can determine and need access logic of pages and write corresponding codes by themselves, so that corresponding program codes need to be written for each function of the pages in the development stage of software, different research and development projects belong to different projects, each function of each software needs to be independently developed in different projects, and most of the software has the same function, so that a great amount of time and resources are consumed in the software development process, and the problem of low development efficiency is caused; in another mode, a developer can delete codes on the basis of the developed engineering and write corresponding codes under an engineering framework obtained after the codes are deleted; however, as multiple persons usually cooperate during page development, different developers are responsible for developing different functions; the engineering framework obtained in the way can not meet the use requirements and use habits of all developers generally, and can be readjusted by the corresponding developers in the development process, codes in the engineering framework can meet the use requirements of the developers by further deleting, increasing or adjusting the codes according to the needs of the developers, and the readjustment process of the engineering framework can also cause the problem of low efficiency in page development.
Based on the research, the disclosure provides a page program generating method, which includes generating an original program template in advance, wherein the original program template includes original template code files corresponding to a plurality of original function logics; in the process of page development, a required original program template can be called by acquiring an instruction through the template, the original function logic screening operation is carried out on the basis of the original program template to generate a target program template, and then the target program template is edited to obtain a target page program, so that developers do not need to compile corresponding program codes for each function of a page in the page development process, and the page development efficiency is improved; meanwhile, the target program template can be generated based on the screening of each developer on the functional logic in the original program template, so that different requirements of different developers can be met, the engineering framework does not need to be readjusted manually, only the target program template needs to be edited, required codes are written in the target program template, and the development efficiency of the page is further improved.
The above-mentioned drawbacks are the results of the inventor after practical and careful study, and therefore, the discovery process of the above-mentioned problems and the solutions proposed by the present disclosure to the above-mentioned problems should be the contribution of the inventor in the process of the present disclosure.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
To facilitate understanding of the present embodiment, first, a method for generating a page program disclosed in the embodiments of the present disclosure is described in detail, where an 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 capability, and the computer device includes, for example: a terminal device, which may be a User Equipment (UE), a mobile device, a User terminal, a terminal, or other processing devices. In some possible implementations, the method for generating the pagelet may be implemented by a processor calling computer readable instructions stored in a memory.
The following describes a method for generating a page program according to an embodiment of the present disclosure.
Referring to fig. 1, which is a flowchart of a method for generating a page program according to an embodiment of the present disclosure, the method includes steps S101 to S103, where:
s101: in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template;
s102: responding to the screening operation of various original function logics, and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation;
s103: and receiving editing information of the target program template, and generating a target page program based on the editing information and the target program template.
The method comprises the steps of responding to a received template obtaining instruction, and obtaining an original program template corresponding to the template obtaining instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template; then, in response to the screening operation of various functional logics, generating a target program template based on an original template code file corresponding to the target functional logic determined by the screening operation; receiving the editing information of the target program template, and generating a target page program based on the editing information and the target program template, so that a developer does not need to compile corresponding program codes for each function of a page in the page development process by pre-generating an original program template and using the original program template as the template of the page program, and the development efficiency of the page is improved; meanwhile, the target program template can be generated based on the screening of each developer on the functional logic in the original program template, so that different requirements of different developers can be met, the engineering framework does not need to be readjusted manually, only the target program template needs to be edited, required codes are written in the target program template, and the development efficiency of the page is further improved.
The following describes steps S101 to S103 in detail.
In S101 above, the original function logic may be implemented by, for example, a page container (PageWrap) high-level component, the page container (PageWrap) high-level component is used to wrap a page, all common methods and automatically filled logic in the page are implemented in the PageWrap high-level component, and the original program template is composed of the following parts: directory structure definitions (i.e., standard directory structures hereinafter), necessary project profiles and tool profiles, tools and commands. The necessary project configuration file and tool configuration file, and the tool and command are packaged into original template code files corresponding to different original function logics respectively. The standard directory structure in the original program template has the corresponding directory information of the original function logic, the directory folder of the original function logic has the original template code file corresponding to the original function logic and the organization relation between the original template code files, and the function logic in the page is realized by operating the codes in the original template code file.
At least one original program template can be generated in advance according to actual use requirements. Wherein, in the case that the original program template has a plurality of types, the functional logic in different original program templates is at least partially different.
For different original program templates, for example, corresponding template identification information may be set; the template identification information may include, for example: types of original program templates, for example: shopping, reading, news, … …, etc.; for example, for the original program template of the type reading, the retention time period does not need to be monitored, and for the original program template of the type shopping, the retention time period of the user in a certain page needs to be monitored to confirm whether the user is interested in the commodities related to the webpage, so that subsequent commodity information push is facilitated. Thus, different functional logic can be set for different original program templates. In order to distinguish different original program templates, the type thereof may be used as template identification information corresponding thereto.
In addition, the template identification information of the original program template can also be an identification agreed by developers; through the identification, developers can utilize the same original program template to realize the development of the same page program.
In a specific embodiment, an embodiment of the present disclosure further provides a specific example of acquiring, in response to receiving a template acquisition instruction, an original program template corresponding to the template acquisition instruction, where the specific example includes:
and in response to the received template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction from a server based on template identification information carried in the template acquisition instruction, wherein at least one original program template exists in the server.
For example, in this embodiment, taking a method for executing a page program in a terminal device for performing page development as an example, a developer may input a template acquisition instruction in the terminal device; the terminal equipment sends the template acquisition instruction to the server; the template acquisition instruction carries template identification information; after receiving a template acquisition instruction transmitted by the terminal equipment, the server matches template identification information carried in the template acquisition instruction with template identification information respectively corresponding to at least one kind of original program template stored in advance, and sends the original program template successfully matched as the original program template required by the terminal equipment to the terminal equipment.
In another embodiment, the original functional logic in the page includes, for example, at least one of: the method comprises the steps of rendering and updating logic of a page, log reporting logic, page monitoring logic and adaptive information injection logic.
And the rendering updating logic of the page is used for rendering the display page in the graphical user interface of the terminal. Which may include specific functional logic for data prefetching, data caching, data injection, etc.
Illustratively, referring to fig. 2, the rendering update logic of the page includes the following steps S201 to S203, wherein:
s201: responding to the received access request of the page, and acquiring cache data of a bottom page of the page;
here, the bottom page of the page refers to information of a page browsed last time, the page also retains a trace of last access, that is, cache data in the page is read, and when an access request for the page is received, whether the cache data exists is determined.
In addition, the bottom pocket pages of the pages can be obtained by rendering through the global variables. The manner of acquiring the global variable may be described in the following C, and is not described herein.
S202: responding to failure of obtaining the cache data of the pocket bottom page, and sending a first data obtaining request to a Web server;
here, the first data request includes page data, and when the request is sent to the Web server, the data displays a Loading state in the request process, and the style of the Loading state changes the required Loading style through the style CSS.
In addition, in response to the success in obtaining the cached data of the bottom page response, the bottom page of the rendered page is displayed based on the cached data.
S203: 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 for rendering and displaying the page in the rendering and updating logic of the page.
The Web server feeds back the following two conditions A-B based on the first data acquisition request:
a: and rendering and displaying the page based on the page data in response to the success of acquiring the page data by using the first data acquisition request.
Here, in response to sending the first data acquisition request to the Web server, the Web server successfully returns page data, and renders and displays the page based on the received page data.
B: and rendering and displaying a preset error page in response to failure of acquiring the page data by using the first data acquisition request.
Here, in response to failure to acquire the page data with the first data acquisition request due to either a back-end returning exception or some error checking by the front-end, error data in the page is detected by an error border component (error boundary) in read, by capturing errors anywhere in their sub-level component trees, and printing out these errors and presenting a prepare ui (fallback ui), thereby replacing those component trees in which an exception occurred; when a page has an error, the error page is displayed through a page-level error, if a certain component in the page has an error, for example, the server suddenly displays the identifiers of 503 and 502, the front end cannot obtain a response, and when a certain component reports an error, the error component is detected through the component-level error, and the page is re-rendered.
The embodiment of the present disclosure obtains, based on the response to the received access request for the page, cache data of a bottom page of the page, where the cache data includes: the method comprises the following steps of C-D, aiming at global variables of the page and/or pre-cached local data aiming at the page:
c: initializing a Webview control, and acquiring page data of a bottom page of the page from a first server by using the initialized Webview control; and responding to success of acquiring the page data of the page by using the Webview control, and generating global variable data aiming at the page based on the page data.
The Webview control, namely the browser, acquires page data of a bottom page of a page from a first server through the browser, and after the Webview acquires the data and a sub-thread in the browser is started, the page data of the bottom page of the acquired page is injected into a global variable.
Injecting page data of a bottom page of a page into a global variable, starting a JS thread when a JS is loaded by a browser, acquiring the global variable acquired by a sub-thread through the JS thread, and rendering the page by the JS thread based on the global variable and page resources; the page resource comprises a style structure (HTML), a style (CSS) and an interaction logic (JS).
When a visible event or an invisible event occurs on a page, real-time request page data is directly sent to the Web server through the JS thread, and then the page data is reloaded to render the page.
In addition, when the browser renders a page, the browser obtains a page structure html document from a hypertext Transfer Protocol (HTTP) server, and the page is presented to a user through the following steps:
c1, parsing the parsing content of Document Object Model (DOM) tree browser can be divided into three parts:
page structure (HTML/XHTML/Vector Graphics (SVG)): after the three files are analyzed, a DOM Tree (DOM Tree) is generated.
Style CSS: the style sheet is parsed to generate a CSS Rule Tree (CSS Rule Tree).
JavaScript for interactive logic: and analyzing the script, and operating a DOM Tree and a CSS Rule Tree through a DOM Application Programming Interface (API) and a CSS object model (CSSOM) API to interact with a user.
The execution sequence of the above three types of files can be different according to the positions of the files in the document and the different execution sequences of the tag attributes of the files.
c2, constructing rendering tree
After the document is analyzed, the browser engine attaches the CSS Rule Tree to the DOM Tree and constructs a Rendering Tree according to the DOM Tree and the CSS Rule Tree.
Matching the CSS Rule Tree to the DOM Tree requires parsing the selector of the CSS, in order to improve the performance of the process, the DOM Tree should be as small as possible, and the CSS selector should use the id selector and the class selector as much as possible to avoid excessive stacking.
c3 layout and rendering tree
Resolving attributes such as position, overflow, level (z-index), etc., and calculating the position and size of each render tree node, which is called reflow. And finally calling a local graphic interface API of the operating system to finish drawing (repain).
D: determining whether the local data exists based on a target storage location previously determined for the local data.
Here, a target storage location of the local data is determined in advance, and based on the storage location of the local data of the terminal device, it is required to determine whether the local data exists in the target storage location; and if the local data does not exist, sending a first data acquisition request to the Web server through the browser, and acquiring page data to render the page.
For the existence of local data in a target storage location and the existence of the global variable, the disclosed embodiments determine target data from the global variable data and the local data based on the global variable data and attribute information of the local data in response to generating the global variable data and the existence of the local data in the target storage location;
the target data is used for rendering and displaying the page in the rendering and updating logic of the page.
Illustratively, the attribute of the local data includes a time of the local data, a priority level of the local data; and comparing the global variable with the local data, determining the target data from the local data if the update time of the local data is the latest time and the priority level is high, and otherwise, determining the target data from the global variable.
Referring to fig. 3, an embodiment of the present disclosure further provides a specific flow example of rendering an update page, including:
webview (main process): initializing and sending a page request to a first screen interface of a server; and after the page data are obtained, injecting the page data into the global variable, loading the JS, and starting the JS thread.
Front end (JS thread): after starting, executing interaction logic included in the JS thread; and acquiring a global variable from the Webview, or reading local data to render the first screen page. In the process, firstly, a global variable is obtained from Webview; if the global variable acquisition fails, reading local data; and if the local data reading fails, sending a page request to a first screen interface of the server.
After the JS is started, firstly, cache data needs to be read to render a page, as shown in fig. 4, an embodiment of the present disclosure further provides a specific flow example of reading data, including:
front end (JS thread): reading cache data, wherein the cache data comprises global variables and local data; the browser successfully obtains the global variable, renders a pocket bottom page based on the global variable, and updates page data of the pocket bottom page; if the browser fails to acquire the global variable, local data are further acquired, if the local data are acquired successfully, the pocket bottom page is rendered based on the local data, and page data of the updated pocket bottom page are stored in the cache again.
Front end (JS thread): and when the cache data acquisition fails, sending a first data acquisition request to the Web server, and displaying the Loading state.
A Web server: and receiving a first data acquisition request and feeding back request information.
Front end (JS thread): and after the page data are successfully acquired, rendering the page based on the acquired page data. And if the first data acquisition request fails to acquire the page data, displaying an error page.
Front end (JS thread): and in response to the behavior of a visible event or an automatic trigger event and the like, re-requesting the first screen data to refresh the page content.
Embodiments of the present disclosure also provide other original function logic, where the original function logic includes at least one of: log reporting logic, page monitoring logic and adaptive information injection logic; wherein, the log reporting logic: after a front-end page is published, the device, browser, network environment, user operation habit, etc. on which the page runs may be the cause of the page being abnormal. The log reporting logic is used for monitoring the page to a certain extent, monitoring whether the page normally runs or not, collecting data such as errors and performance and reporting the data to the server; in addition, after collecting log data generated by executing the service logic, a Uniform Resource Locator (URL) is constructed in the form of a parameter, and then the URL is sent to the server through an Image request to complete the report of the log.
The page monitoring logic: in the mobile terminal page, the tolerance of the user to the response delay of the page is very low, so the page needs to be monitored; the method comprises the steps of reporting the visit volume (PV) when a monitoring user enters a Page, burying points, namely the Page visit volume, reporting the first screen time length, monitoring the visible state and the invisible state, calculating the stay time length of the user on the Page, detecting the performance of the Page, and improving the experience of the user.
Adaptive information injection logic: the font size and the skin color mode displayed on the page are judged by the page container, the global mark is uniformly injected into the page entrance, and the font size, the font style and the skin color mode can be uniformly changed through the style CSS.
After receiving the original program template sent by the cloud server, the terminal device stores the original program template in a certain preset storage space, so that each original function logic in the original program template can be conveniently subjected to further screening operation based on the screening mode of the disclosure S102.
In the above S102, in the screening operation on a plurality of kinds of the original function logic, for example, the following manner may be adopted:
displaying a plurality of original function logics;
and responding to the screening operation of the original function logic to determine a target function logic, deleting an original template code file corresponding to the non-target function logic from the original program template, and deleting directory information corresponding to the non-target function logic from a directory corresponding to the standard directory structure to obtain the target program template.
In specific implementation, a catalog corresponding to a standard catalog structure is included in an original program template; the directories include directory information respectively corresponding to the original template code files.
When displaying a plurality of original function logics, for example, directory information corresponding to each brain function logic may be displayed; the developer can select the required target function logic from the original program template through the screening operation of the directory information.
And then, deleting the original template code file corresponding to the non-target function logic from the original program template.
In addition, since the original template code file is organized according to the standard directory structure, when the original template code file corresponding to the non-target function logic is deleted from the original program template, the directory information corresponding to the non-target function logic needs to be deleted from the directory corresponding to the standard directory structure, so as to obtain a new standard directory structure.
Furthermore, because there may be a plurality of original template code files corresponding to a plurality of original function logics of the page, there may be a sub-directory structure corresponding to a plurality of original function logics in the standard directory structure, and each sub-directory structure includes directory information corresponding to a plurality of original template code files corresponding to the corresponding original function logics.
When the screening operation is performed on multiple original function logics in the original program template, for example, the target function logic can be screened from the obtained original program template for different function logics according to different page requirements, and the sub-directory structure of the non-target function logic is deleted from the standard directory structure to obtain a new standard directory structure.
And constructing a target program template based on the obtained new labeling directory structure and the original template code file corresponding to the target function logic.
In S103, the developer can edit the acquired target program template, input the required editing information for the target program template, and generate the target page program based on the editing information and the target program template.
Wherein, the editing information includes at least one of the following: page material, page format, and page content.
Illustratively, the page materials include icons, pictures, text information, sounds, videos and other related web page links used in the page, and the page format includes font size, specific positions of the page materials and the page contents, and the like; the page content includes text content, picture content, and the like of the page.
In addition, the editing information may further include, for example: and a developer can write functional codes of other logic functions secondarily on the basis of the target program template according to the functions required by the software.
And finally generating a complete target page program by editing the target program template. It will be understood by those skilled in the art that in the method of the present invention, the order of writing the steps does not imply a strict order of execution and any limitations on the implementation, and the specific order of execution of the steps should be determined by their function and possible inherent logic.
Based on the same inventive concept, a device for generating a page program corresponding to the method for generating a page program is also provided in the embodiments of the present disclosure, and because the principle of solving the problem of the device in the embodiments of the present disclosure is similar to the method for generating a page program in the embodiments of the present disclosure, the implementation of the device may refer to the implementation of the method, and repeated details are not described.
Referring to fig. 5, a schematic diagram of an apparatus for generating a page program according to an embodiment of the present disclosure is shown, where the apparatus includes: an acquisition module 50, a first generation module 51, a second generation module 52; wherein the content of the first and second substances,
an obtaining module 50, configured to, in response to receiving a template obtaining instruction, obtain an original program template corresponding to the template obtaining instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template;
a first generating module 51, configured to respond to a screening operation on a plurality of types of original function logics, and generate an object program template based on an original template code file corresponding to an object function logic determined by the screening operation;
and a second generating module 52, 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.
In an optional implementation manner, when the original program template corresponding to the template obtaining instruction is obtained in response to receiving the template obtaining instruction, the obtaining module 50 is configured to obtain, in response to receiving the template obtaining instruction, the original program template corresponding to the template obtaining instruction from a server based on template identification information carried in the template obtaining instruction; wherein, the server stores at least one original program template.
In an optional embodiment, the original program template further includes: the directory corresponding to the standard directory structure; the directory includes directory information respectively corresponding to the original template code files.
In an alternative embodiment, the first generating module 51 is configured to display a plurality of types of original function logic when the target program template is generated based on an original template code file corresponding to the target function logic determined by the screening operation in response to the screening operation on the plurality of types of original function logic; and responding to the screening operation of the original function logic to determine a target function logic, deleting an original template code file corresponding to the non-target function logic from the original program template, and deleting directory information corresponding to the non-target function logic from a directory corresponding to the standard directory structure to obtain the target program template.
In an alternative embodiment, the edit information includes at least one of: page material, page format, and page content.
In an alternative embodiment, the original function logic comprises at least one of: the method comprises the steps of rendering and updating logic of a page, log reporting logic, page monitoring logic and adaptive information injection logic.
In an alternative embodiment, further comprising a processing module 53, the original function logic comprises: rendering update logic of the page; the rendering updating logic is used for responding to the received access request of the page and acquiring the cache data of the bottom page of the page; responding to failure of obtaining the cache data of the pocket bottom page, and sending a first data obtaining 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 for rendering and displaying the page in the rendering and updating logic of the page.
In an optional embodiment, the processing module 53, in the rendering update logic, is further configured to render and display a bottom page of the page based on the cache data in response to the cache data of the bottom page being successfully obtained.
In an optional embodiment, the processing module 53, when rendering the update logic, is further configured to render and display the page based on the page data in response to the page data being successfully obtained by using the first obtaining request.
In an optional embodiment, the processing module 53, during the rendering update logic, is further configured to render and display a preset error page in response to failure of acquiring the page data by using the first acquisition request.
In an optional embodiment, the caching data includes: global variables for the page, and/or pre-cached local data for the page; the processing module 53 is further configured to initialize a page view Webview control when the cache data of the bottom page of the page is obtained in response to receiving the access request for the page, and obtain the page data of the bottom page of the page from the first server by using the initialized Webview control; responding to success of acquiring page data of the page by using the Webview control, and generating global variable data aiming at the page based on the page data; and/or determining whether the local data exists based on a target storage location determined for the local data in advance.
In an optional embodiment, the processing module 53, when rendering the update logic, is further configured to, in response to generating the global variable data and the local data in the target storage location, determine target data from the global variable data and the local data based on attribute information of the global variable data and the local data; the target data is used for rendering and displaying the page in the rendering and updating logic of the page.
The description of the processing flow of each module in the device and the interaction flow between the modules may refer to the related description in the above method embodiments, and will not be described in detail here.
An embodiment of the present disclosure further provides a computer device, as shown in fig. 6, which is a schematic structural diagram of the computer device provided in the embodiment of the present disclosure, and the computer device includes:
a processor 61 and a memory 62; the memory 62 stores machine-readable instructions executable by the processor 61, the processor 61 being configured to execute the machine-readable instructions stored in the memory 62, the processor 61 performing the following steps when the machine-readable instructions are executed by the processor 61:
in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template;
responding to the screening operation of various original function logics, and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation;
and receiving editing information of the target program template, and generating a target page program based on the editing information and the target program template.
The memory 62 includes a memory 621 and an external memory 622; the memory 621 is also referred to as an internal memory, and temporarily stores operation data in the processor 61 and data exchanged with the external memory 622 such as a hard disk, and the processor 61 exchanges data with the external memory 622 via the memory 621.
The specific execution process of the instruction may refer to the steps of the method for generating a page program described in the embodiments of the present disclosure, and details are not described here.
The embodiments of the present disclosure also provide a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the computer program performs the steps of the method for generating a page program in the foregoing method embodiments. The storage medium may be a volatile or non-volatile computer-readable storage medium.
The embodiments of the present disclosure also provide a computer program product, where the computer program product carries a program code, and instructions included in the program code may be used to execute the steps of the method for generating a page program in the foregoing method embodiments, which may be referred to specifically in the foregoing method embodiments, and are not described herein again.
The computer program product may be implemented by hardware, software or a combination thereof. In an alternative embodiment, the computer program product is embodied in a computer storage medium, and in another alternative embodiment, the computer program product is embodied in a Software product, such as a Software Development Kit (SDK), or the like.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the system and the apparatus described above may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again. In the several embodiments provided in the present disclosure, it should be understood that the disclosed system, apparatus, and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present disclosure may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such understanding, the technical solution of the present disclosure may be embodied in the form of a software product, which 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) to execute all or part of the steps of the method according to the embodiments of the present disclosure. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
Finally, it should be noted that: the above-mentioned embodiments are merely specific embodiments of the present disclosure, which are used for illustrating the technical solutions of the present disclosure and not for limiting the same, and the scope of the present disclosure is not limited thereto, and although the present disclosure is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive of the technical solutions described in the foregoing embodiments or equivalent technical features thereof within the technical scope of the present disclosure; such modifications, changes or substitutions do not depart from the spirit and scope of the embodiments of the present disclosure, and should be construed as being included therein. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.

Claims (14)

1. A method for generating a page program is applied to a terminal device, and comprises the following steps:
in response to receiving a template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template;
responding to the screening operation of various original function logics, and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation;
and receiving editing information of 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, wherein the acquiring, in response to receiving a template acquisition instruction, an original program template corresponding to the template acquisition instruction comprises:
in response to receiving the template acquisition instruction, acquiring an original program template corresponding to the template acquisition instruction from a server based on template identification information carried in the template acquisition instruction; wherein, the server stores at least one original program template.
3. The method for generating a pageprogram according to claim 1 or 2, wherein the original program template further comprises: the directory corresponding to the standard directory structure; the directory comprises directory information respectively corresponding to the original template code files;
the generating of the target program template based on the original template code file corresponding to the target function logic determined by the screening operation in response to the screening operation on the plurality of original function logics comprises:
displaying a plurality of original function logics;
and responding to the screening operation of the original function logic to determine a target function logic, deleting an original template code file corresponding to the non-target function logic from the original program template, and deleting directory information corresponding to the non-target function logic from a 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, wherein the edit information includes at least one of:
page material, page format, and page content.
5. The method for generating a pagelet in accordance with claim 1, wherein the original functional logic comprises at least one of:
the method comprises the steps of rendering and updating logic of a page, log reporting logic, page monitoring logic and adaptive information injection logic.
6. The method for generating a pagelet in accordance with claim 5, wherein said primitive function logic comprises: rendering update logic of the page;
the rendering update logic comprising:
responding to the received access request of the page, and acquiring cache data of a bottom page of the page;
responding to failure of obtaining the cache data of the pocket bottom page, and sending a first data obtaining 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 for rendering and displaying 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 update logic further comprises:
and in response to the success of obtaining the cache data of the pocket bottom page, rendering and displaying the pocket bottom page of the page based on the cache data.
8. The method for generating a page program according to claim 6, wherein the rendering update logic further comprises:
and rendering and displaying the page based on the page data in response to the success of acquiring the page data by using the first data acquisition request.
9. The method for generating a page program according to claim 6, wherein the rendering update logic further comprises:
and rendering and displaying a preset error page in response to failure of acquiring the page data by using the first data acquisition request.
10. The method for generating a pager according to claim 6, wherein the caching data comprises: global variables for the page, and/or pre-cached local data for the page;
the obtaining cache data of a bottom page of the page in response to receiving the access request to the page comprises:
initializing a Webview control, and acquiring page data of a bottom page of the page from a first server by using the initialized Webview control; responding to success of acquiring page data of the page by using the Webview control, and generating global variable data aiming at the page based on the page data;
and/or the presence of a gas in the gas,
determining whether the local data exists based on a target storage location previously determined for the local data.
11. The method for generating a page program according to claim 10, wherein the rendering update logic further comprises:
in response to generating the global variable data and the local data existing in 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 for rendering and displaying 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, comprises:
the system comprises an acquisition module, a processing module and a processing module, wherein the acquisition module is used for responding to a received template acquisition instruction and acquiring an original program template corresponding to the template acquisition instruction; the original program template comprises: the page comprises original template code files corresponding to various original function logics of the page respectively; the original template code file is organized according to a standard directory structure corresponding to the original program template;
the first generation module is used for responding to screening operation of various original function logics and generating a target program template based on an original template code file corresponding to the target function logic determined by the screening operation;
and the second generation module is used for receiving the editing information of the target program template and generating the target page program based on the editing information and the target program template.
13. A computer device, comprising: a processor, a memory storing machine readable instructions executable by the processor, the processor for executing the machine readable instructions stored in the memory, the processor performing the generating step of the page program according to any one of claims 1 to 11 when the machine readable instructions are executed by the processor.
14. A computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, which computer program, when executed by a computer device, performs the generation step of the page program according to any one of claims 1 to 11.
CN202111534778.7A 2021-12-15 2021-12-15 Page program generation method and device, computer equipment and storage medium Pending CN114168875A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111534778.7A CN114168875A (en) 2021-12-15 2021-12-15 Page program generation method and device, computer equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111534778.7A CN114168875A (en) 2021-12-15 2021-12-15 Page program generation method and device, computer equipment and storage medium

Publications (1)

Publication Number Publication Date
CN114168875A true CN114168875A (en) 2022-03-11

Family

ID=80486718

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111534778.7A Pending CN114168875A (en) 2021-12-15 2021-12-15 Page program generation method and device, computer equipment and storage medium

Country Status (1)

Country Link
CN (1) CN114168875A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114327446A (en) * 2022-03-14 2022-04-12 恒生电子股份有限公司 Processing method and device for converting small program into application program

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114327446A (en) * 2022-03-14 2022-04-12 恒生电子股份有限公司 Processing method and device for converting small program into application program
CN114327446B (en) * 2022-03-14 2022-06-07 恒生电子股份有限公司 Processing method and device for converting small program into application program

Similar Documents

Publication Publication Date Title
US20230083102A1 (en) Systems and methods for conversion of web content into reusable templates and components
US20190251143A1 (en) Web page rendering method and related device
CN110309451B (en) Method and device for generating web preloading page
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
US10542123B2 (en) System and method for generating and monitoring feedback of a published webpage as implemented on a remote client
US9749440B2 (en) Systems and methods for hosted application marketplaces
CN104077387A (en) Webpage content display method and browser device
CN108595697B (en) Webpage integration method, device and system
US11640441B2 (en) Page displaying method and device, computer-readable storage medium and electronic device
CN109445775B (en) One-key active embedded code method, device and computer readable storage medium
US20100269093A1 (en) Content Management System and Method for Generating Dynamic Applications
CN105589959A (en) Form processing method and form processing system
US10671801B2 (en) Markup code generator
CN110968314A (en) Page generation method and device
CN110365776B (en) Picture batch downloading method and device, electronic equipment and storage medium
US10956658B2 (en) Digital content editing of a document object model (DOM) based on object model comparison
CN114168875A (en) Page program generation method and device, computer equipment and storage medium
CN114756228A (en) Page processing method, device, equipment and storage medium
CN113656000B (en) Webpage processing method and device
CN112558957B (en) Method and device for generating webpage form, electronic equipment and readable storage medium
CN112001157B (en) Online design method and device for webpage data form
CN113868565A (en) Skin style file editing method and device
CN113934959A (en) Program preview method and device, computer equipment and storage medium
CN117093386B (en) Page screenshot method, device, computer equipment and storage medium
CN116009863B (en) Front-end page rendering method, device and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant after: Douyin Vision Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant before: Tiktok vision (Beijing) Co.,Ltd.

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant after: Tiktok vision (Beijing) Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd.

CB02 Change of applicant information