A page display method and device, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a page display method and device, electronic equipment and storage medium. A server acquires a page request sent by a user terminal; acquires environment parameters of the user terminal and page description data of a page to be displayed corresponding to a page identifier; parses the page description data into a plurality of data exchange language strings according to the environment parameters; and sends the plurality of data exchange language strings to the user terminal, so that the user terminal displays the page to be displayed according to the plurality of data exchange language strings. The data exchange language string is a text format completely independent of a programming language, and any type of platform can perform page rendering display according to the data exchange language string. Developing the same page description data for different types of platforms can improve product development efficiency, reduce labor costs, and can be used across platforms. Updating of a page description data can realize updating of each platform, new version release is convenient, and products can be quickly iterated online.

Description

Technical Field

[0001] This invention relates to the field of computer and data processing technology, and in particular to a page display method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the continuous development of computer technology, smart devices on various platforms are constantly emerging. In order to make their internet products appear on multiple platforms, service providers typically implement their products using different technical languages ​​for each platform. Common platforms include mobile devices (Android, iOS), PCs, H5 (mobile web pages), PC applications, tablets, TVs, and smart devices (in-vehicle screens, smart home devices), etc. The technical languages ​​involved generally include Web, Android, Objective-C, Swift, React Native, Flutter, etc. Therefore, service providers need to develop a separate client product for each type of platform when providing internet products.

[0003] However, adopting the above approach requires a significant investment of resources and the use of different technologies to implement client-side products across different platforms, resulting in the following technical drawbacks: 1. Low development efficiency and high labor costs; 2. Native pages cannot be used across platforms; 3. Release restrictions on each platform, requiring product updates to be implemented only after all platforms have been fully developed; 4. New product features cannot be launched quickly, increasing trial-and-error costs and hindering the ability to seize the initiative. Summary of the Invention

[0004] The purpose of this invention is to provide a page display method, apparatus, electronic device, and storage medium to solve the technical problems of current multi-terminal products requiring separate implementations for each terminal, resulting in low development efficiency and high labor costs. The specific technical solution is as follows:

[0005] In a first aspect of this invention, a page display method is provided, applied to a server, the method comprising:

[0006] Obtain a page request sent by the user terminal, wherein the page request includes a page identifier of the page to be displayed;

[0007] Obtain the environmental parameters of the user terminal and the page description data of the page to be displayed corresponding to the page identifier. The environmental parameters include the platform type identifier of the user terminal.

[0008] Based on the environmental parameters, the page description data is parsed into multiple data exchange language strings;

[0009] The plurality of data exchange language strings are sent to the user terminal so that the user terminal displays the page to be displayed based on the plurality of data exchange language strings.

[0010] Optionally, the page description data includes at least one component description item, and each component description item includes at least one tuple description sub-item;

[0011] The step of parsing the page description data into multiple data exchange language strings based on the environmental parameters includes:

[0012] Iterate through the page description data, and for each component description item in the page description data, determine whether the component description item includes API call parameters;

[0013] If the component description item includes API call parameters, then based on the environment parameters, the interface data is called using the API call parameters; a data exchange language string is generated according to the environment parameters, the interface data, and the tuple description sub-item in the component description item.

[0014] If the component description item does not include API call parameters, then the data exchange language string of the component description item is generated based on the environment parameters and the tuple description sub-item in the component description item.

[0015] Optionally, the environment parameters may also include a client version identifier;

[0016] The step of calling interface data using the API call parameters based on the environment parameters includes:

[0017] Use the API call parameters to call the interface data corresponding to the platform type identifier and the client version identifier;

[0018] The step of generating the data exchange language string for the component description item based on the environment parameters, the interface data, and the tuple description sub-item in the component description item includes:

[0019] Based on the platform type identifier and the client version identifier, generate the environment configuration data for the component description project;

[0020] Based on the interface data, generate the target configuration data for the component describing the project;

[0021] Based on the tuple description sub-items in the component description project, generate the configuration string for the component description project;

[0022] Using the environment configuration data and target configuration data of the project described by this component, the configuration string of the project described by this component is configured to obtain the data exchange language string of the project described by this component.

[0023] Optionally, the step of using the API call parameters to call the interface data corresponding to the platform type identifier and the client version identifier includes:

[0024] Based on the platform type identifier and the client version identifier, determine the target version of the interface data to be called;

[0025] Based on the API call parameters, invoke the interface data of the target version.

[0026] In a second aspect of the present invention, a page display method is also provided, applied to a user terminal, the method comprising:

[0027] Send a page request to the server;

[0028] Obtain multiple data exchange language strings returned by the server based on the page request;

[0029] Based on the data exchange language strings, generate data to be rendered in a preset language type, wherein the preset language type is the language type corresponding to the platform type of the user terminal;

[0030] Render the data to be rendered and display the rendered data.

[0031] Optionally, generating renderable data of a preset language type based on each of the data exchange language strings includes:

[0032] Each of the data exchange language strings is converted into a data fragment of a preset language type;

[0033] The data fragments are then concatenated to form the data to be rendered.

[0034] Optionally, the step of converting each of the data exchange language strings into data fragments of a preset language type includes:

[0035] For each data exchange language string, an object is created based on that data exchange language string using a preset language type, resulting in object data for that data exchange language string;

