A method and system for rendering a Table-like component in a WeChat applet

Abstract

The present invention discloses a method and system for rendering a class Table component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining preset component function information; making fine-grained distinctions on the first table information to be rendered, and generating a first table simulation layout style; obtaining a first table header title function area, a first table body cell function area, and a first table total data module function area; controlling rendering respectively, and generating an initial simulation rendering style of the first table information to be rendered; performing combined rendering on the configuration components of the initial simulation rendering style, and generating a preset simulation rendering style of the first table information to be rendered, which solves the technical problem in the prior art that the multifunctional table component on the applet end only supports basic functions such as basic table display, and cannot meet complex interactive display scenarios.

Description

Technical Field

[0001] The present invention relates to the technical field of component rendering, and in particular to a method and system for rendering a Table-like component in a WeChat applet. Background Art

[0002] Since WeChat Mini Programs do not natively support table view components, and WeChat Mini Programs are limited by the screen interaction design of mobile phones, they generally do not display tables. There are also few table component rendering UI modes in the WeChat Mini Program technology field. Some of them are just basic table mode displays, lacking many functional support for specific scenarios similar to PC terminals: left and right fixed, top fixed, cell merging, multi-dimensional tables, etc.

[0003] However, the inventors of this application found that the above technology has at least the following technical problems in the process of implementing the technical solution of the invention in the embodiment of this application:

[0004] The existing multi-functional table components on the mini-program side only support basic functions such as basic table display, and cannot meet the technical problems of complex interactive display scenarios. Summary of the invention

[0005] In view of the defects in the prior art, the purpose of the embodiments of this application is to provide a rendering method and system for a Table-like component in a WeChat applet, thereby solving the technical problem that the multifunctional table component on the applet side only supports basic functions such as basic table display and cannot meet the requirements of complex interactive display scenarios. By adopting the taro framework and components developed with React syntax, the component configuration scheme is used to facilitate fine-grained differentiation of functions in different areas of the table, separate processing, and finally combined rendering. The low-coupling and high-cohesion model is easier to maintain and develop functions, achieving the technical effect of displaying data in a table UI rendering mode, realizing more customized functions of the multifunctional table component on the applet side, and thus meeting the requirements of complex interactive display scenarios.

[0006] On the one hand, an embodiment of the present application provides a rendering method for a class Table component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining preset component function information based on the first table information to be rendered; based on the functions of different areas, making fine-grained distinctions in the first table information to be rendered, and generating a first table simulation layout style; according to the first table simulation layout style, obtaining a first table header title functional area, a first table body cell functional area, and a first table aggregate data module functional area; controlling the rendering of the first table header title functional area, the first table body cell functional area, and the first table aggregate data module functional area respectively, and generating an initial simulation rendering style of the first table information to be rendered; based on custom attributes, combining and rendering the configuration components of the initial simulation rendering style, and generating a preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information.

[0007] On the other hand, the present application also provides a table-like component rendering system in a WeChat applet, wherein the system includes: a first obtaining unit: the first obtaining unit is used to obtain first table information to be rendered; a second obtaining unit: the second obtaining unit is used to obtain preset component function information based on the first table information to be rendered; a first distinguishing unit: the first distinguishing unit is used to make fine-grained distinctions in the first table information to be rendered based on different area functions, and generate a first table simulation layout style; a third obtaining unit: the third obtaining unit is used to obtain the first table header title function area, the first table body cell function area, and the first table aggregate data module function area according to the first table simulation layout style; a first rendering unit: the first rendering unit is used to control the rendering of the first table header title function area, the first table body cell function area, and the first table aggregate data module function area, respectively, to generate an initial simulation rendering style of the first table information to be rendered; a second rendering unit: the second rendering unit is used to combine and render the configuration components of the initial simulation rendering style based on custom attributes, and generate a preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information.

[0008] One or more technical solutions provided in the embodiments of the present application have at least the following technical effects or advantages:

