Card display method and device, equipment and storage medium

Abstract

The invention belongs to the technical field of computers, and discloses a card display method and device, equipment and a storage medium. A code editing object is created, code content corresponding to the code editing object is obtained, the code content comprises an HTML code, a JavaScript code, a CSS code and a JSON Data code, then a to-be-rendered template is constructed according to the HTML code, the JavaScript code and the CSS code, when the JSON Data code passes inspection, a native code is generated according to the to-be-rendered template and the JSON Data code, and card display is performed based on the native code. According to the application, when the JSON Data code passes the inspection, the rendering service is called, and the native code is generated according to the to-be-rendered template and the JSON Data code, so that the cards can be simply and smoothly displayed, the reusability of the cards can be improved, and the system maintenance cost can be reduced in a large-batch rendering card scene.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a card display method, device, equipment and storage medium. Background Art

[0002] With the development of technology, we are currently experiencing a transition from the mobile Internet era to the artificial intelligence era. Artificial intelligence has expanded the use scenarios of conversational interaction. As a commonly used interaction method in the dialogue system, conversational cards have the advantages of friendly interface and convenient operation. They are widely used and have great development needs. Introducing an open source dialogue system UI component library in the project, the display style of the dialogue page depends on the functions provided by the component library. Such UI component libraries implement components such as dialogue, form, and display, which are used to develop functions such as cards, bubbles, progress bars, announcements, and pop-ups. However, different component libraries usually need to be introduced, which increases the maintenance cost of the code. Implement the function of drag-and-drop card development on the dialogue system management end. Users only need to drag the corresponding module to develop the card. However, this method is difficult to meet the personalized needs in different scenarios, difficult to handle complex business logic, and has low flexibility. It is only suitable for simple interactive dialogue scenarios. In order to realize the new drag-and-drop function of the card, the development difficulty and maintenance cost are increased. Therefore, how to display cards simply and smoothly and reduce the system maintenance cost has become an urgent problem to be solved. Summary of the invention

[0003] The main purpose of this application is to provide a card display method, device, equipment and storage medium, aiming to solve the technical problem of how to display cards simply and smoothly and reduce system maintenance costs.

[0004] To achieve the above object, the present application provides a card display method, which comprises the following steps:

[0005] Create a code editing object, and obtain the code content corresponding to the code editing object, wherein the code content includes HTML code, JavaScript code, CSS code and JSON Data code;

[0006] Construct a template to be rendered according to the HTML code, the JavaScript code and the CSS code;

[0007] When the JSON Data code is verified to be passed, native code is generated according to the template to be rendered and the JSON Data code, and card display is performed based on the native code.

[0008] Optionally, when the JSON Data code is verified to be passed, the step of generating native code according to the template to be rendered and the JSON Data code, and displaying the card based on the native code specifically includes:

[0009] When the JSON Data code passes the inspection, the JSON Data code is parsed to obtain JSON data;

[0010] Match the JSON data with the template to be rendered to obtain a matching result;

[0011] A native code is generated according to the matching result, and a card is displayed based on the native code.

[0012] Optionally, before the steps of creating a code editing object and obtaining the code content corresponding to the code editing object, the step further includes:

[0013] Create a template component and write the template component into a preset file;

[0014] Accordingly, the steps of creating a code editing object and obtaining the code content corresponding to the code editing object specifically include:

[0015] Creating a code editing object, and determining a code variable corresponding to the code editing object according to the preset file;

[0016] Get the code content corresponding to the code variable.

[0017] Optionally, the step of constructing a template to be rendered according to the HTML code, the JavaScript code, and the CSS code specifically includes:

[0018] Obtaining an HTML function identifier corresponding to the HTML code and a JavaScript function identifier corresponding to the JavaScript code;

[0019] Get the style class name corresponding to the CSS code;

[0020] A template to be rendered is constructed according to the HTML code, the JavaScript code, the CSS code, the HTML function identifier, the JavaScript function identifier, and the style class name.

[0021] Optionally, the step of constructing a template to be rendered according to the HTML code, the JavaScript code, the CSS code, the HTML function identifier, the JavaScript function identifier and the style class name specifically includes:

[0022] Searching for a code string from the CSS code according to the style class name;