[0036] Based on the data exchange language string, event binding is performed on the object data of the data exchange language string to obtain the data fragment corresponding to the data exchange language string.

[0037] In a third aspect of the present invention, a page display device is also provided, applied to a server, the device comprising:

[0038] A page request acquisition module is used to acquire page requests sent by user terminals, wherein the page request includes a page identifier of the page to be displayed;

[0039] The data acquisition module is used to acquire the environmental parameters of the user terminal and the page description data of the page to be displayed corresponding to the page identifier. The environmental parameters include the platform type identifier of the user terminal.

[0040] The data parsing module is used to parse the page description data into multiple data exchange language strings based on the environmental parameters.

[0041] The data sending module is used to send the plurality of data exchange language strings to the user terminal, so that the user terminal displays the page to be displayed according to the plurality of data exchange language strings.

[0042] Optionally, the page description data includes at least one component description item, and each component description item includes at least one tuple description sub-item;

[0043] The data parsing module includes:

[0044] The judgment unit is used to traverse the page description data and, for each component description item in the page description data, determine whether the component description item includes API call parameters.

[0045] The first unit for generating a data exchange language string is used to call interface data based on the environment parameters if the component description item includes API call parameters; and to generate a data exchange language string based on the environment parameters, the interface data, and the tuple description sub-item in the component description item.

[0046] The second unit generates the data exchange language string. If the component description item does not include API call parameters, the data exchange language string of the component description item is generated based on the environment parameters and the tuple description sub-item in the component description item.

[0047] Optionally, the environmental parameters include the platform type identifier and client version identifier of the user terminal;

[0048] The first unit for generating the data exchange language string includes:

[0049] The calling subunit is used to call the interface data corresponding to the platform type identifier and the client version identifier using the API call parameters;

[0050] The second unit for generating the data exchange language string includes:

[0051] The environment configuration data generation subunit is used to generate environment configuration data for the component describing the project based on the platform type identifier and the client version identifier.

[0052] The target configuration data generation subunit is used to generate target configuration data for the component describing the project based on the interface data.

[0053] The configuration string generation sub-unit is used to generate the configuration string for the component description item based on the tuple description sub-item in the component description item;

[0054] The configuration subunit is used to configure the configuration string of the project described by the component using the environment configuration data and target configuration data of the project described by the component, so as to obtain the data exchange language string of the project described by the component.

[0055] Optionally, the calling subunit is specifically used to: determine the target version of the interface data to be called based on the platform type identifier and the client version identifier;

[0056] Based on the API call parameters, invoke the interface data of the target version.

[0057] In a fourth aspect of the present invention, a page display device is also provided, applied to a user terminal, the device comprising:

[0058] The page request sending module is used to send page requests to the server;

[0059] The data acquisition module is used to acquire multiple data exchange language strings returned by the server based on the page request;

[0060] The data to be rendered module is used to generate data to be rendered in a preset language type based on the data exchange language strings, wherein the preset language type is the language type corresponding to the platform type of the user terminal;

[0061] The rendering module is used to render the data to be rendered and display the rendered data.

[0062] Optionally, the data to be rendered generation module includes:

[0063] A conversion unit is used to convert each of the data exchange language strings into data fragments of a preset language type;

[0064] The splicing unit is used to splice the data fragments into the data to be rendered.

[0065] Optionally, the conversion unit includes:

[0066] The object creation subunit is used to create an object for each data exchange language string based on the data exchange language string and using a preset language type, so as to obtain the object data of the data exchange language string.

[0067] The event binding subunit is used to bind events to the object data of the data exchange language string based on the data exchange language string, so as to obtain the data fragment corresponding to the data exchange language string.

[0068] In a fifth aspect of the present invention, an electronic device is also provided, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus.

[0069] Memory, used to store computer programs;

[0070] A processor, when executing a program stored in memory, implements the steps of the method described in either the first or second aspect.

[0071] In another aspect of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored therein, and when the computer program is executed by a processor, it implements any of the page display methods described above.

[0072] In another aspect of the present invention, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to execute any of the page display methods described above.

[0073] In the page display scheme provided by this embodiment of the invention, the server obtains a page request sent by the user terminal, wherein the page request includes a page identifier of the page to be displayed, and obtains the user terminal's environment parameters and the page description data of the page to be displayed corresponding to the page identifier. Then, based on the environment parameters, the page description data is parsed into multiple data exchange language strings, and finally, the multiple data exchange language strings are sent to the user terminal so that the user terminal can display the page to be displayed according to the multiple data exchange language strings.

[0074] In this application, the server obtains a page request sent by the user terminal, wherein the page request includes a page identifier of the page to be displayed; it also obtains the user terminal's environment parameters and the page description data of the page to be displayed corresponding to the page identifier, the environment parameters including the platform type identifier of the user terminal. Based on the environment parameters, the page description data is parsed into multiple data exchange language strings; these multiple data exchange language strings are sent to the user terminal so that the user terminal can display the page to be displayed according to the multiple data exchange language strings. The server converts the page description data of the page to be displayed into a data exchange language string and sends the data exchange language string of the page to be displayed to the user terminal. The data exchange language string is a text format completely independent of programming languages, and regardless of the user terminal's platform type, page rendering and display can be performed based on the data exchange language string. Developing the same page description data for different types of platforms can improve product development efficiency and reduce labor costs; converting the native page description data into a programming language-independent data exchange language string allows for cross-platform use; a single update of the page description data can achieve updates for all platforms, making new version releases and updates more convenient, enabling rapid product iteration and deployment with low trial-and-error costs. Attached Figure Description

