界面渲染方法、装置、存储介质及电子设备.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN112817595A(43)申请公布日2021.05.18(21)申请号202110194104.0(22)申请日2021.02.20(71)申请人OPPO广东移动通信有限公司地址523860广东省东莞市长安镇乌沙海滨路18号(72)发明人赵艺茗冯涛(74)专利代理机构深圳翼盛智成知识产权事务所(普通合伙)44300代理人李汉亮(51)Int.Cl.G06F8/38(2018.01)G06F9/451(2018.01)G06F40/154(2020.01)G06F40/106(2020.01)权利要求书2页说明书10页附图3页(54)发明名称界面渲染方法、装置、存储介质及电子设备(57)摘要本申请公开了一种界面渲染方法、装置、存储介质及电子设备，首先获取待渲染的虚拟文档对象模型树，然后将虚拟文档对象模型树转换为Flutter的渲染树，并根据渲染树创建对应预设布局库的布局视图树，以及通过预设布局库获取对应布局视图树的布局参数，最后根据该布局参数，通过Flutter对渲染树进行绘制，得到虚拟文档对象模型树的对应界面。以此，本申请通过引入第三方的布局库，使得Flutter能够完成虚拟文档对象模型树的渲染，增加了Flutter的渲染能力，使得其使用范围得以扩大，从而支持JS应用生态。CN112817595ACN112817595A权利要求书1/2页1.一种界面渲染方法，其特征在于，包括：获取待渲染的虚拟文档对象模型树；将所述虚拟文档对象模型树转换为Flutter的渲染树；根据所述渲染树创建对应预设布局库的布局视图树，并通过所述预设布局库获取对应所述布局视图树的布局参数；根据所述布局参数，通过Flutter对所述渲染树进行绘制，得到所述虚拟文档对象模型树的对应界面。2.如权利要求1所述的界面渲染方法，其特征在于，将所述虚拟文档对象模型树转换为Flutter的渲染树，包括：获取所述虚拟文档对象模型树中的每一JS对象对应的Flutter组件；将每一Flutter组件封装为对应所述预设布局库的渲染对象，得到多个渲染对象；根据所述多个渲染对象创建对应所述虚拟文档对象模型树的渲染树。3.如权利要求2所述的界面渲染方法，其特征在于，根据所述渲染树创建对应预设布局库的布局视图树，包括：根据所述多个渲染对象创建对应所述预设布局库的所述布局视图树。4.如权利要求3所述的界面渲染方法，其特征在于，通过所述预设布局库获取对应所述布局视图树的布局参数，包括：通过所述预设布局库获取所述布局视图树中的每一渲染对象的布局参数；根据所述布局参数，通过Flutter对所述渲染树进行绘制，生成所述虚拟文档对象模型树的对应界面，包括：根据每一渲染对象的布局参数，通过Flutter对每一渲染对象封装的Flutter组件进行绘制，由绘制得到的多个Flutter组件构成所述虚拟文档对象模型树的对应界面。5.如权利要求1‑4任一项所述的界面渲染方法，其特征在于，所述JS对象包括JS组件和CSS样式。6.如权利要求1‑4任一项所述的界面渲染方法，其特征在于，所述预设布局库包括Yoga布局库。7.如权利要求1‑4任一项所述的界面渲染方法，其特征在于，还包括：对所述预设布局库进行编程规范的转换，使得所述预设布局库符合Flutter的编程规范。8.一种界面渲染装置，其特征在于，包括：获取模块，用于获取待渲染的虚拟文档对象模型树；转换模块，用于将所述虚拟文档对象模型树转换为Flutter的渲染树；布局模块，用于根据所述渲染树创建对应预设布局库的布局视图树，并通过所述预设布局库获取对应所述布局视图树的布局参数；绘制模块，用于根据所述布局参数，通过Flutter对所述渲染树进行绘制，得到所述虚拟文档对象模型树的对应界面。9.一种存储介质，其上存储有计算机程序，其特征在于，当所述计算机程序被电子设备加载时执行如权利要求1‑7任一项所述的界面渲染方法。10.一种电子设备，包括处理器和存储器，所述存储器存储有计算机程序，其特征在于，2CN112817595A权利要求书2/2页所述处理器通过加载所述计算机程序执行如权利要求1‑7任一项所述的界面渲染方法。3CN112817595A说明书1/10页界面渲染方法、装置、存储介质及电子设备技术领域[0001]本申请涉及计算机技术领域，具体涉及一种界面渲染方法、装置、存储介质及电子设备。背景技术[0002]Flutter是谷歌开源的跨平台UI框架，其具有自己的渲染引擎，当采用符合Flutter编程规范的代码完成界面的编写后，可利用其自带的渲染引擎进行渲染。Flutter自带渲染引擎的特点使其具备跨平台的能力，只要写一份代码，就可以构建出安卓应用、IOS应用以及网页应用，并达到和原生应用