[0023] Inserting a random string after the code string to obtain a target string;

[0024] Construct a target CSS code according to the target string and the CSS code;

[0025] A template to be rendered is constructed according to the HTML code, the JavaScript code, the target CSS code, the HTML function identifier, the JavaScript function identifier, and the style class name.

[0026] Optionally, after the step of constructing a template to be rendered according to the HTML code, the JavaScript code and the CSS code, the step further includes:

[0027] Deleting the code format placeholders and code comments in the template to be rendered to obtain the deleted template to be rendered;

[0028] Perform word splitting on all codes in the deleted template to be rendered to obtain a word unit set;

[0029] Selecting a target word unit to be replaced from the word unit set;

[0030] The target word unit is replaced according to a preset replacement rule to obtain a compressed template to be rendered.

[0031] Optionally, the step of selecting a target word unit to be replaced from the word unit set specifically includes:

[0032] Determine the word meanings corresponding to all word units in the word unit set;

[0033] Splitting all the word units again according to the word meaning to obtain an initial word unit set;

[0034] Determine the word lengths corresponding to all initial word units in the initial word unit set;

[0035] A target word unit to be replaced is selected from the initial word unit set according to the word length.

[0036] In addition, to achieve the above-mentioned purpose, the present application also provides a card display device, the card display device comprising:

[0037] A code editing module, used to create a code editing object and obtain the code content corresponding to the code editing object, wherein the code content includes HTML code, JavaScript code, CSS code and JSON Data code;

[0038] A template construction module, used to construct a template to be rendered according to the HTML code, the JavaScript code and the CSS code;

[0039] The card display module is used to generate native code according to the template to be rendered and the JSON Data code when the JSON Data code is verified, and to display the card based on the native code.

[0040] In addition, to achieve the above-mentioned purpose, the present application also proposes a card display device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, and the computer program is configured to implement the steps of the card display method described above.

[0041] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the card display method described above are implemented.

[0042] This application creates a code editing object and obtains the code content corresponding to the code editing object, which includes HTML code, JavaScript code, CSS code and JSON Data code. Then, a template to be rendered is constructed based on the HTML code, JavaScript code and CSS code. When the JSON Data code is verified, native code is generated based on the template to be rendered and the JSON Data code, and the card is displayed based on the native code. This application obtains the code content corresponding to the code editing object, and then constructs the template to be rendered based on the HTML code, JavaScript code and CSS code. It can simply and effectively construct the template to be rendered. When the JSON Data code is verified, the rendering service is called, that is, the native code is generated based on the template to be rendered and the JSON Data code. In the scenario of large-scale card rendering, the page is smoother and the display performance is improved, so that the cards can be displayed simply and smoothly, the reusability of the cards is improved, and the system maintenance cost is reduced. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0044] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0045] Figure 1 This is a flow chart of the first embodiment of the card display method of the present application;

[0046] Figure 2 This is a flow chart of the second embodiment of the card display method of the present application;

[0047] Figure 3 This is a schematic diagram of the overall process of an embodiment of the card display method of the present application;

[0048] Figure 4 This is a structural block diagram of the first embodiment of the card display device of the present application;

[0049] Figure 5 It is a structural diagram of a card display device in a hardware operating environment involved in an embodiment of the present application.

[0050] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0051] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0052] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0053] The main solution of the embodiment of the present application is: create a code editing object, and obtain the code content corresponding to the code editing object, the code content includes HTML code, JavaScript code, CSS code and JSON Data code; build a template to be rendered according to the HTML code, the JavaScript code and the CSS code; when the JSON Data code is verified, generate native code according to the template to be rendered and the JSON Data code, and display cards based on the native code.

[0054] With the development of technology, we are currently experiencing a transition from the mobile Internet era to the artificial intelligence era. Artificial intelligence has expanded the use scenarios of conversational interaction. As a commonly used interaction method in the dialogue system, conversational cards have the advantages of friendly interface and convenient operation. They are widely used and have great development needs. Introducing an open source dialogue system UI component library in the project, the display style of the dialogue page depends on the functions provided by the component library. Such UI component libraries implement components such as dialogue, form, and display, which are used to develop functions such as cards, bubbles, progress bars, announcements, and pop-ups. However, different component libraries usually need to be introduced, which increases the maintenance cost of the code. Implementing the function of drag-and-drop card development on the dialogue system management end, users only need to drag the corresponding module to realize the development of cards. However, this method is difficult to meet the personalized needs in different scenarios, difficult to handle complex business logic, and has low flexibility. It is only suitable for simple interactive dialogue scenarios. In order to realize the new drag-and-drop function of the card, the development difficulty and maintenance cost are increased.