[0075] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below.

[0076] Figure 1 This is a first flowchart of a page display method provided in an embodiment of the present invention;

[0077] Figure 2 This is a block diagram of a page display system provided in an embodiment of the present invention;

[0078] Figure 3 This is a second flowchart of a page display method provided in an embodiment of the present invention;

[0079] Figure 4 This is a rendering flowchart of a page display method provided in an embodiment of the present invention;

[0080] Figure 5 This is a schematic diagram of a first structure of a page display method provided in an embodiment of the present invention;

[0081] Figure 6 This is a schematic diagram of a second structure of a page display method provided in an embodiment of the present invention;

[0082] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0083] The technical solutions of the present invention will now be described with reference to the accompanying drawings in the embodiments of the present invention.

[0084] To address the technical problems of low development efficiency and high labor costs associated with the separate implementation of multi-platform products in the current market, this application provides a page display method, apparatus, electronic device, and storage medium. The following describes a page display method provided by an embodiment of this application.

[0085] This application provides a page display method, apparatus, electronic device, and storage medium. The server: obtains a page request sent by a user terminal, wherein the page request includes a page identifier of the page to be displayed; obtains environmental parameters of the user terminal and page description data of the page to be displayed corresponding to the page identifier; parses the page description data into multiple data exchange language strings according to the environmental parameters; and sends the multiple data exchange language strings to the user terminal so that the user terminal displays the page to be displayed based on the multiple data exchange language strings.

[0086] In this embodiment, the page description data of the page to be displayed is converted into a Data Exchange Language (DATA) string, and this DATA string is sent to the user terminal. The DATA string is a text format completely independent of programming languages, allowing page rendering and display regardless of the user terminal's platform. Developing the same page description data for different platforms improves product development efficiency and reduces labor costs. Converting the native page description data into a language-independent DATA string enables cross-platform use. A single update to the page description data allows for updates across all platforms, making new version releases and updates more convenient, enabling rapid product iteration and minimizing trial-and-error costs.

[0087] The following is a detailed explanation:

[0088] See Figure 1 , Figure 1 This is a first flowchart of a page display method provided in this application embodiment, applied to a server, the method including:

[0089] S101, Obtain a page request sent by the user terminal, wherein the page request includes a page identifier of the page to be displayed.

[0090] When a user terminal needs to display a page (hereinafter referred to as the page to be displayed), the user terminal sends a page request to the server. The page identifier of the page to be displayed is used to uniquely identify the page to be displayed. In one example, the page identifier of the page to be displayed can be the URL (Uniform Resource Locator) of the page to be displayed.

[0091] S102, obtain the environmental parameters of the user terminal and the page description data of the page to be displayed corresponding to the page identifier, wherein the environmental parameters include the platform type identifier of the user terminal.

[0092] The user terminal's environment parameters indicate the type of the user terminal platform, and may also indicate the version of the product on the user terminal. The platform type identifier is used to uniquely identify the platform type. The page to be displayed has pre-developed page description data, which describes each component in the page. In one example, the page description data can be assembled using a DSL (Domain Specific Language).

[0093] S103, based on the environmental parameters, the page description data is parsed into multiple data exchange language strings.

[0094] The user terminal's environment parameters indicate the type of the user terminal platform and may also represent the version of the product on the user terminal. Based on these environment parameters, the page description data is parsed into multiple JSON strings (Data Interchange Language strings) suitable for the user terminal. "Suitable for the user terminal" here does not mean that the programming language is the same as the platform's assembly language; rather, it means that the JSON string is a text format completely independent of the programming language. "Suitable for the user terminal" means that the parameters in the JSON string correspond to the user terminal's platform type and product version, and the JSON string can be converted into a language that can be rendered and displayed on the user terminal.

[0095] S104, the plurality of data exchange language strings are sent to the user terminal so that the user terminal displays the page to be displayed according to the plurality of data exchange language strings.

[0096] The server sends various data exchange language strings to the user terminal. After receiving the data exchange language strings, the user terminal converts them into data of its own platform language type and renders them to display the page to be displayed.

[0097] As can be seen, in this embodiment, the page description data of the page to be displayed is converted into a Data Exchange Language (DATA) string, and this DATA string is sent to the user terminal. The DATA string is a text format completely independent of programming languages, allowing page rendering and display regardless of the user terminal's platform. Developing the same page description data for different platforms improves product development efficiency and reduces labor costs. Converting the native page description data into a language-independent DATA string enables cross-platform use. A single update to the page description data allows for updates across all platforms, making new version releases and updates more convenient, enabling rapid product iteration and deployment with low trial-and-error costs.

[0098] In one possible implementation, the page description data includes at least one component description item, each component description item including at least one tuple description sub-item; the step of parsing the page description data into multiple data exchange language strings according to the environment parameters includes:

[0099] Step 1: Iterate through the page description data and for each component description item in the page description data, determine whether the component description item includes API call parameters.