[0009] Obtain the first table information to be rendered; obtain the preset component function information according to the first table information to be rendered; make fine-grained distinctions on the first table information to be rendered based on the functions of different regions, and generate the first table simulation layout style; obtain the first table header title function area, the first table body cell function area, and the first table aggregate data module function area according to the first table simulation layout style; respectively control the rendering of the first table header title function area, the first table body cell function area, and the first table aggregate data module function area to generate the initial simulation rendering style of the first table information to be rendered; based on the custom attributes, perform combined rendering on the configuration components of the initial simulation rendering style to generate the preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information. By adopting the taro framework and components developed with React syntax, the component configuration scheme is used to facilitate fine-grained distinction of functions of different regions of the table, separate processing, and finally combined rendering. The low-coupling and high-cohesion mode is easier to maintain and develop functions, achieving the technical effect of displaying data in the form of table UI rendering, realizing more customized functions of the multi-functional table component on the mini program side, and thus meeting complex interactive display scenarios.

[0010] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Other features, objects and advantages of the present invention will become more apparent from the detailed description of non-limiting embodiments made with reference to the following drawings:

[0012] Figure 1 This is a flowchart of a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;

[0013] Figure 2 A schematic diagram of a flow chart of a method for rendering a Table-like component in a WeChat applet in an embodiment of the present application for combining and rendering the location information of the page to be rendered;

[0014] Figure 3 A schematic diagram of a process of rendering a visual node in the first table information to be rendered in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;

[0015] Figure 4A schematic diagram of a process for centrally processing the feature set of page nodes in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;

[0016] Figure 5 A schematic diagram of a flow chart of a method for rendering a merged cell in a Table-like component rendering method in a WeChat applet according to an embodiment of the present application;

[0017] Figure 6 A schematic diagram of a process of hiding the first cell data set in a method for rendering a Table-like component in a WeChat applet according to an embodiment of the present application;

[0018] Figure 7 This is a structural diagram of a table-like component rendering system in a WeChat applet according to an embodiment of the present application;

[0019] Figure 8 It is a schematic diagram of the structure of an exemplary electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0020] The embodiment of the present application solves the technical problem that the multifunctional table component on the mini-program side only supports basic functions such as basic table display and cannot meet the complex interactive display scenarios in the prior art by providing a rendering method and system for a class Table component in a WeChat mini-program. By adopting the taro framework and components developed with React syntax, the component configuration scheme is used to facilitate fine-grained differentiation of functions in different areas of the table, separate processing, and finally combined rendering. The low-coupling and high-cohesion model is easier to maintain and develop functions, achieving the technical effect of displaying data in a table UI rendering mode, realizing more customized functions of the multifunctional table component on the mini-program side, and thus meeting the complex interactive display scenarios.

[0021] Below, the exemplary embodiments according to the present application will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments of the present application, and it should be understood that the present application is not limited to the exemplary embodiments described here.

[0022] Application Overview

[0023] Since WeChat Mini Programs do not natively support table view components, and WeChat Mini Programs are limited by the interactive design of mobile phone screens, they generally do not display tables. There are also few table component rendering UI modes in the WeChat Mini Program technology field, and some of them are just basic table mode displays, lacking many functional support for specific scenarios similar to PC terminals: left and right fixed, top fixed, cell merging, multi-dimensional tables, etc. The existing mini program-side multi-functional table components in the prior art only support basic functions such as basic table display, and cannot meet the technical problems of complex interactive display scenarios.

[0024] In response to the above technical problems, the overall idea of ​​the technical solution provided by this application is as follows:

[0025] An embodiment of the present application provides a method for rendering a class Table component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining preset component function information based on the first table information to be rendered; making fine-grained distinctions in the first table information to be rendered based on different area functions, and generating a first table simulation layout style; obtaining a first table header title functional area, a first table body cell functional area, and a first table aggregate data module functional area based on the first table simulation layout style; controlling the rendering of the first table header title functional area, the first table body cell functional area, and the first table aggregate data module functional area respectively, and generating an initial simulation rendering style of the first table information to be rendered; based on customized attributes, combining and rendering the configuration components of the initial simulation rendering style, and generating a preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information.