[0055] This application creates a code editing object and obtains the code content corresponding to the code editing object, which includes HTML code, JavaScript code, CSS code and JSON Data code. Then, a template to be rendered is constructed based on the HTML code, JavaScript code and CSS code. When the JSON Data code is verified, native code is generated based on the template to be rendered and the JSON Data code, and the card is displayed based on the native code. This application obtains the code content corresponding to the code editing object, and then constructs the template to be rendered based on the HTML code, JavaScript code and CSS code. It can simply and effectively construct the template to be rendered. When the JSON Data code is verified, the rendering service is called, that is, the native code is generated based on the template to be rendered and the JSON Data code. In the scenario of large-scale card rendering, the page is smoother and the display performance is improved, so that the cards can be displayed simply and smoothly, the reusability of the cards is improved, and the system maintenance cost is reduced.

[0056] It should be noted that the execution subject of the present application may be a computing service device with data processing, network communication and program running functions, such as a computer, or an electronic device capable of realizing the above functions, a card display device, etc. The following takes a card display device as an example to illustrate this embodiment and the following embodiments.

[0057] Based on this, the present application embodiment provides a card display method, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the card display method of the present application.

[0058] In this embodiment, the card display method includes the following steps:

[0059] Step S10: Create a code editing object, and obtain code content corresponding to the code editing object, wherein the code content includes HTML code, JavaScript code, CSS code, and JSON Data code.

[0060] It is understandable that this embodiment can create a code editing object based on the browser code editor monaco-editor, that is, create four code editing object component instances of HTML, JavaScript, CSS, and JSON Data, and obtain the code content corresponding to the code editing object. The code content can be input by the developer. Specifically, the programming language type can be identified by the field defaultLanguage. When the input event is triggered, a code prompt is generated according to the input content. When the code is saved, HTML, JavaScript, CSS, and JSON Data automatically complete the code formatting.

[0061] Furthermore, in this embodiment, before step S10, it also includes: creating a template component, and writing the template component into a preset file.

[0062] It should be understood that in this embodiment, the template component can be created through the macro instruction, and the component name and the parameters that the component will receive can be defined. The parameters can be variables, such as name, age, etc. The template component is then written into a preset file, which can be components.ftl. When using the template component, the template component library file is introduced through include, and the component is used through the <@... / > instruction.

[0063] Accordingly, the step S10 includes: creating a code editing object, and determining a code variable corresponding to the code editing object according to the preset file; and acquiring code content corresponding to the code variable.

[0064] It is understandable that after creating a code editing object, the code variable corresponding to the code editing object can be determined according to the preset file, that is, the code variable existing in each code editing object. Specifically, the preset file may contain several code variables. For each code editing object, the code variables involved may be different, so the code variable corresponding to the code editing object can be selected from the preset file. Then the code content corresponding to the code variable is obtained. For example, the code content corresponding to the code variable age is 18.

[0065] Step S20: construct a template to be rendered according to the HTML code, the JavaScript code and the CSS code.

[0066] It should be understood that, in this embodiment, a template to be rendered may be constructed according to HTML code, JavaScript code and CSS code. The template to be rendered may be composed of CSS code and HTML code, and the JavaScript code is written into an anonymous function.

[0067] Step S30: when the JSON Data code is verified to be passed, a native code is generated according to the template to be rendered and the JSON Data code, and a card is displayed based on the native code.

[0068] Furthermore, in order to effectively generate native code, in this embodiment, the step S30 includes: when the JSON Data code is verified, parsing the JSON Data code to obtain JSON data; matching the JSON data with the template to be rendered to obtain a matching result; generating native code according to the matching result, and displaying cards based on the native code.

