(19)国家知识产权局 (12)发明 专利 (10)授权公告 号 (45)授权公告日 (21)申请 号 202210346251.X (22)申请日 2022.03.31 (65)同一申请的已公布的文献号 申请公布号 CN 114637499 A (43)申请公布日 2022.06.17 (73)专利权人 阿里巴巴 （中国） 有限公司 地址 311121 浙江省杭州市余杭区五常街 道文一西路969号3幢5层5 54室 (72)发明人 别志华　祁强　张敬成　 (74)专利代理 机构 北京同钧律师事务所 16 037 专利代理师 杜叶蕊　许怀远 (51)Int.Cl. G06F 8/34(2018.01) G06F 8/38(2018.01) G06F 9/445(2018.01)(56)对比文件 CN 111475237 A,2020.07.31 CN 111475237 A,2020.07.31 CN 111309424 A,2020.0 6.19 CN 110955428 A,2020.04.0 3 US 2016274867 A1,2016.09.2 2 审查员 余益明 (54)发明名称 可视化组件处 理方法、 装置、 设备及 介质 (57)摘要 本申请提供一种可视化组件处理方法、 装 置、 设备及介质， 该可视化组件处理方法包括： 在 终端上， 确定页面上可视化组件的模板文件， 模 板文件包括第一文件和第二文件， 第一文件中包 含可视化组件中视图元素的元素类型和视图元 素之间的层级关系， 第二文件中包含视图元素的 布局信息和样式信息； 根据模板文件和类型对应 关系， 确定视图元素的目标布局， 类型对应关系 包括视图元素的元素类型与终端的原生视图元 素类型的对应关系； 基于视图元素的目标信息， 在页面上显示可视化组件。 从而， 通过可视化组 件适应于多端的模板文件， 实现了可视化组件的 多端灵活适用， 提高了开发效率， 降低了开发成 本。 权利要求书2页 说明书17页 附图6页 CN 114637499 B 2022.11.29 CN 114637499 B 1.一种可视化组件处 理方法， 其特 征在于， 包括： 在终端上， 确定页面上可视化组件的模板文件， 所述模板文件包括第一文件和第二文 件， 所述第一文件中包含所述可视化组件中视图元素的元素类型和不同的视图元素之 间的 层级关系， 所述第二文件中包 含所述视图元 素的布局信息和所述视图元 素的样式信息； 根据所述模板文件和类型对应关系， 确定所述视 图元素的目标信息， 所述类型对应关 系包括所述视图元素的元素类型与所述 终端的原 生视图元素类型的对应关系， 所述目标信 息包括所述视图元素 的层级关系、 所述视图元素 的目标布局信息、 所述视图元素 的目标样 式信息以及所述视图元 素对应的原生视图元 素类型； 基于所述视图元 素的目标信息， 在所述页面上显示所述可视化组件； 其中， 所述 根据所述模板文件和类型对应关系， 确定所述视图元 素的目标信息， 包括： 根据所述第一文件中所述视图元素的层级关系和所述第二文件中所述视图元素的布 局信息， 构建虚拟节点 树， 所述虚拟节点 树的节点 为所述视图元 素； 对所述虚拟节点树进行绝对布局 处理， 得到更新后的虚拟节点树， 所述更新后的虚拟 节点树中的节点携带有所述视图元 素的目标布局信息； 根据所述类型对应关系和所述更新后的虚拟节点树， 创建视图树并确定所述视图树中 节点的原生视图元 素类型， 所述视图树中的节点 为所述视图元 素； 根据所述视 图树和所述第二文件中所述视 图元素的样式信息， 更新所述视 图树， 更新 的视图树携带有所述视图元 素的目标信息； 所述根据所述第一文件中所述视图元素的层级关系和所述第二文件中所述视图元素 的布局信息， 构建虚拟节点树之前， 还包括： 根据所述第二文件， 在所述视图元素中确定不 具备样式信息的目标视图元 素； 对所述目标视图元 素进行移除。 2.根据权利要求1所述的可视化组件处理方法， 其特征在于， 所述根据 所述视图树和所 述第二文件中所述视图元 素的样式信息， 更新所述视图树， 包括： 根据所述视图元 素的样式信息， 为所述视图树中相应的节点绑定样式信息 。 3.根据权利要求2所述的可视化组件处理方法， 其特征在于， 所述模板文件还包括第 三 文件， 所述第三文件中包含所述视图元素 的数据绑定逻辑， 所述根据所述视图元素 的样式 信息， 为所述视图树中相应的节点绑定样式信息之后， 还 包括： 根据所述视图元 素的数据绑定 逻辑， 确定用于渲染所述视图元 素的资源数据； 根据所述视图元 素的资源数据， 为所述视图树中相应的节点绑定资源数据。 4.根据权利要求1 ‑3中任一项所述的可视化组件处理方法， 其特征在于， 所述基于所述 视图元素的目标信息， 在所述页面上显示对所述可视化组件， 包括： 根据所述视图元 素的目标信息， 将所述视图元 素绘制在同一张图像上； 在所述页面上， 对所述图像进行显示。 5.根据权利要求1 ‑3中任一项所述的可视化组件处理方法， 其特征在于， 所述在终端 上， 确定页面上 可视化组件的模板文件， 包括： 所述终端响应于显示所述页面的请求， 在本地已下载的远程模板文件中和/或在本地 资源目录下， 获取 所述可视化组件的模板文件。 6.一种可视化组件处 理装置， 其特 征在于， 包括： 确定单元， 用于在终端上， 确定页面上可视化组件的模板文件， 所述模板文件包括第一权　利　要　求　书 1/2 页 2 CN 114637499 B 2文件和第二文件， 所述第一文件中包含所述可视化组件中视图元素的元素类型和不同的视 图元素之 间的层级关系， 所述第二文件中包含所述视图元素的布局信息和所述视图元素的 样式信息； 处理单元， 用于根据 所述模板文件和类型对应关系， 确定所述视图元素的目标信 息， 所 述类型对应关系包括所述视图元素的元素类型与所述终端的原生视图元素类型的对应关 系， 所述目标信息包括所述视图元素的层级关系、 所述视图元素的目标布局信息、 所述视图 元素的目标样式信息以及所述视图元 素对应的原生视图元 素类型； 显示单元， 用于基于所述视图元 素的目标信息， 在所述页面上显示所述可视化组件； 其中， 所述处 理单元具体用于： 根据所述第一文件中所述视图元素的层级关系和所述第二文件中所述视图元素的布 局信息， 构建虚拟节点 树， 所述虚拟节点 树的节点 为所述视图元 素； 对所述虚拟节点树进行绝对布局 处理， 得到更新后的虚拟节点树， 所述更新后的虚拟 节点树中的节点携带有所述视图元 素的目标布局信息； 根据所述类型对应关系和所述更新后的虚拟节点树， 创建视图树并确定所述视图树中 节点的原生视图元 素类型， 所述视图树中的节点 为所述视图元 素； 根据所述视 图树和所述第二文件中所述视 图元素的样式信息， 更新所述视 图树， 更新 的视图树携带有所述视图元 素的目标信息； 在根据所述第一文件中所述视图元素的层级关系和所述第二文件中所述视图元素的 布局信息， 构建虚拟节点树之前， 所述处理单元还用于： 在根据所述第二文件， 在所述视图 元素中确定不具 备样式信息的目标视图元 素； 对所述目标视图元 素进行移除。 7.一种电子设备， 其特 征在于， 包括： 至少一个处 理器； 以及 与所述至少一个处 理器通信连接的存 储器； 其中， 所述存储器存储有可被所述至少一个处理器执行的指令， 所述指令被所述至少一个处 理器执行， 以使所述电子设备能够执行权利要求1至5中任一项所述的可视化组件处理方 法。 8.一种计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 所述计算机程序被 处理器执行时实现权利要求1至 5中任一项所述的可视化组件处 理方法。权　利　要　求　书 2/2 页 3 CN 114637499 B 3