[0026] In order to better understand the above technical solution, the above technical solution will be described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0027] Embodiment 1

[0028] like Figure 1 As shown, the embodiment of the present application provides a method for rendering a Table-like component in a WeChat applet, wherein the method includes:

[0029] Step S100: obtaining first table information to be rendered;

[0030] Step S200: obtaining preset component function information according to the first table information to be rendered;

[0031] Specifically, since WeChat Mini Programs do not natively support table view components, and WeChat Mini Programs are limited by the screen interaction design of mobile phones, they generally do not display tables. There are also few table component rendering UI modes in the WeChat Mini Program technology field. Some of them are just basic table mode displays, lacking many functional support for specific scenarios similar to PC terminals: left and right fixed, top fixed, cell merging, multi-dimensional tables, etc. In order to realize the multi-functional requirements of the table view component and thus meet the complex interactive display scenarios, in an embodiment of the present application, the first table information to be rendered can be obtained first. The first table information to be rendered is the table information for rendering the table view that appears in the WeChat applet. Because the existing applet field does not natively support it, various simple simulation related technologies cannot meet the complex interactive display scenarios. Therefore, the preset component function information makes up for the shortcomings of the existing functions. To expand the existing simple functions, it can further include custom rendering styles and data-free UI, loading animations, background animations triggered for each row, support for multi-dimensional headers, support for cell merging, support for total and subtotal display, support for header and footer descriptions, support for row expansion, support for headers and multiple columns fixed, handle performance issues caused by multiple fields, large data volumes, and too many nodes, and support control of table spacing size mode distinction and other functions.

[0032] Step S300: Based on different regional functions, the first table information to be rendered is finely differentiated to generate a first table simulation layout style;

[0033] Step S400: obtaining a first table header function area, a first table body cell function area, and a first table total data module function area according to the first table simulation layout style;

[0034] Specifically, given the first table information to be rendered, in order to realize the preset component function information, further, the first table information to be rendered can be fine-grained based on different regional functions, that is, the table is divided according to different functional areas of the table, and the partitions are rendered according to the fine-grained differences of each area. The first table simulation layout style is the result of the functional area division. Specifically, the flex css syntax can be used to process cells, header fields, etc., accurately and dynamically layout to simulate the form of the table, and then based on the first table simulation layout style, the first table header title functional area, the first table body cell functional area and the first table aggregate data module functional area are obtained, wherein the first table header title functional area is the functional area where the header title is located, the first table body cell functional area is the functional area where the body cell is located, and the first table aggregate data module functional area is the functional area where the aggregate data module is located. It should be noted that instead of uniformly rendering the functional areas of the table, the configuration attributes of each functional area should be selectively controlled and combined according to the actual needs of the table to ensure that the final table style meets the actual needs.

[0035] Step S500: respectively controlling the rendering of the first table header function area, the first table body cell function area, and the first table aggregate data module function area to generate an initial simulated rendering style of the first table information to be rendered;

[0036] Specifically, in order to perform multi-functional rendering of the table, further, the first table header title functional area, the first table body cell functional area and the first table total data module functional area can be controlled and rendered respectively. Specifically, based on the TableTitle component, it is used to render the header title and sorting function; based on the TableHeader component, it is used to process the single-layer or multi-layer header logic of the basic table multi-dimensional table; based on the TableBody component, it is used to process the data rendering of the table body cells to ensure the customization of the cell width; based on the TableRender component, it is used to process the table to distinguish between left and right fixed tables, top fixed header logic and trigger scrolling interactive rendering logic; based on the TotalTable component, it is used to render the total data module separately, etc. The initial simulation rendering style can be understood as the style after the preliminary simulation rendering of the first table information to be rendered, and then the table is divided into multiple parts for multi-functional rendering.

[0037] Step S600: Based on the customized attributes, the configuration components of the initial simulated rendering style are combined and rendered to generate a preset simulated rendering style of the first table information to be rendered, wherein the preset simulated rendering style satisfies the preset component function information.