[0069] It is understandable that when the JSON Data code verification passes, the JSON Data code can be parsed to obtain JSON data, and the JSON data can be matched with the template to be rendered, that is, to determine which template to be rendered the JSON data is applicable to, and then generate native code based on the matching result. The matching result may include JSON data and the corresponding template to be rendered. The JSON data is then input into the template to be rendered to obtain the native code, and the native code can be displayed as a card through an iframe for preview effect.

[0070] Furthermore, in order to accurately determine whether the JSON Data code has passed the verification, in this embodiment, when the JSON Data code has passed the verification, before the step of generating native code according to the template to be rendered and the JSON Data code, and displaying the card based on the native code, it also includes: determining whether the JSON Data code is a JSON string; if so, determining that the JSON Data code has passed the verification; if not, determining that the JSON Data code has failed the verification.

[0071] It should be understood that, in this embodiment, it can first be determined whether the JSON Data code is a JSON string. If so, the JSON Data code check passes; if the JSON Data code is not a JSON string, it is determined that the JSON Data code check fails.

[0072] This embodiment creates a code editing object and obtains the code content corresponding to the code editing object, the code content includes HTML code, JavaScript code, CSS code and JSON Data code, then builds a template to be rendered according to the HTML code, JavaScript code and CSS code, and generates native code according to the template to be rendered and the JSON Data code when the JSON Data code is verified, and displays the card based on the native code. This embodiment obtains the code content corresponding to the code editing object, then builds the template to be rendered according to the HTML code, JavaScript code and CSS code, and can simply and effectively build the template to be rendered. When the JSON Data code is verified, the rendering service is called, that is, the native code is generated according to the template to be rendered and the JSON Data code. In the scenario of mass rendering of cards, the page is smoother and the display performance is improved, so that the cards can be displayed simply and smoothly, the reusability of the cards is improved, and the system maintenance cost is reduced.

[0073] refer to Figure 2 , Figure 2 This is a flow chart of the second embodiment of the card display method of the present application.

[0074] Based on the above first embodiment, in this embodiment, step S20 includes:

[0075] Step S201: Obtain an HTML function identifier corresponding to the HTML code and a JavaScript function identifier corresponding to the JavaScript code.

[0076] It is understandable that this embodiment can obtain the HTML function identifier corresponding to the HTML code and the JavaScript function identifier corresponding to the JavaScript code. The HTML function identifier can be the uid contained in the HTML function name corresponding to the HTML code, and the JavaScript function identifier can be the uid contained in the JavaScript function name corresponding to the JavaScript code. The uid is a 13-digit timestamp obtained through freeMarker. By setting the timestamp, it is possible to avoid overwriting of functions with the same name and affecting the interactive function.

[0077] Step S202: Obtain the style class name corresponding to the CSS code.

[0078] It should be understood that this embodiment can obtain the style class name corresponding to the CSS code, and specifically, the card template style class name can be set to start with te-.

[0079] Step S203: construct a template to be rendered according to the HTML code, the JavaScript code, the CSS code, the HTML function identifier, the JavaScript function identifier and the style class name.

[0080] Further, in this embodiment, the step S203 includes: searching for a code string from the CSS code according to the style class name; inserting a random string after the code string to obtain a target string; constructing a target CSS code according to the target string and the CSS code; and constructing a template to be rendered according to the HTML code, the JavaScript code, the target CSS code, the HTML function identifier, the JavaScript function identifier and the style class name.

[0081] It is understandable that after completing the template code editing, all strings in the CSS code are traversed, te- is matched, the matching code string is found, a random string is inserted after the code string, the target string is obtained, and then the code string in the CSS code is replaced with the corresponding target string to obtain the target CSS code, thereby avoiding the same CSS class name based on the style class name, which will cause overwriting of other system styles.

[0082] In a specific implementation, the template to be rendered may be composed of HTML code and HTML function identifier, JavaScript code and JavaScript function identifier, target CSS code and style class name, and can avoid CSS style class names and functions with the same name.

[0083] Furthermore, in order to effectively compress the initial template to be rendered, in this embodiment, the step S20 also includes: deleting the code format placeholders and code comments in the template to be rendered to obtain the deleted template to be rendered; performing word splitting on all codes in the deleted template to be rendered to obtain a word unit set; selecting a target word unit to be replaced from the word unit set; replacing the target word unit according to a preset replacement rule to obtain a compressed template to be rendered.