[0100] Step 2: If the component description project includes API call parameters, then based on the environment parameters, the interface data is called using the API call parameters; a data exchange language string is generated based on the environment parameters, the interface data, and the tuple description sub-item in the component description project.

[0101] Step 3: If the component description item does not include API call parameters, then generate the data exchange language string for the component description item based on the environment parameters and the tuple description sub-item in the component description item.

[0102] The component description item describes the components on the page, such as whether the component is a video player, an image display box, or a text display box. The component description item can include API (Application Program Interface) call parameters to invoke the corresponding API, thereby enabling the display of video, images, text, etc. The component description item includes tuple description sub-items, which describe the component's sub-attributes, such as the playlist in a video playback window, or the color and size of the text in a text box.

[0103] Page description data can include the page's identifier, page ID (Unique ID), page API configuration, etc. In an example, the main attributes and meanings of the page description data are described below:

[0104] tag: Used to identify the type of JSON data. When the tag field is page, it indicates that it is page-level JSON data;

[0105] id: Page ID, used to uniquely identify this page. In one example, the page ID field could be _s6lzsonrl;

[0106] API: Configuration for page call interfaces. Its fields can be represented by the class function Object{}. The specific fields will be described in detail in the introduction of components.

[0107] base: Describes some information at the page level; its fields can be represented by the class function Object{}.

[0108] Pingback: Used for page statistics; its fields can be represented by the class function Object{}.

[0109] components: A list of all components to be displayed on the page. Its fields can be represented by the list function Array[], and each list item describes a component description item.

[0110] The component description item describes a component on the page. A component can be a video playback window or a text box. The component may contain a component ID, API configuration, etc. In an example, the main attributes and meanings of the component description item are described below:

[0111] id: Component id, used to uniquely identify this component on the page. In one example, the component id field can be _5w82yhhko;

[0112] tag: Used to identify the type of JSON data. For example, when the tag field is component, it indicates that it is component-level JSON data.

[0113] API: Component API configuration. In an example, the API fields might include url, method, timeout, headerParam, bodyParam, and filter.

[0114] URL: The API address. In one example, the API address can be a Uniform Resource Locator, such as: https: / / m.ixyi.com / xxx;

[0115] method: The way the interface is called. In an example, the way the interface is called can be get, which means it is used to retrieve data.

[0116] timeout: Timeout period;

[0117] headerParam: Request header parameters;

[0118] bodyParam: Request body parameters;

[0119] filter: A method for formatting interface data;

[0120] config: Component configuration items, whose fields can be represented by the class function Object{};

[0121] script: The component's custom script, whose fields can be represented by the class function Object{};

[0122] `elements`: An array of tuples (tuples describing sub-items) contained within the component. Each tuple (element) is a reusable and nestable abstract UI object, whose fields can be represented using the list function `Array[]`. Each list item describes a tuple describing a sub-item. In an example, the main properties and meanings of the tuple describing sub-items are described below:

[0123] tag: Used to identify the type of JSON data. When the tag field is element, it indicates that the data is tuple-level JSON data.

[0124] attrs: tuple attribute;

[0125] styles: Describes the style of the tuple, which follows CSS3 stylesheets;

[0126] directives: Describe tuple instructions, such as whether to generate them in a loop;

[0127] events: Describes the events in the tuple;

[0128] elements: An array of sub-tuples.

[0129] In one example, a data exchange language string is generated to represent the page to be displayed. This string identifies the data as page-level JSON data, describes the page ID (_s6lzsonrl) to be displayed, describes the page's API call configuration, and includes other page-level information. Page statistics are also provided. The page description data contains multiple component description items, describing all components to be displayed on the page. Components are described using list items, including a component ID (_5w82yhhko), an API address (https: / / m.ixyi.com / xxx), a GET request for retrieving / querying resource information, and a 5-second timeout. If the desired page API data is not returned within the timeout period, the page will not be displayed. After receiving the returned page API data, it is processed to define the scope of pages to be displayed.

[0130] In this embodiment, the server iterates through the page description data based on the user terminal's environment parameters to determine whether the component description item includes API call parameters. If API call parameters are included, a data exchange language string is generated based on the environment parameters, interface data, and tuple description sub-items in the component description item. If API call parameters are not included, a data exchange language string is generated for the component description item based on the environment parameters and tuple description sub-items in the component description item. This solution refines the page into three levels: tuple, component, and page, thereby clearly, accurately, and completely describing various combinations of a page, facilitating parsing by different user terminals.

[0131] In one possible implementation, the environment parameters also include a client version identifier.

[0132] The step of calling interface data using the API call parameters based on the environment parameters includes: calling the interface data corresponding to the platform type identifier and the client version identifier using the API call parameters.

[0133] Environmental parameters include platform type identifier, client version identifier, and may also include user terminal device type identifier. Different platform type identifiers and client version identifiers correspond to different interface data; for example, the PC Windows platform corresponds to a 1920×1080 resolution video, while the mobile Android platform corresponds to a 640x480 resolution video; for example, video playback box A of client version 1 plays the Mandarin version of the video, while video playback box A of client version 2 plays the Cantonese version of the video.