[0038] Specifically, in order to render the first table information to be rendered more carefully in the initial simulated rendering style, further, the configuration components of the initial simulated rendering style can be combined and rendered based on customized attributes. Specifically, the loading state of the control component is customized through the loading attribute; the rendering of the row and column data of the table body content is controlled through dataSource; the customized rendering of the table header field is controlled through columns. There are also many attributes in columns to control the customization of table functions: use title to display the header text to support custom rendering, use dataIndex to index the data corresponding to the key in dataSource, use fixed to add left or right fixation to the current column, colSpan controls the merging of cell columns in the table, rowSpan controls the merging of cell rows, use sort to add sorting to the current list header field, use width to control the table column width, and use render to generate a rendering function for complex data, with the parameters being the value of the current row, the current Row data, row index; control whether the table displays paging and related paging switching functions through the pagination attribute; control the table to display the total data row through the summary attribute; control whether the table can trigger left and right scrolling and fixed header scrolling up and down under multiple fields and large data volume through scroll; control the table spacing size mode through size: default / middle / small; customize the table style through some className, border; respond to table interaction events through some onChange, onSortChange, etc. The preset simulation rendering style is the style after the first table information to be rendered is rendered more carefully in the initial simulation rendering style. At the same time, the preset simulation rendering style satisfies the preset component function information, that is, the first table information to be rendered can realize the preset component function information after two simulation renderings, thereby realizing more customized functions of the multi-functional table component on the mini program side, thereby meeting complex interactive display scenarios.

[0039] Preferably, Figure 2 As shown, the embodiment of the present application also includes:

[0040] Step S610: simulating the layout style according to the first table to obtain the position information of the page to be rendered;

[0041] Step S620: matching corresponding component information according to the position information of the page to be rendered;

[0042] Step S630: Obtaining the function attribute value of each component according to the corresponding component information;

[0043] Step S640: Upload the function attribute values ​​of each component to the corresponding component information, and perform combined rendering on the position information of the page to be rendered.

[0044] Specifically, in order to perform combined rendering on the position information of the page to be rendered, further, the position information of the page to be rendered can be obtained according to the simulated layout style of the first table. In other words, if the functional area where the header title in the table is located is to be rendered, the position information of the header title displayed on the page can be obtained first, and then the corresponding component information is matched according to the position information of the page to be rendered, that is, the component is placed at the position where the page needs to be rendered. At the same time, according to the corresponding component information, the functional attribute values ​​of each component are obtained. For example, the rendering attribute value of the functional area where the header title in the table is located is implemented based on the TableTitle component, and then the functional attribute values ​​of each component are uploaded to the corresponding component information, and the position information of the page to be rendered is combined and rendered, that is, the functional area where the header title is located-the header title functional area component-TableTitle are vertically matched. Based on this method, the position information of the page to be rendered is further combined and rendered.

[0045] Preferably, Figure 3 As shown, the embodiment of the present application also includes:

[0046] Step S710: obtaining table data features of the first table information to be rendered;

[0047] Step S720: Obtaining the first page node quantity information according to the table data characteristics;

[0048] Step S730: determining whether the first page node quantity information reaches the preset node quantity information;

[0049] Step S740: if the first page node quantity information reaches the preset node quantity information, obtaining a first rendering means;

[0050] Step S750: According to the first rendering means, based on the virtual scrolling list technology, the visualization nodes in the first table information to be rendered are rendered.

[0051] Specifically, in order to adapt to the performance processing under large data volume and multiple fields, further, the table data characteristics of the first table information to be rendered can be obtained. The table data characteristics can be understood as the data characteristics in the table, whether it is a large data volume or multiple fields. If so, the first page node quantity information is obtained according to the table data characteristics. The first page node quantity information can be understood as the number of nodes displayed in the mini-program page. Since the mini-program page has requirements for the number of nodes, too many nodes will cause page jams and longer rendering time. Therefore, it is judged whether the first page node quantity information reaches the preset node quantity information. If reached, it means that the number of nodes displayed in the mini-program page is large, which may cause page jams and longer rendering time. In order to avoid such a situation, according to the first rendering means, based on the virtual scrolling list technology, the visual nodes in the first table information to be rendered can be rendered. Specifically, the virtual scrolling list technology is used to render only the nodes in the visible area, while minimizing the nesting of node layers and useless nodes, and processing partial data volume paging rendering and other means, so that the rendering of the table component can adapt to the performance processing under large data volume and multiple fields.