[0084] It is understandable that after obtaining the template to be rendered, the code format placeholders in the template to be rendered can be deleted first, for example, integer placeholders, floating point placeholders, etc., and the code comments in the template to be rendered can also be deleted to obtain the deleted template to be rendered.

[0085] It should be understood that after obtaining the deleted template to be rendered, all codes in the deleted template to be rendered can be word-splitting according to the segmentation characters to obtain a number of word units, and form a word unit set. Then, the target word unit to be replaced is selected from the word unit set. Specifically, it can be screened according to the length corresponding to each word unit in the word unit set, and the word unit with a larger length can be selected as the target word unit. Then, the target word unit is replaced according to the preset replacement rule. Specifically, a compressed vocabulary mapping table can be set first, that is, a mapping table between the vocabulary before compression and the vocabulary after compression, and then the target word unit is replaced according to the compressed vocabulary mapping table to obtain uncompressed word units and compressed word units to form a compressed template to be rendered.

[0086] Furthermore, in the present embodiment, the step of selecting the target word unit to be replaced from the word unit set specifically includes: determining the word meanings corresponding to all the word units in the word unit set; splitting all the word units again according to the word meanings to obtain an initial word unit set; determining the word lengths corresponding to all the initial word units in the initial word unit set; and selecting the target word unit to be replaced from the initial word unit set according to the word lengths.

[0087] It is understandable that after word splitting is performed on all the codes in the template to be rendered after deletion, a word unit set is obtained. This embodiment can split all the word units in the word unit set again, specifically determine the word meanings corresponding to all word units, and then split all the word units again according to the word meanings. If the word meaning corresponding to a certain word unit does not affect the actual meaning after splitting, the word unit can be split according to the splitting result of the word meaning to obtain an initial word unit set. The initial word unit set can include all the initial word units after splitting again, and the number of initial word units is greater than or equal to the number of word units.

[0088] It should be understood that the word lengths corresponding to all initial word units in the initial word unit set can be determined, and the initial word units corresponding to the longer word lengths can be used as target word units to be replaced.

[0089] In the specific implementation, refer to Figure 3 , Figure 3This is a schematic diagram of the overall process of an embodiment of the card display method of this application. You can first build the template component freeMarker, and create four code editing object component instances of HTML, JavaScript, CSS, and JSON Data. Then, edit the code based on the browser code editor, and generate a template to be rendered and isolate it, that is, obtain a template to be rendered that carries an HTML function identifier, a JavaScript function identifier, and a style class name, and preview or store the template to be rendered, and then render it through the template to be rendered to obtain the native code, and then display the card based on the native code. The template to be rendered can also be compressed to obtain the compressed template to be rendered and store it.

[0090] This embodiment obtains the HTML function identifier corresponding to the HTML code and the JavaScript function identifier corresponding to the JavaScript code, and then obtains the style class name corresponding to the CSS code, and then constructs an initial template to be rendered according to the HTML code, JavaScript code, CSS code, HTML function identifier, JavaScript function identifier and style class name, and then compresses the initial template to be rendered to obtain the template to be rendered. This embodiment first constructs the initial template to be rendered according to the HTML code, JavaScript code, CSS code, HTML function identifier, JavaScript function identifier and style class name, which can effectively construct the initial template to be rendered, and then compresses the initial template to be rendered, which can reduce the size of the template to be rendered.

[0091] Reference Figure 4 , Figure 4 This is a structural block diagram of the first embodiment of the card display device of the present application.

[0092] like Figure 4 As shown, the card display device proposed in the embodiment of the present application includes:

[0093] The code editing module 10 is used to create a code editing object and obtain the code content corresponding to the code editing object, wherein the code content includes HTML code, JavaScript code, CSS code and JSON Data code;

[0094] A template construction module 20, used to construct a template to be rendered according to the HTML code, the JavaScript code and the CSS code;

[0095] The card display module 30 is used to generate native code according to the template to be rendered and the JSON Data code when the JSON Data code is verified, and to display the card based on the native code.