[0134] The step of generating the data exchange language string for the component description project based on the environment parameters, the interface data, and the tuple description sub-items in the component description project includes: generating environment configuration data for the component description project based on the platform type identifier and the client version identifier; generating target configuration data for the component description project based on the interface data; generating a configuration string for the component description project based on the tuple description sub-items in the component description project; and configuring the configuration string for the component description project using the environment configuration data and the target configuration data to obtain the data exchange language string for the component description project.

[0135] The environment configuration data consists of platform and version-related data, such as the video playback frame rate in the video player in version 1, and the type of temporary files in platform A. The target configuration data consists of data related to the received data, such as the content of text in text boxes and the content of images in image boxes. The tuple description sub-items in the component description project are converted to JSON format to generate the configuration string for that component description project. Using the JSON-formatted environment configuration data and the JSON-formatted target configuration data, the configuration string is configured, thus obtaining the JSON string for the component description project.

[0136] In one example, if the component description item does not include API call parameters, then there is no need to generate and configure the target configuration data. If the component description item does not include API call parameters, then based on the environment parameters and the tuple description sub-items in the component description item, the data exchange language string for the component description item is generated. This includes: generating environment configuration data for the component description item based on the platform type identifier and the client version identifier; generating a configuration string for the component description item based on the tuple description sub-items in the component description item; and configuring the configuration string for the component description item using the environment configuration data to obtain the data exchange language string for the component description item.

[0137] In this embodiment, a specific process is given for generating a data exchange language string for a component description item using environmental parameters, interface data, and tuple description sub-items in the component description item. Since the data exchange language string is related to environmental parameters, it can be applied to the actual platform environment of the user terminal.

[0138] In one possible implementation, the step of calling the interface data corresponding to the platform type identifier and the client version identifier using the API call parameters includes:

[0139] Step A: Determine the target version of the interface data to be called based on the platform type identifier and the client version identifier.

[0140] Step B: Invoke the interface data of the target version according to the API call parameters.

[0141] Different platform type identifiers and client version identifiers correspond to different data versions; for example, the PC Windows platform corresponds to a 1920×1080 resolution video version, while the mobile Android platform corresponds to a 640x480 resolution video version; for example, video playback box A of client version 1 corresponds to the Mandarin version of the video, while video playback box A of client version 2 corresponds to the Cantonese version of the video. Therefore, when the platform type identifier indicates the Windows platform and the client version identifier indicates client version 2, the target version of the video is the 1920×1080 resolution Cantonese version.

[0142] In one example, the system block diagram displayed on the page could be as follows: Figure 2 As shown, Figure 2 This is a block diagram of a page display system provided in an embodiment of this application.

[0143] The DSL (DSL-based unified page description) is used to describe the page to be displayed. The server performs Node pre-rendering services, including DSL pre-parsing, API data requests, client environment judgment, and component version selection. Then, the data exchange language string is sent to the client, where the client's rendering and parsing engine renders and displays the page. The client can be H5 (mobile webpage), PCA (computer application), Phone (Apple mobile phone), or TV (TV).

[0144] Generate corresponding environment parameters for different terminals, including platform code, version, device type, etc., and inject the environment parameters as variables into subsequent logic;

[0145] The page description data is deeply traversed to identify the component description items. The API request is made according to the component API parameters. The returned data is processed by the function and then injected as a variable into subsequent logic.

[0146] It identifies tuple description sub-items, handles loop generation logic, and performs variable substitution and calculation for custom expressions in attributes;

[0147] After the above processing, multiple data exchange language strings are obtained.

[0148] The first page display method provided in this application embodiment can be applied to user terminals. In this application embodiment, the user terminal can be a mobile phone (Android, Apple Phone), PC (computer), H5 (mobile webpage), PCA (computer application), PAD (tablet computer), TV (TV), smart device (vehicle screen, smart home), etc.

[0149] See Figure 3 , Figure 3 This is a second flowchart of a page display method provided in an embodiment of this application, the method comprising:

[0150] S301, sends a page request to the server.

[0151] S302, Obtain multiple data exchange language strings returned by the server based on the page request.

[0152] S303, Generate rendering data of a preset language type based on each of the data exchange language strings, wherein the preset language type is the language type corresponding to the platform type of the user terminal.

[0153] S304, render the data to be rendered and display the rendered data.

[0154] The user terminal sends a page request to the server and receives multiple data exchange language strings returned by the server based on the page request. The user terminal then generates a language type corresponding to its platform type based on these data exchange strings. Examples include web, Android, Objective-C, Swift, React Native, and Flutter. Finally, the user terminal renders and displays the data to be rendered, achieving the purpose of displaying the page. This solves the current market problem where multi-platform products require separate implementations for each platform. The overall implementation achieves the effect of "develop once, reuse continuously," significantly saving manpower costs and effectively shortening the development cycle, enabling rapid product iteration and deployment.

[0155] In one possible implementation, generating renderable data of a preset language type based on each of the data exchange language strings includes:

[0156] Each of the data exchange language strings is converted into a data fragment of a preset language type;

[0157] The data fragments are then concatenated to form the data to be rendered.

[0158] The user terminal will convert the data exchange language string received from the server into data fragments that are consistent with the language type used by the user terminal device. The data fragments can be video data fragments, text box data fragments, etc. Finally, the various data fragments are concatenated to obtain the data to be rendered.

[0159] In one possible implementation, the step of converting each of the data exchange language strings into data fragments of a preset language type includes:

[0160] For each data exchange language string, an object is created based on that data exchange language string using a preset language type, resulting in object data for that data exchange language string;

[0161] Based on the data exchange language string, event binding is performed on the object data of the data exchange language string to obtain the data fragment corresponding to the data exchange language string.

[0162] In one example, in a page display method provided by an embodiment of this application, the rendering process can be as follows: Figure 4 As shown, Figure 4 This is a rendering flowchart of a page display method provided in an embodiment of this application.

[0163] Among them, merge means merging, createElement means object creation, bindevent means event binding, and insertbody means data fragment.

[0164] After receiving a page request from a user terminal, the server retrieves the user terminal's environment parameters and the page description data corresponding to the page identifier based on the page identifier of the page to be displayed. It then iterates through the page description data, determining for each component description item whether it includes API call parameters. If API call parameters are included, the server invokes the API data using the parameters based on the environment parameters. A data exchange language string is generated based on the environment parameters, the API data, and the tuple description sub-items in the component description item. If API call parameters are not included in the component description item, a data exchange language string is generated based on the environment parameters and the tuple description sub-items. Finally, multiple data exchange language strings are sent to the user terminal.

[0165] After receiving multiple data exchange language strings returned by the server based on the page request, the user terminal creates an object using the user terminal's device language type to obtain the object data for that data exchange language string. Based on this data exchange language string, it performs event binding on the object data to obtain the corresponding data fragment. Event binding can be understood as follows: if the page request is to display a video fragment, the video data needs to be bound to the audio data so that the video can play correctly when the page is displayed.

[0166] Based on the same inventive concept as a page display method, this application provides an apparatus for a page display method. Figure 5 This is a schematic diagram of the first structure of a page display method provided in an embodiment of this application, as shown below. Figure 5 As shown, the device may include:

[0167] The page request acquisition module 501 can be used to acquire page requests sent by the user terminal, wherein the page request includes a page identifier of the page to be displayed;

[0168] The data acquisition module 502 can be used to acquire the environmental parameters of the user terminal and the page description data of the page to be displayed corresponding to the page identifier. The environmental parameters include the platform type identifier of the user terminal.

[0169] The data parsing module 503 can be used to parse the page description data into multiple data exchange language strings according to the environmental parameters;

[0170] The data sending module 504 can be used to send the plurality of data exchange language strings to the user terminal, so that the user terminal can display the page to be displayed according to the plurality of data exchange language strings.

[0171] Depend on Figure 5 As seen in the embodiments described, the page request acquisition module 501 can acquire the page request sent by the user terminal, wherein the page request includes a page identifier of the page to be displayed. Then, the data acquisition module 502 acquires the environmental parameters of the user terminal and the page description data of the page to be displayed corresponding to the page identifier. The environmental parameters include the platform type identifier of the user terminal. The data parsing module 503 parses the page description data into multiple data exchange language strings according to the environmental parameters. Finally, the data sending module 504 sends the multiple data exchange language strings to the user terminal so that the user terminal can display the page to be displayed according to the multiple data exchange language strings. Because the page is broken down into three levels: tuple, component, and page, it can clearly, accurately, and completely describe various combination scenarios of a page, which is convenient for different user terminals to parse. This solves the problem that current multi-terminal products in the market need to be implemented separately for each terminal. After the overall implementation is completed, it can achieve the effect of one-time development and continuous reuse, which greatly saves manpower costs and can effectively shorten the development cycle, enabling rapid product iteration and launch.

[0172] As a specific implementation of this application, the page description data includes at least one component description item, and each component description item includes at least one tuple description sub-item; the data parsing module may include:

[0173] The judgment unit can be used to traverse the page description data and, for each component description item in the page description data, determine whether the component description item includes API call parameters.

[0174] The first unit for generating a data exchange language string can be used to call interface data based on the environment parameters if the component description item includes API call parameters; and to generate a data exchange language string based on the environment parameters, the interface data, and the tuple description sub-item in the component description item.

[0175] The second unit for generating data exchange language strings can be used to generate the data exchange language string for a component description item based on the environment parameters and the tuple description sub-item in the component description item if the component description item does not include API call parameters.

[0176] As one specific implementation of this application, the environmental parameters also include a client version identifier;

[0177] The first unit of generating a data exchange language string can include:

[0178] The calling subunit can be used to call the interface data corresponding to the platform type identifier and the client version identifier using the API call parameters;

[0179] The second unit for generating data exchange language strings can include:

[0180] The environment configuration data generation subunit can be used to generate environment configuration data for the component describing the project based on the platform type identifier and the client version identifier.

[0181] The target configuration data generation subunit can be used to generate target configuration data describing the project of this component based on the interface data.

[0182] The configuration string generation sub-unit can be used to generate the configuration string for the component description item based on the tuple description sub-item in the component description item;

[0183] The configuration subunit can be used to configure the configuration string of the project described by the component, based on the environment configuration data and target configuration data of the project described by the component, and obtain the data exchange language string of the project described by the component.

[0184] As a specific implementation of this application, the calling subunit can be specifically used to: determine the target version of the interface data to be called based on the platform type identifier and the client version identifier;

[0185] Based on the API call parameters, invoke the interface data of the target version.