[0052] Preferably, Figure 4 As shown, the embodiment of the present application also includes:

[0053] Step S721: traverse and analyze the first page node quantity information to obtain a page node feature set;

[0054] Step S722: performing centralization processing on the page node feature set to obtain a second feature data set;

[0055] Step S723: Obtain a first covariance matrix of the second feature data set;

[0056] Step S724: operating the first covariance matrix to obtain a first eigenvalue and a first eigenvector of the first covariance matrix;

[0057] Step S725: Project the page node feature set to the first feature vector to obtain a first dimension reduction data set, wherein the first dimension reduction data set is a feature data set obtained after the page node feature set is dimensionally reduced.

[0058] Specifically, in order to reduce the number of nested nodes and useless nodes, the page node feature set can be further centralized, and the page node feature set is the result of traversing and analyzing the node features of the first page node quantity information. The extracted feature data is numerically processed, and a feature data set matrix is ​​constructed to obtain the page node feature set. Then, each feature data in the page node feature set is centralized. First, the average value of each feature in the page node feature set is solved, and then for all samples, each feature is subtracted from its own mean, and then a new eigenvalue is obtained. The new eigenvalue constitutes the second feature data set, and the second feature data set is a data matrix. Through the covariance formula:

[0059]

[0060] The second feature data set is operated to obtain a first covariance matrix of the second feature data set. is the feature data in the second feature data set; is the average value of the feature data; M is the total amount of sample data in the second feature data set. Then, through matrix operations, the eigenvalues ​​and eigenvectors of the first covariance matrix are obtained, and each eigenvalue corresponds to an eigenvector. Among the first eigenvectors obtained, the largest first K eigenvalues ​​and their corresponding eigenvectors are selected, and the original features in the page node feature set are projected onto the selected eigenvectors to obtain the first reduced dimension data set after dimensionality reduction. The feature data in the database is reduced in dimensionality by principal component analysis. Under the premise of ensuring the amount of information, redundant data is eliminated, so that the sample size of the feature data in the database is reduced, and the information loss after dimensionality reduction is minimized, thereby speeding up the training model's operation speed on the data, thereby reducing the number of nested node layers and useless nodes.

[0061] Preferably, Figure 5 As shown, the embodiment of the present application also includes:

[0062] Step S810: obtaining coordinate information and quantity information of cells to be merged according to the first table information to be rendered;

[0063] Step S820: indexing the coordinate information and quantity information of the cells to be merged to obtain index target cell data;

[0064] Step S830: Rendering the merged cell according to the index target cell data.

[0065] Further, such as Figure 6 As shown, the embodiment of the present application also includes:

[0066] Step S840: based on the index target cell data, the first table information to be rendered is screened to obtain a first cell data set, wherein the first cell data set is a data set of all cells not to be rendered;

[0067] Step S850: generating a first processing instruction according to the first cell data set;

[0068] Step S860: According to the first processing instruction, the first cell data set is hidden, and the cell borders of the first table information to be rendered are cancelled.

[0069] Specifically, in order to effectively render the merged cell components, further, the coordinate information and quantity information of the cells to be merged can be obtained according to the first table information to be rendered, the coordinate information is the row value and column value of the cells to be merged, and the quantity information is the number of cells to be merged, and then the coordinate information and quantity information of the cells to be merged are indexed to obtain the index target cell data. It can be understood that based on the clever hiding and single display mode rendering, row merging or column merging, the number of merges and the starting index are known, and then the merged cells are rendered according to the index target cell data, that is, all cells involved are hidden and not rendered, and only the cell data of the middle value index is displayed.