[0096] This embodiment creates a code editing object and obtains the code content corresponding to the code editing object, the code content includes HTML code, JavaScript code, CSS code and JSON Data code, then builds a template to be rendered according to the HTML code, JavaScript code and CSS code, and generates native code according to the template to be rendered and the JSON Data code when the JSON Data code is verified, and displays the card based on the native code. This embodiment obtains the code content corresponding to the code editing object, then builds the template to be rendered according to the HTML code, JavaScript code and CSS code, and can simply and effectively build the template to be rendered. When the JSON Data code is verified, the rendering service is called, that is, the native code is generated according to the template to be rendered and the JSON Data code. In the scenario of mass rendering of cards, the page is smoother and the display performance is improved, so that the cards can be displayed simply and smoothly, the reusability of the cards is improved, and the system maintenance cost is reduced.

[0097] It should be noted that the workflow described above is merely illustrative and does not limit the scope of protection of the present application. In practical applications, technicians in this field can select part or all of it according to actual needs to achieve the purpose of the present embodiment, and no limitation is made here.

[0098] In addition, for technical details that are not described in detail in this embodiment, please refer to the card display method provided in any embodiment of the present application, and will not be repeated here.

[0099] Based on the above-mentioned first embodiment of the card display device of the present application, a second embodiment of the card display device of the present application is proposed.

[0100] In this embodiment, the card display module 30 is also used to parse the JSON Data code to obtain JSON data when the JSON Data code verification passes; match the JSON data with the template to be rendered to obtain a matching result; generate native code according to the matching result, and display the card based on the native code.

[0101] Furthermore, the code editing module 10 is also used to create a template component and write the template component into a preset file; create a code editing object and determine the code variable corresponding to the code editing object according to the preset file; and obtain the code content corresponding to the code variable.

[0102] Furthermore, the template construction module 20 is also used to obtain the HTML function identifier corresponding to the HTML code and the JavaScript function identifier corresponding to the JavaScript code; obtain the style class name corresponding to the CSS code; and construct a template to be rendered according to the HTML code, the JavaScript code, the CSS code, the HTML function identifier, the JavaScript function identifier and the style class name.

[0103] Furthermore, the template construction module 20 is also used to search for a code string from the CSS code according to the style class name; insert a random string after the code string to obtain a target string; construct a target CSS code according to the target string and the CSS code; and construct a template to be rendered according to the HTML code, the JavaScript code, the target CSS code, the HTML function identifier, the JavaScript function identifier and the style class name.

[0104] Furthermore, the template construction module 20 is also used to delete the code format placeholders and code comments in the template to be rendered to obtain the deleted template to be rendered; perform word splitting on all codes in the deleted template to be rendered to obtain a word unit set; select target word units to be replaced from the word unit set; replace the target word units according to preset replacement rules to obtain a compressed template to be rendered.

[0105] Furthermore, the template construction module 20 is also used to determine the meanings of words corresponding to all word units in the word unit set; split all word units again according to the meanings to obtain an initial word unit set; determine the word lengths corresponding to all initial word units in the initial word unit set; and select the target word unit to be replaced from the initial word unit set according to the word length.

[0106] Other embodiments or specific implementations of the card display device of the present application can refer to the above-mentioned method embodiments, which will not be repeated here.

[0107] The present application provides a card display device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the card display method in the above-mentioned embodiment one.

[0108] Reference below Figure 5, which shows a schematic diagram of the structure of a card display device suitable for implementing the embodiment of the present application. The card display device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 5 The card display device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0109] like Figure 5 As shown, the card display device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM) 1004. In the RAM 1004, various programs and data required for the operation of the card display device are also stored. The processing device 1001, the ROM 1002, and the RAM 1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the card display device to communicate with other devices wirelessly or by wire to exchange data. Although the card display device with various systems is shown in the figure, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or have alternatively.

[0110] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0111] The card display device provided by the present application adopts the card display method in the above embodiment, which can solve the technical problem of how to simply and smoothly display cards and reduce system maintenance costs. Compared with the prior art, the beneficial effects of the card display device provided by the present application are the same as the beneficial effects of the card display method provided by the above embodiment, and other technical features in the card display device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0112] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0113] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0114] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the card display method in the above-mentioned embodiment.

[0115] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.

[0116] The computer-readable storage medium may be included in the card display device; or may exist independently without being assembled into the card display device.