[0186] This application provides an apparatus for a page display method. Figure 6 This is a second structural diagram of a page display method provided in an embodiment of this application, as shown below. Figure 6 As shown, the device may include:

[0187] The page request sending module 601 can be used to send page requests to the server;

[0188] The data acquisition module 602 can be used to acquire multiple data exchange language strings returned by the server according to the page request;

[0189] The data to be rendered generation module 603 can be used to generate data to be rendered in a preset language type based on the data exchange language strings, wherein the preset language type is the language type corresponding to the platform type of the user terminal;

[0190] The rendering module 604 can be used to render the data to be rendered and display the rendered data.

[0191] Depend on Figure 6 As seen in the described embodiment, a page request can be sent to the server via the page request sending module 601. The returned data acquisition module 602 then acquires multiple data exchange language strings returned by the server based on the page request. Next, the data to be rendered generation module 603 generates data to be rendered in a preset language type based on each of the data exchange language strings. The preset language type is the language type corresponding to the platform type of the user terminal. Finally, the rendering module 604 renders the data to be rendered and displays the rendered data. By refining the page into three levels—tuple, component, and page—various combinations of a page can be clearly, accurately, and completely described, facilitating parsing by different user terminals. This solves the current market problem where multi-terminal products require separate implementations for each terminal. The overall implementation achieves the effect of one-time development and continuous reuse, greatly saving manpower costs and effectively shortening the development cycle, enabling rapid product iteration and deployment.

[0192] As a specific implementation of this application, the data to be rendered generation module 603 may include:

[0193] The conversion unit can be used to convert each of the data exchange language strings into data fragments of a preset language type;

[0194] The splicing unit can be used to splice the data fragments into the data to be rendered.

[0195] As a specific implementation of this application, the conversion unit may include:

[0196] The object creation sub-unit can be used to create an object for each data exchange language string using a preset language type, thereby obtaining the object data of that data exchange language string.

[0197] The event binding subunit can be used to bind events to object data of the data exchange language string based on the data exchange language string, and obtain the data fragment corresponding to the data exchange language string.

[0198] Regarding the apparatus in the above embodiments, the specific manner in which each module performs its operation has been described in detail in the embodiments related to the method, and will not be elaborated upon here.

[0199] This application also provides an electronic device. Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application, such as... Figure 7 As shown, it may include: processor 701, communication interface 702, memory 703 and communication bus 704, wherein the processor 701, communication interface 702 and memory 703 communicate with each other through communication bus 704.

[0200] The memory 703 can be used to store computer programs;

[0201] The processor 701 can be used to execute programs stored in memory to implement any of the above-mentioned methods for displaying pages.

[0202] The communication bus mentioned in the above electronic devices can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.

[0203] The communication interface is used for communication between the aforementioned terminal and other devices.

[0204] The memory may include random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0205] The processors mentioned above can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0206] In another embodiment of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored therein, and when the computer program is executed by a processor, it implements any of the page display methods described in the above embodiments.

[0207] In another embodiment of the present invention, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to perform any of the page display methods described in the above embodiments.

[0208] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid state disk (SSD)).

[0209] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0210] The various embodiments in this specification are described in a related manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the system embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0211] The above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A page display method characterized by comprising: Applied to a server side, the method comprises: Obtaining a page request sent by a user terminal, wherein the page request comprises a page identifier of a to-be-displayed page; Obtaining an environment parameter of the user terminal and page description data of the to-be-displayed page corresponding to the page identifier, wherein the environment parameter comprises a platform type identifier of the user terminal; According to the environment parameter, the page description data is parsed into a plurality of data exchange language strings; The plurality of data exchange language strings are sent to the user terminal, so that the user terminal displays the to-be-displayed page according to the plurality of data exchange language strings; The page description data comprises at least one component description item, and each component description item comprises at least one tuple description subitem; According to the environment parameter, the page description data is parsed into a plurality of data exchange language strings, comprising: Traverse the page description data, and for each component description item in the page description data, judge whether the component description item comprises an API call parameter; If the component description item comprises an API call parameter, then based on the environment parameter, the API call parameter is used to call interface data; according to the environment parameter, the interface data and the tuple description subitem in the component description item, a data exchange language string is generated; If the component description item does not comprise an API call parameter, then according to the environment parameter and the tuple description subitem in the component description item, a data exchange language string of the component description item is generated.

2. The method of claim 1, wherein, The environment parameter further comprises a client version identifier; The API call parameter is used to call the interface data based on the environment parameter, comprising: The API call parameter is used to call the interface data corresponding to the platform type identifier and the client version identifier; According to the environment parameter, the interface data and the tuple description subitem in the component description item, a data exchange language string of the component description item is generated, comprising: According to the platform type identifier and the client version identifier, environment configuration data of the component description item is generated; According to the interface data, target configuration data of the component description item is generated; According to the tuple description subitem in the component description item, a to-be-configured string of the component description item is generated; The to-be-configured string of the component description item is configured by using the environment configuration data and the target configuration data of the component description item, to obtain a data exchange language string of the component description item.

3. The method of claim 2, wherein, The API call parameter is used to call the interface data corresponding to the platform type identifier and the client version identifier, comprising: According to the platform type identifier and the client version identifier, a target version of the interface data to be called is determined; According to the API call parameter, the interface data of the target version is called.