[0070] Furthermore, the first cell data set can also be hidden to create an illusion of cell merging, wherein the first cell data set is a data set of all cells that are not rendered. By hiding the first cell data set according to the first processing instruction and canceling the cell border of the first table information to be rendered, a hidden plus single item display mode rendering is achieved, creating an illusion of cell merging, thereby achieving effective rendering of the merged cell component.

[0071] Compared with the prior art, the present invention has the following beneficial effects:

[0072] 1. Obtain the first table information to be rendered; obtain the preset component function information according to the first table information to be rendered; make fine-grained distinctions on the first table information to be rendered based on the functions of different regions, and generate the first table simulation layout style; obtain the first table header title function area, the first table body cell function area, and the first table aggregate data module function area according to the first table simulation layout style; respectively control the rendering of the first table header title function area, the first table body cell function area, and the first table aggregate data module function area to generate the initial simulation rendering style of the first table information to be rendered; based on the custom attributes, perform combined rendering on the configuration components of the initial simulation rendering style to generate the preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information. By adopting the taro framework and components developed with React syntax, the component configuration scheme is used to facilitate fine-grained distinction of functions of different regions of the table, separate processing, and finally combined rendering. The low-coupling and high-cohesion mode is easier to maintain and develop functions, achieving the technical effect of displaying data in the form of table UI rendering, realizing more customized functions of the multi-functional table component on the mini program side, and thus meeting complex interactive display scenarios.

[0073] Embodiment 2

[0074] Based on the same inventive concept as the method for rendering a Table-like component in a WeChat applet in the aforementioned embodiment, the present invention also provides a system for rendering a Table-like component in a WeChat applet, such as Figure 7 As shown, the system comprises:

[0075] First obtaining unit 11: The first obtaining unit 11 is used to obtain first table information to be rendered;

[0076] The second obtaining unit 12: The second obtaining unit 12 is used to obtain preset component function information according to the first table information to be rendered;

[0077] The first distinguishing unit 13: the first distinguishing unit 13 is used to distinguish the first table information to be rendered in a fine-grained manner based on different regional functions, and generate a first table simulation layout style;

[0078] The third obtaining unit 14 is used to obtain the first table header function area, the first table body cell function area and the first table total data module function area according to the first table simulation layout style;

[0079] The first rendering unit 15: The first rendering unit 15 is used to control the rendering of the first table header function area, the first table body cell function area and the first table aggregate data module function area respectively, and generate an initial simulation rendering style of the first table information to be rendered;

[0080] The second rendering unit 16: The second rendering unit 16 is used to combine and render the configuration components of the initial simulation rendering style based on the customized attributes to generate a preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information.

[0081] Furthermore, the system also includes:

[0082] Fourth obtaining unit: the fourth obtaining unit is used to obtain the position information of the page to be rendered according to the first table simulation layout style;

[0083] First matching unit: The first matching unit is used to match corresponding component information according to the position information of the page to be rendered;

[0084] The fifth obtaining unit: the fifth obtaining unit is used to obtain the function attribute value of each component according to the corresponding component information;

[0085] The first uploading unit: The first uploading unit is used to upload the function attribute values ​​of each component to the corresponding component information, and perform combined rendering on the position information of the page to be rendered.

[0086] Furthermore, the system also includes:

[0087] Sixth obtaining unit: the sixth obtaining unit is used to obtain the table data feature of the first table information to be rendered;

[0088] Seventh obtaining unit: the seventh obtaining unit is used to obtain the first page node quantity information according to the table data characteristics;

[0089] First judgment unit: The first judgment unit is used to judge whether the first page node quantity information reaches the preset node quantity information;

[0090] An eighth obtaining unit: the eighth obtaining unit is used to obtain a first rendering means if the first page node quantity information reaches the preset node quantity information;

[0091] The third rendering unit: the third rendering unit is used to render the visualization nodes in the first table information to be rendered according to the first rendering means and based on the virtual scrolling list technology.

[0092] Furthermore, the system also includes:

[0093] First analysis unit: The first analysis unit is used to traverse and analyze the first page node quantity information to obtain a page node feature set;

[0094] First processing unit: The first processing unit is used to perform central processing on the page node feature set to obtain a second feature data set;