[0117] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the card display device, the card display device: creates a code editing object, and obtains the code content corresponding to the code editing object, and the code content includes HTML code, JavaScript code, CSS code and JSON Data code; builds a template to be rendered according to the HTML code, the JavaScript code and the CSS code; when the JSON Data code is verified, generates native code according to the template to be rendered and the JSON Data code, and displays the card based on the native code.

[0118] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0119] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0120] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0121] The readable storage medium provided in the present application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned card display method, and can solve the technical problem of how to simply and smoothly display cards and reduce system maintenance costs. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in the present application are the same as the beneficial effects of the card display method provided in the above-mentioned embodiment, and will not be repeated here.

[0122] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A card display method, characterized in that: The card display method comprises the following steps: Create a code editing object, and obtain the code content corresponding to the code editing object, wherein the code content includes HTML code, JavaScript code, CSS code and JSON Data code; Construct a template to be rendered according to the HTML code, the JavaScript code and the CSS code; When the JSON Data code is verified to be passed, native code is generated according to the template to be rendered and the JSON Data code, and the card is displayed based on the native code.

2. The card display method according to claim 1, characterized in that: When the JSON Data code is verified to be passed, the step of generating native code according to the template to be rendered and the JSON Data code, and displaying the card based on the native code specifically includes: When the JSON Data code passes the inspection, the JSON Data code is parsed to obtain JSON data; Match the JSON data with the template to be rendered to obtain a matching result; A native code is generated according to the matching result, and a card is displayed based on the native code.

3. The card display method according to claim 1, characterized in that: Before the steps of creating a code editing object and obtaining the code content corresponding to the code editing object, the method further includes: Create a template component and write the template component into a preset file; Accordingly, the steps of creating a code editing object and obtaining the code content corresponding to the code editing object specifically include: Creating a code editing object, and determining a code variable corresponding to the code editing object according to the preset file; Get the code content corresponding to the code variable.

4. The card display method according to claim 1, characterized in that: The step of constructing a template to be rendered according to the HTML code, the JavaScript code and the CSS code specifically includes: Obtaining an HTML function identifier corresponding to the HTML code and a JavaScript function identifier corresponding to the JavaScript code; Get the style class name corresponding to the CSS code; A template to be rendered is constructed according to the HTML code, the JavaScript code, the CSS code, the HTML function identifier, the JavaScript function identifier, and the style class name.

5. The card display method according to claim 4, characterized in that: The step of constructing a template to be rendered according to the HTML code, the JavaScript code, the CSS code, the HTML function identifier, the JavaScript function identifier, and the style class name specifically includes: Searching for a code string from the CSS code according to the style class name; Inserting a random string after the code string to obtain a target string; Construct a target CSS code according to the target string and the CSS code; A template to be rendered is constructed according to the HTML code, the JavaScript code, the target CSS code, the HTML function identifier, the JavaScript function identifier, and the style class name.

6. The card display method according to any one of claims 1 to 5, characterized in that: After the step of constructing a template to be rendered according to the HTML code, the JavaScript code and the CSS code, the step further includes: Deleting the code format placeholders and code comments in the template to be rendered to obtain the deleted template to be rendered; Perform word splitting on all codes in the deleted template to be rendered to obtain a word unit set; Selecting a target word unit to be replaced from the word unit set; The target word unit is replaced according to a preset replacement rule to obtain a compressed template to be rendered.

7. The card display method according to claim 6, characterized in that: The step of selecting the target word unit to be replaced from the word unit set specifically includes: Determine the word meanings corresponding to all word units in the word unit set; Splitting all the word units again according to the word meaning to obtain an initial word unit set; Determine the word lengths corresponding to all initial word units in the initial word unit set; A target word unit to be replaced is selected from the initial word unit set according to the word length.

8. A card display device, characterized in that: The card display device comprises: A code editing module, used to create a code editing object and obtain the code content corresponding to the code editing object, wherein the code content includes HTML code, JavaScript code, CSS code and JSON Data code; A template construction module, used to construct a template to be rendered according to the HTML code, the JavaScript code and the CSS code; The card display module is used to generate native code according to the template to be rendered and the JSON Data code when the JSON Data code is verified, and to display the card based on the native code.

9. A card display device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the card display method according to any one of claims 1 to 7.

10. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the card display method according to any one of claims 1 to 7 are implemented.

Images