一种微信小程序中的类table组件渲染方法及系统
技术领域：
：1.本发明涉及组件渲染
技术领域：
：，具体地，涉及一种微信小程序中的类table组件渲染方法及系统。
背景技术：
：：2.由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序
技术领域：
：也很少的table组件渲染ui模式，有的一些都只是基本的表格模式展示，缺乏很多类似pc端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。3.但本技术发明人在实现本技术实施例中发明技术方案的过程中，发现上述技术至少存在如下技术问题：4.现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。技术实现要素：5.针对现有技术中的缺陷，本技术实施例的目的是，通过提供一种微信小程序中的类table组件渲染方法及系统，解决了现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。6.一方面，本技术实施例提供一种微信小程序中的类table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。7.另一方面，本技术还提供了一种微信小程序中的类table组件渲染系统，其中，所述系统包括：第一获得单元：所述第一获得单元用于获得第一待渲染表格信息；第二获得单元：所述第二获得单元用于根据所述第一待渲染表格信息，获得预设组件功能信息；第一区分单元：所述第一区分单元用于基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；第三获得单元：所述第三获得单元用于根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；第一渲染单元：所述第一渲染单元用于分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；第二渲染单元：所述第二渲染单元用于基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。8.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：9.获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。10.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。附图说明11.通过阅读参照以下附图对非限制性实施例所做的详细描述，本发明的其它特征、目的和优点将会变得更明显：12.图1为本技术实施例一种微信小程序中的类table组件渲染方法的流程示意图；13.图2为本技术实施例一种微信小程序中的类table组件渲染方法的对所述待渲染页面位置信息进行组合渲染的流程示意图；14.图3为本技术实施例一种微信小程序中的类table组件渲染方法的对所述第一待渲染表格信息中的可视化节点进行渲染的流程示意图；15.图4为本技术实施例一种微信小程序中的类table组件渲染方法的对所述页面节点特征集合进行中心化处理的流程示意图；16.图5为本技术实施例一种微信小程序中的类table组件渲染方法的对合并单元格进行渲染的流程示意图；17.图6为本技术实施例一种微信小程序中的类table组件渲染方法的对所述第一单元格数据集合进行隐藏处理的流程示意图；18.图7为本技术实施例一种微信小程序中的类table组件渲染系统的结构示意图；19.图8为本技术实施例示例性电子设备的结构示意图。具体实施方式20.本技术实施例通过提供一种微信小程序中的类table组件渲染方法及系统，解决了现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。21.下面，将参考附图详细的描述根据本技术的示例实施例。显然，所描述的实施例仅是本技术的一部分实施例，而不是本技术的全部实施例，应理解，本技术不受这里描述的示例实施例的限制。22.申请概述23.由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序
技术领域：
：也很少的table组件渲染ui模式，有的一些都只是基本的表格模式展示，缺乏很多类似pc端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。24.针对上述技术问题，本技术提供的技术方案总体思路如下：25.本技术实施例提供一种微信小程序中的类table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。26.为了更好地理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。27.实施例一28.如图1所示，本技术实施例提供了一种微信小程序中的类table组件渲染方法，其中，所述方法包括：29.步骤s100：获得第一待渲染表格信息；30.步骤s200：根据所述第一待渲染表格信息，获得预设组件功能信息；31.具体而言，由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序
技术领域：
：也很少的table组件渲染ui模式，有的一些都只是基本的表格模式展示，缺乏很多类似pc端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。为了实现table视图组件的多功能要求，进而满足复杂的交互展示场景，在本技术实施例中，可先获得第一待渲染表格信息，所述第一待渲染表格信息为对微信小程序中出现的table视图进行渲染的表格信息，因现有的小程序领域里原生不支持的情况下，都是各种简单模拟相关技术不能满足复杂的交互展示场景，因此所述预设组件功能信息弥补了现有功能的不足，为对现有简单功能的扩充，进一步可包括自定义渲染样式及无数据ui，加载动画、每行触发背景动画，支持多维表头，支持单元格合并，支持合计、小计展示，支持头部、尾部描述，支持行展开，支持表头、多列固定，处理多字段、大数据量、节点过多导致的性能问题，支持控制表格间距大小模式区分等功能。32.步骤s300：基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；33.步骤s400：根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；34.具体而言，已知所述第一待渲染表格信息，为了实现所述预设组件功能信息，进一步的，可基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，即根据表格的不同功能区域对表格进行划分，按照各区域细粒度的不同，进行分区渲染，所述第一表格模拟布局样式即为功能区域划分结果，具体的，可利用flex的css语法，处理单元格，表头字段等精准且动态布局，模拟出表格的形式，进而基于所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域，其中，所述第一表格表头标题功能区域即为表头标题所在的功能区域，所述第一表格主体单元格功能区域即为主体单元格所在的功能区域，所述第一表格合计数据模块功能区域即为合计数据模块所在的功能区域。需要注意的是，并非对表格的各功能区域进行统一渲染，应按照实际表格需要对各功能分区域进行选择性的配置属性控制以及组合，确保最终呈现的表格样式满足实际需要。35.步骤s500：分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；36.具体而言，为了对表格进行多功能渲染，进一步的，可分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，具体的，基于tabletitle组件，用来渲染表头标题及排序功能；基于tableheader组件，用来处理基础表多维表一层还是多层表头逻辑；基于tablebody组件，用来处理表格主体单元格的数据渲染，保证单元格宽度定制；基于tablerender组件，用来处理表格区分左右固定表格，顶部固定表头逻辑和触发滚动交互渲染逻辑；基于totaltable组件用来单独渲染合计数据模块等，所述初始模拟渲染样式可理解为对所述第一待渲染表格信息的初步模拟渲染之后的样式，进而将表格分为多部分进行多功能渲染。37.步骤s600：基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。38.具体而言，为了在所述初始模拟渲染样式对所述第一待渲染表格信息进行更为细致的渲染，进一步的，可基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，具体的，通过loading属性来自定义控制组件的加载状态；通过datasource控制表格主体内容行列数据的渲染；通过columns控制表格表头字段的定制渲染，columns内部也有许多属性用来控制表格功能定制使用的：使用title显示表头文字支持自定义渲染，用dataindex索引datasource中数据对应key，使用fixed给当前列加上左固定还是右固定，colspan控制表的单元格列合并，rowspan控制单元格行合并，使用sort给当前列表头字段添加排序，使用width控制表格列宽，使用render生成复杂数据的渲染函数，参数分别为当前行的值、当前行数据、行索引；通过pagination属性控制表格是否显示分页及相关分页切换功能；通过summary属性控制表格显示合计数据行；通过scroll控制表格在多字段，大数据量下是否可以左右触发滚动，上下固定表头滚动；通过size控制表格间距大小模式：default/middle/small；通过一些classname，border来自定义表格样式；通过一些onchange，onsortchange来响应表格交互事件等，所述预设模拟渲染样式即为在所述初始模拟渲染样式对所述第一待渲染表格信息进行更为细致的渲染之后的样式，同时，所述预设模拟渲染样式满足所述预设组件功能信息，即所述第一待渲染表格信息经过两次模拟渲染，可实现所述预设组件功能信息，进而实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景。39.优选的，如图2所示，本技术实施例还包括：40.步骤s610：根据所述第一表格模拟布局样式，获得待渲染页面位置信息；41.步骤s620：根据所述待渲染页面位置信息，匹配对应组件信息；42.步骤s630：根据所述对应组件信息，获得各组件功能属性值；43.步骤s640：将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染。44.具体而言，为了对所述待渲染页面位置信息进行组合渲染，进一步的，可根据所述第一表格模拟布局样式，获得待渲染页面位置信息，换言之，如要对表格中的表头标题所在的功能区域进行渲染，可先获得表头标题在页面显示的位置信息，进而根据所述待渲染页面位置信息，匹配对应组件信息，即将组件放在页面需要渲染的位置，同时，根据所述对应组件信息，获得各组件功能属性值，举例而言，表格中的表头标题所在的功能区域的渲染属性值基于tabletitle组件实现，进而将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染，即将表头标题所在的功能区域‑表头标题功能区域组件‑tabletitle进行纵向的对应匹配，基于此方法，进而对所述待渲染页面位置信息进行组合渲染。45.优选的，如图3所示，本技术实施例还包括：46.步骤s710：获得所述第一待渲染表格信息的表格数据特征；47.步骤s720：根据所述表格数据特征，获得第一页面节点数量信息；48.步骤s730：判断所述第一页面节点数量信息是否达到预设节点数量信息；49.步骤s740：若所述第一页面节点数量信息达到所述预设节点数量信息，获得第一渲染手段；50.步骤s750：根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染。51.具体而言，为了适应大数据量、多字段下的性能处理，进一步的，可获得所述第一待渲染表格信息的表格数据特征，所述表格数据特征可理解为表格中的数据特征，是否为大数据量或多字段，如果是，则根据所述表格数据特征，获得第一页面节点数量信息，所述第一页面节点数量信息可理解为小程序页面中显示的节点数量，由于小程序页面对节点数有要求，太多的节点数会造成页面卡顿，更长的渲染时间，因此判断所述第一页面节点数量信息是否达到预设节点数量信息，如果达到了，则说明小程序页面中显示的节点数量较多，可能造成页面卡顿，更长的渲染时间，为了避免此类情况发生，可根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染，具体的，使用了虚拟滚动列表技术，只渲染可见区域的节点，同时尽量减少节点层数嵌套及无用的节点，处理部分数据量分页渲染等手段，使得对表格组件的渲染适应大数据量、多字段下的性能处理。52.优选的，如图4所示，本技术实施例还包括：53.步骤s721：对所述第一页面节点数量信息进行遍历分析，获得页面节点特征集合；54.步骤s722：对所述页面节点特征集合进行中心化处理，获得第二特征数据集；55.步骤s723：获得所述第二特征数据集的第一协方差矩阵；56.步骤s724：对所述第一协方差矩阵进行运算，获得所述第一协方差矩阵的第一特征值和第一特征向量；57.步骤s725：将所述页面节点特征集合投影到所述第一特征向量，获得第一降维数据集，其中所述第一降维数据集为所述页面节点特征集合降维之后获得的特征数据集。58.具体而言，为了减少节点层数嵌套及无用的节点，进一步的，可对所述页面节点特征集合进行中心化处理，所述页面节点特征集合为对所述第一页面节点数量信息的节点特征进行遍历分析之后的结果。对提取到的特征数据进行数值化处理，并构建特征数据集矩阵，获得所述页面节点特征集合。继而对所述页面节点特征集合中的各特征数据进行中心化处理，首先求解所述页面节点特征集合中各特征的平均值，然后对于所有的样本，每一个特征都减去自身的均值，继而获得新的特征值，由新的特征值构成所述第二特征数据集，所述第二特征数据集为一数据矩阵。通过协方差公式：[0059][0060]对所述第二特征数据集进行运算，获得所述第二特征数据集的第一协方差矩阵。其中，为所述第二特征数据集中的特征数据；为该特征数据的平均值；m为所述第二特征数据集中的样本数据总量。继而通过矩阵运算，求出所述第一协方差矩阵的特征值及特征向量，且每一特征值对应一个特征向量。在求出的所述第一特征向量中，选取最大的前k个特征值及其对应的特征向量，并将所述页面节点特征集合中的原始特征投影到所选取的特征向量之上，得到降维之后的所述第一降维数据集。通过主成分分析法对数据库中的特征数据进行降维处理，在保证信息量的前提下，剔除冗余数据，使得数据库中特征数据的样本量减小，且降维后信息量损失最小，从而加快训练模型对于数据的运算速度，从而减少节点层数嵌套及无用的节点。[0061]优选的，如图5所示，本技术实施例还包括：[0062]步骤s810：根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息；[0063]步骤s820：对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据；[0064]步骤s830：根据所述索引目标单元格数据，对合并单元格进行渲染。[0065]进一步的，如图6所示，本技术实施例还包括：[0066]步骤s840：基于所述索引目标单元格数据，对所述第一待渲染表格信息进行筛选，获得第一单元格数据集合，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合；[0067]步骤s850：根据所述第一单元格数据集合，生成第一处理指令；[0068]步骤s860：根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框。[0069]具体而言，为了合并单元格组件进行有效渲染，进一步的，可根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息，所述坐标信息即为需要进行合并的单元格的所在行值、所在列值，所述数量信息即为需要进行合并的单元格的数量，进而对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据，可理解为，基于巧妙的隐藏加单项显示的模式渲染，行合并或列合并，知道了合并数量及开始索引，进而根据所述索引目标单元格数据，对合并单元格进行渲染，即隐藏不渲染涉及到的所有单元格，只显示中间值索引的单元格数据。[0070]进一步的，还可对所述第一单元格数据集合进行隐藏处理，使得造成一种单元格合并的假象，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合，通过根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框，实现了隐藏加单项显示的模式渲染，营造一种单元格合并的假象，进而实现了对合并单元格组件进行有效渲染。[0071]与现有技术相比，本发明具有如下的有益效果：[0072]1、获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。[0073]实施例二[0074]基于与前述实施例中一种微信小程序中的类table组件渲染方法同样发明构思，本发明还提供了一种微信小程序中的类table组件渲染系统，如图7所示，所述系统包括：[0075]第一获得单元11：所述第一获得单元11用于获得第一待渲染表格信息；[0076]第二获得单元12：所述第二获得单元12用于根据所述第一待渲染表格信息，获得预设组件功能信息；[0077]第一区分单元13：所述第一区分单元13用于基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；[0078]第三获得单元14：所述第三获得单元14用于根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；[0079]第一渲染单元15：所述第一渲染单元15用于分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；[0080]第二渲染单元16：所述第二渲染单元16用于基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。[0081]进一步的，所述系统还包括：[0082]第四获得单元：所述第四获得单元用于根据所述第一表格模拟布局样式，获得待渲染页面位置信息；[0083]第一匹配单元：所述第一匹配单元用于根据所述待渲染页面位置信息，匹配对应组件信息；[0084]第五获得单元：所述第五获得单元用于根据所述对应组件信息，获得各组件功能属性值；[0085]第一上传单元：所述第一上传单元用于将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染。[0086]进一步的，所述系统还包括：[0087]第六获得单元：所述第六获得单元用于获得所述第一待渲染表格信息的表格数据特征；[0088]第七获得单元：所述第七获得单元用于根据所述表格数据特征，获得第一页面节点数量信息；[0089]第一判断单元：所述第一判断单元用于判断所述第一页面节点数量信息是否达到预设节点数量信息；[0090]第八获得单元：所述第八获得单元用于若所述第一页面节点数量信息达到所述预设节点数量信息，获得第一渲染手段；[0091]第三渲染单元：所述第三渲染单元用于根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染。[0092]进一步的，所述系统还包括：[0093]第一分析单元：所述第一分析单元用于对所述第一页面节点数量信息进行遍历分析，获得页面节点特征集合；[0094]第一处理单元：所述第一处理单元用于对所述页面节点特征集合进行中心化处理，获得第二特征数据集；[0095]第九获得单元：所述第九获得单元用于获得所述第二特征数据集的第一协方差矩阵；[0096]第一运算单元：所述第一运算单元用于对所述第一协方差矩阵进行运算，获得所述第一协方差矩阵的第一特征值和第一特征向量；[0097]第一投影单元：所述第一投影单元用于将所述页面节点特征集合投影到所述第一特征向量，获得第一降维数据集，其中所述第一降维数据集为所述页面节点特征集合降维之后获得的特征数据集。[0098]进一步的，所述系统还包括：[0099]第十获得单元：所述第十获得单元用于根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息；[0100]第一索引单元：所述第一索引单元用于对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据；[0101]第四渲染单元：所述第四渲染单元用于根据所述索引目标单元格数据，对合并单元格进行渲染。[0102]进一步的，所述系统还包括：[0103]第一筛选单元：所述第一筛选单元用于基于所述索引目标单元格数据，对所述第一待渲染表格信息进行筛选，获得第一单元格数据集合，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合；[0104]第一生成单元：所述第一生成单元用于根据所述第一单元格数据集合，生成第一处理指令；[0105]第二处理单元：所述第二处理单元用于根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框。[0106]前述图1实施例一中的一种微信小程序中的类table组件渲染方法的各种变化方式和具体实例同样适用于本实施例的一种微信小程序中的类table组件渲染系统，通过前述对一种微信小程序中的类table组件渲染方法的详细描述，本领域技术人员可以清楚的知道本实施例中一种微信小程序中的类table组件渲染系统的实施方法，所以为了说明书的简洁，在此不再详述。[0107]实施例三[0108]下面参考图8来描述本技术实施例的电子设备。[0109]图8图示了根据本技术实施例的电子设备的结构示意图。[0110]基于与前述实例施中一种微信小程序中的类table组件渲染方法的发明构思，本发明还提供一种微信小程序中的类table组件渲染系统，其上存储有计算机程序，该程序被处理器执行时实现前文所述一种微信小程序中的类table组件渲染系统的任一方法的步骤。[0111]其中，在图8中，总线架构(用总线300来代表)，总线300可以包括任意数量的互联的总线和桥，总线300将包括由处理器302代表的一个或多个处理器和存储器304代表的存储器的各种电路链接在一起。总线300还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口305在总线300和接收器301和发送器303之间提供接口。接收器301和发送器303可以是同一个元件，即收发机，提供用于在传输介质上与各种其他系统通信的单元。处理器302负责管理总线300和通常的处理，而存储器304可以被用于存储处理器302在执行操作时所使用的数据。[0112]本技术实施例提供一种微信小程序中的类table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。[0113]本领域内的技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd‑rom、光学存储器等)上实施的计算机程序产品的形式。[0114]本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的系统。[0115]这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令系统的制造品，该指令系统实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。[0116]这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。[0117]尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。[0118]显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。当前第1页12当前第1页12
技术领域：
：1.本发明涉及组件渲染
技术领域：
：，具体地，涉及一种微信小程序中的类table组件渲染方法及系统。
背景技术：
：：2.由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序
技术领域：
：也很少的table组件渲染ui模式，有的一些都只是基本的表格模式展示，缺乏很多类似pc端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。3.但本技术发明人在实现本技术实施例中发明技术方案的过程中，发现上述技术至少存在如下技术问题：4.现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。技术实现要素：5.针对现有技术中的缺陷，本技术实施例的目的是，通过提供一种微信小程序中的类table组件渲染方法及系统，解决了现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。6.一方面，本技术实施例提供一种微信小程序中的类table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。7.另一方面，本技术还提供了一种微信小程序中的类table组件渲染系统，其中，所述系统包括：第一获得单元：所述第一获得单元用于获得第一待渲染表格信息；第二获得单元：所述第二获得单元用于根据所述第一待渲染表格信息，获得预设组件功能信息；第一区分单元：所述第一区分单元用于基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；第三获得单元：所述第三获得单元用于根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；第一渲染单元：所述第一渲染单元用于分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；第二渲染单元：所述第二渲染单元用于基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。8.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：9.获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。10.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。附图说明11.通过阅读参照以下附图对非限制性实施例所做的详细描述，本发明的其它特征、目的和优点将会变得更明显：12.图1为本技术实施例一种微信小程序中的类table组件渲染方法的流程示意图；13.图2为本技术实施例一种微信小程序中的类table组件渲染方法的对所述待渲染页面位置信息进行组合渲染的流程示意图；14.图3为本技术实施例一种微信小程序中的类table组件渲染方法的对所述第一待渲染表格信息中的可视化节点进行渲染的流程示意图；15.图4为本技术实施例一种微信小程序中的类table组件渲染方法的对所述页面节点特征集合进行中心化处理的流程示意图；16.图5为本技术实施例一种微信小程序中的类table组件渲染方法的对合并单元格进行渲染的流程示意图；17.图6为本技术实施例一种微信小程序中的类table组件渲染方法的对所述第一单元格数据集合进行隐藏处理的流程示意图；18.图7为本技术实施例一种微信小程序中的类table组件渲染系统的结构示意图；19.图8为本技术实施例示例性电子设备的结构示意图。具体实施方式20.本技术实施例通过提供一种微信小程序中的类table组件渲染方法及系统，解决了现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。21.下面，将参考附图详细的描述根据本技术的示例实施例。显然，所描述的实施例仅是本技术的一部分实施例，而不是本技术的全部实施例，应理解，本技术不受这里描述的示例实施例的限制。22.申请概述23.由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序
技术领域：
：也很少的table组件渲染ui模式，有的一些都只是基本的表格模式展示，缺乏很多类似pc端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。现有技术中存在的小程序端多功能表格组件仅支持基础表展示等基础功能，不能满足复杂的交互展示场景的技术问题。24.针对上述技术问题，本技术提供的技术方案总体思路如下：25.本技术实施例提供一种微信小程序中的类table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。26.为了更好地理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。27.实施例一28.如图1所示，本技术实施例提供了一种微信小程序中的类table组件渲染方法，其中，所述方法包括：29.步骤s100：获得第一待渲染表格信息；30.步骤s200：根据所述第一待渲染表格信息，获得预设组件功能信息；31.具体而言，由于微信小程序原生并不支持table视图组件，微信小程序由于受限移动手机端屏幕交互设计，一般也不展示table表格。微信小程序
技术领域：
：也很少的table组件渲染ui模式，有的一些都只是基本的表格模式展示，缺乏很多类似pc端下的特定场景的功能支持：左右固定，顶部固定，单元格合并,多维表等。为了实现table视图组件的多功能要求，进而满足复杂的交互展示场景，在本技术实施例中，可先获得第一待渲染表格信息，所述第一待渲染表格信息为对微信小程序中出现的table视图进行渲染的表格信息，因现有的小程序领域里原生不支持的情况下，都是各种简单模拟相关技术不能满足复杂的交互展示场景，因此所述预设组件功能信息弥补了现有功能的不足，为对现有简单功能的扩充，进一步可包括自定义渲染样式及无数据ui，加载动画、每行触发背景动画，支持多维表头，支持单元格合并，支持合计、小计展示，支持头部、尾部描述，支持行展开，支持表头、多列固定，处理多字段、大数据量、节点过多导致的性能问题，支持控制表格间距大小模式区分等功能。32.步骤s300：基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；33.步骤s400：根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；34.具体而言，已知所述第一待渲染表格信息，为了实现所述预设组件功能信息，进一步的，可基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，即根据表格的不同功能区域对表格进行划分，按照各区域细粒度的不同，进行分区渲染，所述第一表格模拟布局样式即为功能区域划分结果，具体的，可利用flex的css语法，处理单元格，表头字段等精准且动态布局，模拟出表格的形式，进而基于所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域，其中，所述第一表格表头标题功能区域即为表头标题所在的功能区域，所述第一表格主体单元格功能区域即为主体单元格所在的功能区域，所述第一表格合计数据模块功能区域即为合计数据模块所在的功能区域。需要注意的是，并非对表格的各功能区域进行统一渲染，应按照实际表格需要对各功能分区域进行选择性的配置属性控制以及组合，确保最终呈现的表格样式满足实际需要。35.步骤s500：分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；36.具体而言，为了对表格进行多功能渲染，进一步的，可分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，具体的，基于tabletitle组件，用来渲染表头标题及排序功能；基于tableheader组件，用来处理基础表多维表一层还是多层表头逻辑；基于tablebody组件，用来处理表格主体单元格的数据渲染，保证单元格宽度定制；基于tablerender组件，用来处理表格区分左右固定表格，顶部固定表头逻辑和触发滚动交互渲染逻辑；基于totaltable组件用来单独渲染合计数据模块等，所述初始模拟渲染样式可理解为对所述第一待渲染表格信息的初步模拟渲染之后的样式，进而将表格分为多部分进行多功能渲染。37.步骤s600：基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。38.具体而言，为了在所述初始模拟渲染样式对所述第一待渲染表格信息进行更为细致的渲染，进一步的，可基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，具体的，通过loading属性来自定义控制组件的加载状态；通过datasource控制表格主体内容行列数据的渲染；通过columns控制表格表头字段的定制渲染，columns内部也有许多属性用来控制表格功能定制使用的：使用title显示表头文字支持自定义渲染，用dataindex索引datasource中数据对应key，使用fixed给当前列加上左固定还是右固定，colspan控制表的单元格列合并，rowspan控制单元格行合并，使用sort给当前列表头字段添加排序，使用width控制表格列宽，使用render生成复杂数据的渲染函数，参数分别为当前行的值、当前行数据、行索引；通过pagination属性控制表格是否显示分页及相关分页切换功能；通过summary属性控制表格显示合计数据行；通过scroll控制表格在多字段，大数据量下是否可以左右触发滚动，上下固定表头滚动；通过size控制表格间距大小模式：default/middle/small；通过一些classname，border来自定义表格样式；通过一些onchange，onsortchange来响应表格交互事件等，所述预设模拟渲染样式即为在所述初始模拟渲染样式对所述第一待渲染表格信息进行更为细致的渲染之后的样式，同时，所述预设模拟渲染样式满足所述预设组件功能信息，即所述第一待渲染表格信息经过两次模拟渲染，可实现所述预设组件功能信息，进而实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景。39.优选的，如图2所示，本技术实施例还包括：40.步骤s610：根据所述第一表格模拟布局样式，获得待渲染页面位置信息；41.步骤s620：根据所述待渲染页面位置信息，匹配对应组件信息；42.步骤s630：根据所述对应组件信息，获得各组件功能属性值；43.步骤s640：将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染。44.具体而言，为了对所述待渲染页面位置信息进行组合渲染，进一步的，可根据所述第一表格模拟布局样式，获得待渲染页面位置信息，换言之，如要对表格中的表头标题所在的功能区域进行渲染，可先获得表头标题在页面显示的位置信息，进而根据所述待渲染页面位置信息，匹配对应组件信息，即将组件放在页面需要渲染的位置，同时，根据所述对应组件信息，获得各组件功能属性值，举例而言，表格中的表头标题所在的功能区域的渲染属性值基于tabletitle组件实现，进而将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染，即将表头标题所在的功能区域‑表头标题功能区域组件‑tabletitle进行纵向的对应匹配，基于此方法，进而对所述待渲染页面位置信息进行组合渲染。45.优选的，如图3所示，本技术实施例还包括：46.步骤s710：获得所述第一待渲染表格信息的表格数据特征；47.步骤s720：根据所述表格数据特征，获得第一页面节点数量信息；48.步骤s730：判断所述第一页面节点数量信息是否达到预设节点数量信息；49.步骤s740：若所述第一页面节点数量信息达到所述预设节点数量信息，获得第一渲染手段；50.步骤s750：根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染。51.具体而言，为了适应大数据量、多字段下的性能处理，进一步的，可获得所述第一待渲染表格信息的表格数据特征，所述表格数据特征可理解为表格中的数据特征，是否为大数据量或多字段，如果是，则根据所述表格数据特征，获得第一页面节点数量信息，所述第一页面节点数量信息可理解为小程序页面中显示的节点数量，由于小程序页面对节点数有要求，太多的节点数会造成页面卡顿，更长的渲染时间，因此判断所述第一页面节点数量信息是否达到预设节点数量信息，如果达到了，则说明小程序页面中显示的节点数量较多，可能造成页面卡顿，更长的渲染时间，为了避免此类情况发生，可根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染，具体的，使用了虚拟滚动列表技术，只渲染可见区域的节点，同时尽量减少节点层数嵌套及无用的节点，处理部分数据量分页渲染等手段，使得对表格组件的渲染适应大数据量、多字段下的性能处理。52.优选的，如图4所示，本技术实施例还包括：53.步骤s721：对所述第一页面节点数量信息进行遍历分析，获得页面节点特征集合；54.步骤s722：对所述页面节点特征集合进行中心化处理，获得第二特征数据集；55.步骤s723：获得所述第二特征数据集的第一协方差矩阵；56.步骤s724：对所述第一协方差矩阵进行运算，获得所述第一协方差矩阵的第一特征值和第一特征向量；57.步骤s725：将所述页面节点特征集合投影到所述第一特征向量，获得第一降维数据集，其中所述第一降维数据集为所述页面节点特征集合降维之后获得的特征数据集。58.具体而言，为了减少节点层数嵌套及无用的节点，进一步的，可对所述页面节点特征集合进行中心化处理，所述页面节点特征集合为对所述第一页面节点数量信息的节点特征进行遍历分析之后的结果。对提取到的特征数据进行数值化处理，并构建特征数据集矩阵，获得所述页面节点特征集合。继而对所述页面节点特征集合中的各特征数据进行中心化处理，首先求解所述页面节点特征集合中各特征的平均值，然后对于所有的样本，每一个特征都减去自身的均值，继而获得新的特征值，由新的特征值构成所述第二特征数据集，所述第二特征数据集为一数据矩阵。通过协方差公式：[0059][0060]对所述第二特征数据集进行运算，获得所述第二特征数据集的第一协方差矩阵。其中，为所述第二特征数据集中的特征数据；为该特征数据的平均值；m为所述第二特征数据集中的样本数据总量。继而通过矩阵运算，求出所述第一协方差矩阵的特征值及特征向量，且每一特征值对应一个特征向量。在求出的所述第一特征向量中，选取最大的前k个特征值及其对应的特征向量，并将所述页面节点特征集合中的原始特征投影到所选取的特征向量之上，得到降维之后的所述第一降维数据集。通过主成分分析法对数据库中的特征数据进行降维处理，在保证信息量的前提下，剔除冗余数据，使得数据库中特征数据的样本量减小，且降维后信息量损失最小，从而加快训练模型对于数据的运算速度，从而减少节点层数嵌套及无用的节点。[0061]优选的，如图5所示，本技术实施例还包括：[0062]步骤s810：根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息；[0063]步骤s820：对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据；[0064]步骤s830：根据所述索引目标单元格数据，对合并单元格进行渲染。[0065]进一步的，如图6所示，本技术实施例还包括：[0066]步骤s840：基于所述索引目标单元格数据，对所述第一待渲染表格信息进行筛选，获得第一单元格数据集合，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合；[0067]步骤s850：根据所述第一单元格数据集合，生成第一处理指令；[0068]步骤s860：根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框。[0069]具体而言，为了合并单元格组件进行有效渲染，进一步的，可根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息，所述坐标信息即为需要进行合并的单元格的所在行值、所在列值，所述数量信息即为需要进行合并的单元格的数量，进而对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据，可理解为，基于巧妙的隐藏加单项显示的模式渲染，行合并或列合并，知道了合并数量及开始索引，进而根据所述索引目标单元格数据，对合并单元格进行渲染，即隐藏不渲染涉及到的所有单元格，只显示中间值索引的单元格数据。[0070]进一步的，还可对所述第一单元格数据集合进行隐藏处理，使得造成一种单元格合并的假象，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合，通过根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框，实现了隐藏加单项显示的模式渲染，营造一种单元格合并的假象，进而实现了对合并单元格组件进行有效渲染。[0071]与现有技术相比，本发明具有如下的有益效果：[0072]1、获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。通过采用taro框架，react语法开发的组件，使用组件配置化方案方便对表格不同区域功能进行细粒度的区分，进行单独处理，最后进行组合渲染，低耦合高内聚的模式更易维护及功能的开发，达到了以表格的ui渲染方式展示数据，实现小程序端多功能表格组件的更多自定义功能，进而满足复杂的交互展示场景的技术效果。[0073]实施例二[0074]基于与前述实施例中一种微信小程序中的类table组件渲染方法同样发明构思，本发明还提供了一种微信小程序中的类table组件渲染系统，如图7所示，所述系统包括：[0075]第一获得单元11：所述第一获得单元11用于获得第一待渲染表格信息；[0076]第二获得单元12：所述第二获得单元12用于根据所述第一待渲染表格信息，获得预设组件功能信息；[0077]第一区分单元13：所述第一区分单元13用于基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；[0078]第三获得单元14：所述第三获得单元14用于根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；[0079]第一渲染单元15：所述第一渲染单元15用于分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；[0080]第二渲染单元16：所述第二渲染单元16用于基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。[0081]进一步的，所述系统还包括：[0082]第四获得单元：所述第四获得单元用于根据所述第一表格模拟布局样式，获得待渲染页面位置信息；[0083]第一匹配单元：所述第一匹配单元用于根据所述待渲染页面位置信息，匹配对应组件信息；[0084]第五获得单元：所述第五获得单元用于根据所述对应组件信息，获得各组件功能属性值；[0085]第一上传单元：所述第一上传单元用于将所述各组件功能属性值上传至所述对应组件信息，对所述待渲染页面位置信息进行组合渲染。[0086]进一步的，所述系统还包括：[0087]第六获得单元：所述第六获得单元用于获得所述第一待渲染表格信息的表格数据特征；[0088]第七获得单元：所述第七获得单元用于根据所述表格数据特征，获得第一页面节点数量信息；[0089]第一判断单元：所述第一判断单元用于判断所述第一页面节点数量信息是否达到预设节点数量信息；[0090]第八获得单元：所述第八获得单元用于若所述第一页面节点数量信息达到所述预设节点数量信息，获得第一渲染手段；[0091]第三渲染单元：所述第三渲染单元用于根据所述第一渲染手段，基于虚拟滚动列表技术，对所述第一待渲染表格信息中的可视化节点进行渲染。[0092]进一步的，所述系统还包括：[0093]第一分析单元：所述第一分析单元用于对所述第一页面节点数量信息进行遍历分析，获得页面节点特征集合；[0094]第一处理单元：所述第一处理单元用于对所述页面节点特征集合进行中心化处理，获得第二特征数据集；[0095]第九获得单元：所述第九获得单元用于获得所述第二特征数据集的第一协方差矩阵；[0096]第一运算单元：所述第一运算单元用于对所述第一协方差矩阵进行运算，获得所述第一协方差矩阵的第一特征值和第一特征向量；[0097]第一投影单元：所述第一投影单元用于将所述页面节点特征集合投影到所述第一特征向量，获得第一降维数据集，其中所述第一降维数据集为所述页面节点特征集合降维之后获得的特征数据集。[0098]进一步的，所述系统还包括：[0099]第十获得单元：所述第十获得单元用于根据所述第一待渲染表格信息，获得待合并单元格的坐标信息和数量信息；[0100]第一索引单元：所述第一索引单元用于对所述待合并单元格的坐标信息和数量信息进行索引，获得索引目标单元格数据；[0101]第四渲染单元：所述第四渲染单元用于根据所述索引目标单元格数据，对合并单元格进行渲染。[0102]进一步的，所述系统还包括：[0103]第一筛选单元：所述第一筛选单元用于基于所述索引目标单元格数据，对所述第一待渲染表格信息进行筛选，获得第一单元格数据集合，其中，所述第一单元格数据集合为不进行渲染的所有单元格的数据集合；[0104]第一生成单元：所述第一生成单元用于根据所述第一单元格数据集合，生成第一处理指令；[0105]第二处理单元：所述第二处理单元用于根据所述第一处理指令，对所述第一单元格数据集合进行隐藏处理，且取消所述第一待渲染表格信息的单元格边框。[0106]前述图1实施例一中的一种微信小程序中的类table组件渲染方法的各种变化方式和具体实例同样适用于本实施例的一种微信小程序中的类table组件渲染系统，通过前述对一种微信小程序中的类table组件渲染方法的详细描述，本领域技术人员可以清楚的知道本实施例中一种微信小程序中的类table组件渲染系统的实施方法，所以为了说明书的简洁，在此不再详述。[0107]实施例三[0108]下面参考图8来描述本技术实施例的电子设备。[0109]图8图示了根据本技术实施例的电子设备的结构示意图。[0110]基于与前述实例施中一种微信小程序中的类table组件渲染方法的发明构思，本发明还提供一种微信小程序中的类table组件渲染系统，其上存储有计算机程序，该程序被处理器执行时实现前文所述一种微信小程序中的类table组件渲染系统的任一方法的步骤。[0111]其中，在图8中，总线架构(用总线300来代表)，总线300可以包括任意数量的互联的总线和桥，总线300将包括由处理器302代表的一个或多个处理器和存储器304代表的存储器的各种电路链接在一起。总线300还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口305在总线300和接收器301和发送器303之间提供接口。接收器301和发送器303可以是同一个元件，即收发机，提供用于在传输介质上与各种其他系统通信的单元。处理器302负责管理总线300和通常的处理，而存储器304可以被用于存储处理器302在执行操作时所使用的数据。[0112]本技术实施例提供一种微信小程序中的类table组件渲染方法，其中，所述方法包括：获得第一待渲染表格信息；根据所述第一待渲染表格信息，获得预设组件功能信息；基于不同区域功能，对所述第一待渲染表格信息进行细粒度的区分，生成第一表格模拟布局样式；根据所述第一表格模拟布局样式，获得第一表格表头标题功能区域、第一表格主体单元格功能区域以及第一表格合计数据模块功能区域；分别对所述第一表格表头标题功能区域、所述第一表格主体单元格功能区域以及所述第一表格合计数据模块功能区域进行控制渲染，生成所述第一待渲染表格信息的初始模拟渲染样式；基于定制属性，对所述初始模拟渲染样式的配置组件进行组合渲染，生成所述第一待渲染表格信息的预设模拟渲染样式，其中，所述预设模拟渲染样式满足所述预设组件功能信息。[0113]本领域内的技术人员应明白，本发明的实施例可提供为方法、系统或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd‑rom、光学存储器等)上实施的计算机程序产品的形式。[0114]本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的系统。[0115]这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令系统的制造品，该指令系统实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。[0116]这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。[0117]尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。[0118]显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