[0095] Ninth obtaining unit: the ninth obtaining unit is used to obtain a first covariance matrix of the second feature data set;

[0096] First operation unit: The first operation unit is used to operate the first covariance matrix to obtain the first eigenvalue and the first eigenvector of the first covariance matrix;

[0097] First projection unit: The first projection unit is used to project the page node feature set to the first feature vector to obtain a first dimension reduction data set, wherein the first dimension reduction data set is a feature data set obtained after the page node feature set is reduced in dimension.

[0098] Furthermore, the system also includes:

[0099] A tenth obtaining unit: the tenth obtaining unit is used to obtain coordinate information and quantity information of cells to be merged according to the first table information to be rendered;

[0100] First index unit: The first index unit is used to index the coordinate information and quantity information of the cells to be merged to obtain index target cell data;

[0101] Fourth rendering unit: the fourth rendering unit is used to render the merged cell according to the index target cell data.

[0102] Furthermore, the system also includes:

[0103] A first screening unit: the first screening unit is used to screen the first table information to be rendered based on the index target cell data to obtain a first cell data set, wherein the first cell data set is a data set of all cells that are not to be rendered;

[0104] First generating unit: The first generating unit is used to generate a first processing instruction according to the first cell data set;

[0105] The second processing unit: The second processing unit is used to hide the first cell data set according to the first processing instruction, and cancel the cell border of the first table information to be rendered.

[0106] The foregoing Figure 1 The various variations and specific examples of the method for rendering a Table-like component in a WeChat applet in Example 1 are also applicable to a system for rendering a Table-like component in a WeChat applet in this embodiment. Through the above detailed description of the method for rendering a Table-like component in a WeChat applet, those skilled in the art can clearly understand the implementation method of the system for rendering a Table-like component in a WeChat applet in this embodiment. Therefore, for the sake of brevity of the specification, it will not be described in detail here.

[0107] Embodiment 3

[0108] Reference below Figure 8 To describe the electronic device of the embodiment of the present application.

[0109] Figure 8 The figure shows a schematic structural diagram of an electronic device according to an embodiment of the present application.

[0110] Based on the inventive concept of a method for rendering a Table-like component in a WeChat applet in the aforementioned example, the present invention also provides a system for rendering a Table-like component in a WeChat applet, on which a computer program is stored, which, when executed by a processor, implements the steps of any method of a system for rendering a Table-like component in a WeChat applet described above.

[0111] Among them, Figure 8 In the embodiment of the present invention, a bus architecture (represented by bus 300) is shown, which may include any number of interconnected buses and bridges, and bus 300 links various circuits including one or more processors represented by processor 302 and memory represented by memory 304. Bus 300 may also link various other circuits such as peripherals, voltage regulators, and power management circuits, which are well known in the art and are not further described herein. Bus interface 305 provides an interface between bus 300 and receiver 301 and transmitter 303. Receiver 301 and transmitter 303 may be the same element, namely a transceiver, providing a unit for communicating with various other systems over a transmission medium. Processor 302 is responsible for managing bus 300 and general processing, while memory 304 may be used to store data used by processor 302 when performing operations.

[0112] An embodiment of the present application provides a method for rendering a class Table component in a WeChat applet, wherein the method includes: obtaining first table information to be rendered; obtaining preset component function information based on the first table information to be rendered; making fine-grained distinctions in the first table information to be rendered based on different area functions, and generating a first table simulation layout style; obtaining a first table header title functional area, a first table body cell functional area, and a first table aggregate data module functional area based on the first table simulation layout style; controlling the rendering of the first table header title functional area, the first table body cell functional area, and the first table aggregate data module functional area respectively, and generating an initial simulation rendering style of the first table information to be rendered; based on customized attributes, combining and rendering the configuration components of the initial simulation rendering style, and generating a preset simulation rendering style of the first table information to be rendered, wherein the preset simulation rendering style satisfies the preset component function information.

[0113] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0114] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A system that specifies the functions of a box or multiple boxes.

