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

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN111324835A(43)申请公布日2020.06.23(21)申请号202010081399.6(22)申请日2020.02.06(71)申请人北京字节跳动网络技术有限公司地址100041北京市石景山区实兴大街30号院3号楼2层B-0035房间(72)发明人倪连柱(74)专利代理机构北京远智汇知识产权代理有限公司11659代理人范坤坤(51)Int.Cl.G06F16/957(2019.01)G06F8/38(2018.01)权利要求书2页说明书9页附图3页(54)发明名称渲染用户界面组件的方法、装置、电子设备、及存储介质(57)摘要本公开实施例公开了一种渲染用户界面组件的方法、装置、电子设备、及存储介质，所述方法包括：获取目标用户界面组件的素材信息；确定所述目标用户界面组件的待渲染窗口的宽度；根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。本公开实施例的技术方案能根据不同尺寸的待渲染窗口动态渲染用户界面组件，能提高用户界面组件的复用率，便于代码维护。CN111324835ACN111324835A权利要求书1/2页1.一种渲染用户界面组件的方法，其特征在于，包括：获取目标用户界面组件的素材信息；确定所述目标用户界面组件的待渲染窗口的宽度；根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。2.根据权利要求1所述的方法，其特征在于，若所述待渲染窗口为所述浏览器的可视窗口，则将所述HTML文件挂载到预定网页文件内部包括：将所述HTML文件作为所述预定网页文件。3.根据权利要求1所述的方法，其特征在于，若所述待渲染窗口为内嵌窗口或弹窗，则将所述HTML文件挂载到预定网页文件内部包括：新建浮动窗口类型的元素，将所述HTML文件包裹在所述浮动窗口类型的元素中，其中所述浮动窗口类型的元素的透明度属性值为0；将所述浮动窗口类型的元素挂载到所述预定网页文件的预定位置。4.根据权利要求3所述的方法，其特征在于，所述浮动窗口类型的元素为IFRAME类型的元素。5.根据权利要求3所述的方法，其特征在于，所述方法由预定网页文件内容的脚本代码执行。6.根据权利要求1所述的方法，其特征在于，所述获取目标用户界面组件的素材信息包括：根据所述目标用户界面组件的标识获取所述目标用户界面组件的素材信息。7.根据权利要求1所述的方法，其特征在于，所述素材信息包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位；所述根据所述素材信息和所述宽度生成HTML文件包括：根据所述网页设计稿中各元素的尺寸与所述网页设计稿的设计标准尺寸的比值确定所述各元素的REM值；根据所述网页设计稿和所述各元素的REM值生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位；根据所述宽度与所述设计标准尺寸的比值重置所述HTML文件的字体尺寸属性值。8.一种渲染用户界面组件的装置，其特征在于，包括：素材信息获取单元，用于获取目标用户界面组件的素材信息；宽度确定单元，用于确定所述目标用户界面组件的待渲染窗口的宽度；文件生成单元，用于根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；文件挂载单元，用于将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。9.一种电子设备，其特征在于，包括：一个或多个处理器；存储器，用于存储一个或多个程序；2CN111324835A权利要求书2/2页当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一项所述的方法。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1-7任一项所述的方法。3CN111324835A说明书1/9页渲染用户界面组件的方法、装置、电子设备、及存储介质技术领域[0001]本公开实施例涉及计算机网络应用领域，具体涉及一种渲染用户界面组件的方法、装置、电子设备、及存储介质。背景技术[0002]同一网页资源(用户体验UE、用户界面UI)，可将其作为H5页面、内嵌页