4. A page display method characterized by comprising: Applied to a user terminal, the method comprises: Sending a page request to a server side; obtaining a plurality of data exchange language strings returned by the server according to the page request; wherein the data exchange language strings are obtained by the server in the following manner: obtaining the page request, wherein the page request includes a page identifier of a page to be displayed; obtaining environment parameters of the user terminal and page description data of the page to be displayed corresponding to the page identifier, wherein the environment parameters include a platform type identifier of the user terminal, and the page description data includes at least one component description item, and each component description item includes at least one tuple description subitem; and parsing the page description data into a plurality of data exchange language strings according to the environment parameters; the parsing of the page description data into a plurality of data exchange language strings according to the environment parameters includes: traversing the page description data, judging, for each component description item in the page description data, whether the component description item includes an API calling parameter; if the component description item includes an API calling parameter, calling interface data based on the API calling parameter and the environment parameters; and generating a data exchange language string according to the environment parameters, the interface data and the tuple description subitem in the component description item; and if the component description item does not include an API calling parameter, generating a data exchange language string of the component description item according to the environment parameters and the tuple description subitem in the component description item; generating, according to each data exchange language string, to-be-rendered data in a preset language type, wherein the preset language type is a language type corresponding to a platform type of the user terminal; rendering the to-be-rendered data and displaying the rendered data.

5. The method of claim 4, wherein, The generating, according to each data exchange language string, to-be-rendered data in a preset language type includes: converting each data exchange language string into a data segment in the preset language type; splicing the data segments into the to-be-rendered data.

6. The method of claim 5, wherein, The converting each data exchange language string into a data segment in the preset language type includes: for each data exchange language string, creating an object based on the data exchange language string and using the preset language type to obtain object data of the data exchange language string; binding an event to the object data of the data exchange language string based on the data exchange language string to obtain a data segment corresponding to the data exchange language string.

7. A page display device characterized by comprising: The device applied to a server includes: a page request obtaining module configured to obtain a page request sent by a user terminal, wherein the page request includes a page identifier of a page to be displayed; a data obtaining module configured to obtain environment parameters of the user terminal and page description data of the page to be displayed corresponding to the page identifier, wherein the environment parameters include a platform type identifier of the user terminal, and the page description data includes at least one component description item, and each component description item includes at least one tuple description subitem; a data parsing module configured to parse the page description data into a plurality of data exchange language strings according to the environment parameters; The data sending module is configured to send the multiple data exchange language strings to the user terminal, so that the user terminal displays the page to be displayed according to the multiple data exchange language strings. The page description data includes at least one component description item, and each component description item includes at least one tuple description subitem. The data parsing module includes: The judging unit is configured to traverse the page description data, and determine, for each component description item in the page description data, whether the component description item includes an API calling parameter. The data exchange language string generating first unit is configured to, if the component description item includes an API calling parameter, call interface data based on the environment parameter and the API calling parameter; and generate a data exchange language string according to the environment parameter, the interface data, and the tuple description subitem in the component description item. The data exchange language string generating second unit is configured to, if the component description item does not include an API calling parameter, generate a data exchange language string of the component description item according to the environment parameter and the tuple description subitem in the component description item.

8. A page display device characterized by comprising: The device is applied to a user terminal and includes: The page request sending module is configured to send a page request to a server. The returned data obtaining module is configured to obtain multiple data exchange language strings returned by the server according to the page request. The data exchange language strings are obtained by the server in the following manner: obtaining the page request, wherein the page request includes a page identifier of a page to be displayed; obtaining environment parameters of the user terminal and page description data of the page to be displayed corresponding to the page identifier; the environment parameters include a platform type identifier of the user terminal; the page description data includes at least one component description item, and each component description item includes at least one tuple description subitem; and parsing the page description data into multiple data exchange language strings according to the environment parameters. The page request sending module is configured to send a page request to a server. The returned data obtaining module is configured to obtain multiple data exchange language strings returned by the server according to the page request. The data exchange language strings are obtained by the server in the following manner: obtaining the page request, wherein the page request includes a page identifier of a page to be displayed; obtaining environment parameters of the user terminal and page description data of the page to be displayed corresponding to the page identifier; the environment parameters include a platform type identifier of the user terminal; the page description data includes at least one component description item, and each component description item includes at least one tuple description subitem; and parsing the page description data into multiple data exchange language strings according to the environment parameters. The page request sending module is configured to send a page request to a server. The returned data obtaining module is configured to obtain multiple data exchange language strings returned by the server according to the page request. The data exchange language strings are obtained by the server in the following manner: obtaining the page request, wherein the page request includes a page identifier of a page to be displayed; obtaining environment parameters of the user terminal and page description data of the page to be displayed corresponding to the page identifier; the environment parameters include a platform type identifier of the user terminal; the page description data includes at least one component description item, and each component description item includes at least one tuple description subitem; and parsing the page description data into multiple data exchange language strings according to the environment parameters. A rendering module is configured to render the data to be rendered and display the rendered data.

9. An electronic device, comprising: The computer device comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; The memory is configured to store a computer program; The processor is configured to execute the program stored in the memory, and implement the method steps in any one of claims 1-3 or 4-6.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, and the computer program is executed by the processor to implement the method steps in any one of claims 1-3 or 4-6.

Images