[0115] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a product including an instruction system, which is implemented in the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0116] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0117] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0118] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A method for rendering a Table-like component in a WeChat applet, wherein: The method comprises: Obtaining first table information to be rendered, where the first table information to be rendered is table information for rendering a table view that appears in the WeChat applet; According to the first table information to be rendered, obtaining preset component function information, wherein the preset component function information is used to indicate a custom function for expanding the function of the table component; Based on different regional functions, the first table information to be rendered is finely differentiated to generate a first table simulation layout style; According to the first table simulation layout style, obtain the first table header title function area, the first table body cell function area and the first table total data module function area; Controlling rendering of the first table header function area, the first table body cell function area, and the first table aggregate data module function area respectively, to generate an initial simulated rendering style of the first table information to be rendered; Based on the customized attributes, the configuration components of the initial simulated rendering style are combined and rendered to generate a preset simulated rendering style of the first table information to be rendered, wherein the preset simulated rendering style satisfies the preset component function information.

2. The method of claim 1, wherein: The method further comprises: Simulating the layout style according to the first table to obtain the position information of the page to be rendered; According to the location information of the page to be rendered, matching corresponding component information; According to the corresponding component information, obtain the function attribute value of each component; The function attribute values ​​of each component are uploaded to the corresponding component information, and the position information of the page to be rendered is combined and rendered.

3. The method of claim 2, wherein: The method further comprises: Obtaining table data features of the first table information to be rendered; According to the table data characteristics, obtaining the first page node quantity information; Determine whether the node quantity information of the first page reaches the preset node quantity information; If the first page node quantity information reaches the preset node quantity information, obtaining a first rendering means; According to the first rendering means, based on the virtual scrolling list technology, the visualization nodes in the first table information to be rendered are rendered.

4. The method of claim 3, wherein: The method further comprises: Performing traversal analysis on the first page node quantity information to obtain a page node feature set; Centralizing the page node feature set to obtain a second feature data set; Obtaining a first covariance matrix of the second feature data set; Performing operations on the first covariance matrix to obtain a first eigenvalue and a first eigenvector of the first covariance matrix; The page node feature set is projected onto the first feature vector to obtain a first dimension reduction data set, wherein the first dimension reduction data set is a feature data set obtained after the page node feature set is dimensionally reduced.

5. The method of claim 4, wherein: The method further comprises: According to the first table information to be rendered, obtaining coordinate information and quantity information of cells to be merged; Indexing the coordinate information and quantity information of the cells to be merged to obtain index target cell data; The merged cell is rendered according to the index target cell data.

6. The method of claim 5, wherein: The method further comprises: Based on the index target cell data, the first table information to be rendered is screened to obtain a first cell data set, wherein the first cell data set is a data set of all cells that are not to be rendered; generating a first processing instruction according to the first cell data set; According to the first processing instruction, the first cell data set is hidden, and the cell borders of the first table information to be rendered are cancelled.

7. A table-like component rendering system in a WeChat applet, wherein: The system comprises: First obtaining unit: The first obtaining unit is used to obtain first table information to be rendered, where the first table information to be rendered is table information for rendering a table view appearing in a WeChat applet; Second obtaining unit: The second obtaining unit is used to obtain preset component function information according to the first table information to be rendered, wherein the preset component function information is used to indicate a custom function for expanding the function of the table component; The first distinguishing unit: the first distinguishing unit is used to distinguish the first table information to be rendered in a fine-grained manner based on different regional functions, and generate a first table simulation layout style; The third obtaining unit is used to obtain the first table header function area, the first table body cell function area and the first table total data module function area according to the first table simulation layout style; The first rendering unit is used to control the rendering of the first table header function area, the first table body cell function area and the first table aggregate data module function area respectively, and generate an initial simulation rendering style of the first table information to be rendered; The second rendering unit: The second rendering unit is used to combine and render the configuration components of the initial simulated rendering style based on customized attributes to generate a preset simulated rendering style of the first table information to be rendered, wherein the preset simulated rendering style satisfies the preset component function information.

8. A table-like component rendering system in a WeChat applet, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the method according to any one of claims 1 to 6 are implemented.

Images