CN111324835A - 渲染用户界面组件的方法、装置、电子设备、及存储介质 - Google Patents

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

Info

Publication number
CN111324835A
CN111324835A CN202010081399.6A CN202010081399A CN111324835A CN 111324835 A CN111324835 A CN 111324835A CN 202010081399 A CN202010081399 A CN 202010081399A CN 111324835 A CN111324835 A CN 111324835A
Authority
CN
China
Prior art keywords
user interface
interface component
html file
file
window
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010081399.6A
Other languages
English (en)
Inventor
倪连柱
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN202010081399.6A priority Critical patent/CN111324835A/zh
Publication of CN111324835A publication Critical patent/CN111324835A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本公开实施例公开了一种渲染用户界面组件的方法、装置、电子设备、及存储介质，所述方法包括：获取目标用户界面组件的素材信息；确定所述目标用户界面组件的待渲染窗口的宽度；根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。本公开实施例的技术方案能根据不同尺寸的待渲染窗口动态渲染用户界面组件，能提高用户界面组件的复用率，便于代码维护。

Description

渲染用户界面组件的方法、装置、电子设备、及存储介质
技术领域
本公开实施例涉及计算机网络应用领域，具体涉及一种渲染用户界面组件的方法、装置、电子设备、及存储介质。
背景技术
同一网页资源(用户体验UE、用户界面UI)，可将其作为H5页面、内嵌页面、或页面弹窗等，一方面能实现资源复用，另一方面也便于代码维护。但是，在不同地方使用该网页资源时，封装该网页资源的容器大小可能不一致，导致页面资源中包含的元素的显示精度可能不同。
若根据该页面资源用于不同地方，根据其容器大小进行不同的设置，比较繁琐，效率不高。
发明内容
有鉴于此，本公开实施例提供一种渲染用户界面组件的方法、装置、电子设备、及存储介质，以根据不同尺寸的待渲染窗口动态渲染用户界面组件，提高用户界面组件的复用率，便于代码维护。
本公开实施例的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开实施例的实践而习得。
第一方面，本公开实施例提供了一种渲染用户界面组件的方法，包括：
获取目标用户界面组件的素材信息；
确定所述目标用户界面组件的待渲染窗口的宽度；
根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM(font size of the root element，是指相对于根元素的字体大小的单位)作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；
将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。
第二方面，本公开实施例还提供了一种渲染用户界面组件的装置，包括：
素材信息获取单元，用于获取目标用户界面组件的素材信息；
宽度确定单元，用于确定所述目标用户界面组件的待渲染窗口的宽度；
文件生成单元，用于根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；
文件挂载单元，用于将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。
第三方面，本公开实施例还提供了一种电子设备，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面中任一项所述的方法。
第四方面，本公开实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面中任一项所述的方法。
本公开实施例通过获取目标用户界面组件的素材信息和待渲染窗口的宽度生成REM样式的HTML文件，其中字体尺寸属性值根据所述宽度确定，将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口，能根据不同尺寸的待渲染窗口动态渲染用户界面组件，能提高用户界面组件的复用率，便于代码维护。
附图说明
为了更清楚地说明本公开实施例中的技术方案，下面将对本公开实施例描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本公开实施例中的一部分实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据本公开实施例的内容和这些附图获得其他的附图。
图1是本公开实施例提供的一种渲染用户界面组件的方法的流程示意图；
图2是本公开实施例提供的另一种渲染用户界面组件的方法中生成HTML文件的流程示意图；
图3是本公开实施例提供的一种渲染用户界面组件的装置的结构示意图；
图4是本公开实施例提供的另一种渲染用户界面组件的装置的结构示意图；
图5示出了适于用来实现本公开实施例的电子设备的结构示意图。
具体实施方式
为使本公开实施例解决的技术问题、采用的技术方案和达到的技术效果更加清楚，下面将结合附图对本公开实施例的技术方案作进一步的详细描述，显然，所描述的实施例仅仅是本公开实施例中的一部分实施例，而不是全部的实施例。基于本公开实施例中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开实施例保护的范围。
需要说明的是，本公开实施例中术语“系统”和“网络”在本文中常被可互换使用。本公开实施例中提到的“和/或”是指包括一个或更多个相关所列项目的任何和所有组合。本公开的说明书和权利要求书及附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于限定特定顺序。
还需要说明是，本公开实施例中下述各个实施例可以单独执行，各个实施例之间也可以相互结合执行，本公开实施例对此不作具体限制。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
下面结合附图并通过具体实施方式来进一步说明本公开实施例的技术方案。
图1示出了本公开实施例提供的一种渲染用户界面组件的方法的流程示意图，本实施例可适用于根据不同尺寸的待渲染窗口动态渲染用户界面组件的情况，该方法可以由浏览器根据指定指示代码来执行，如图1所示，本实施例所述的渲染用户界面组件的方法包括：
在步骤S110中，获取目标用户界面组件的素材信息。
其中，所述目标用户界面组件可为UI界面组件或UE界面组件，可以作为H5页面，也可作为内嵌页面或页面的弹窗等。
本步骤可采用多种方法，例如，可根据所述目标用户界面组件的标识获取所述目标用户界面组件的素材信息。例如，该指示代码可根据传入的目标用户界面组件的下载地址，根据该下载地址向服务器获取该用户界面组件的素材信息。
其中，所述素材信息的具体组织形式本实施例不作限定，只要能够根据素材信息通过脚本代码生成该用户界面组件对应的HTML文件即可。例如，所述素材信息可包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位。
在步骤S120中，确定所述目标用户界面组件的待渲染窗口的宽度。
例如，若将所述目标用户界面组件作为H5页面，待渲染窗口即为所述浏览器的可视窗口，宽度即为所述浏览器的可视窗口的宽度。
在步骤S130中，根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定。
本步骤的具体方法根据目标用户界面组件的素材信息的组织方式不同而不同，另外，即使使用相同的素材信息，具体地生成HTML文件的方法也有可能不同，只要能根据素材信息和所述宽度生成HTML文件即可，具体方法本实施例对此不作限定。
在步骤S140中，将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。
我们知道，用户界面组件可以作为H5页面，也可作为内嵌页面或页面的弹窗。
若将用户界面组件可以作为H5页面，则所述待渲染窗口为所述浏览器的可视窗口，在步骤S140中，将所述HTML文件挂载到预定网页文件内部包括：将所述HTML文件作为所述预定网页文件。
若将用户界面组件可以作为内嵌页面或页面的弹窗，则所述待渲染窗口为内嵌窗口或弹窗，在步骤S140中，将所述HTML文件挂载到预定网页文件内部包括：
新建浮动窗口类型的元素，将所述HTML文件包裹在所述浮动窗口类型的元素中，其中所述浮动窗口类型的元素的透明度属性值为0；
将所述浮动窗口类型的元素挂载到所述预定网页文件的预定位置。
例如，所述浮动窗口类型的元素可以是IFRAME类型的元素。
若将用户界面组件可以作为内嵌页面或页面的弹窗，则所述指定指示代码可为所述预定网页文件内部的脚本代码，所述浏览器解析所述预定网页文件的过程中，解析所述脚本代码执行本实施例的技术方案。
本实施例通过获取目标用户界面组件的素材信息和待渲染窗口的宽度生成REM样式的HTML文件，其中字体尺寸属性值根据所述宽度确定，将所述HTML文件挂载到预定网页文件内部，以使所述浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口，能根据不同尺寸的待渲染窗口动态渲染用户界面组件，能使目标用户界面组件适应不同大小的容器，能提高用户界面组件的复用率，便于代码维护。
图2示出了本公开实施例提供的另一种渲染用户界面组件的方法中生成HTML文件的流程示意图，本实施例以前述实施例为基础，以所述素材信息包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位为例，提供了一种根据素材信息和待渲染窗口的宽度生成HTML文件的方法。如图2所示，本实施例所述的生成HTML文件的方法包括：
在步骤S210中，根据网页设计稿中各元素的尺寸与所述网页设计稿的设计标准尺寸的比值确定所述各元素的REM值。
REM(font size of the root element)是指相对于根元素的字体大小的单位，简而言之，它就是一个相对单位，是指相对于根元素的字体大小的单位。
例如设计稿宽度640px，根元素的字体大小为10px(即1REM等于10px)，设计稿中所有的界面元素的尺寸设置为该尺寸全除以10换算成REM形式确定各界面元素的REM值。
其中，用户界面组件的网页设计稿中的界面元素包括但不仅限于输入控件、导航控件、和信息控件。
其中，所述输入控件包括但不限于按钮、文本框、选取框、单选按钮、下拉列表、列表框和开关按钮等。所述导航控件包括但不限于面包屑导航、滑块、搜索栏、分页、标签和图标等。所述信息控件包括但不限于文本提示框、图标、进度条、提示、消息框和模式窗口等。
在步骤S220中，根据所述网页设计稿和所述各元素的REM值生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位。
根据所述网页设计稿中各界面元素的分布位置和REM值，生成对应的HTML文件。
在步骤S230中，根据待渲染窗口的宽度与所述设计标准尺寸的比值重置所述HTML文件的字体尺寸属性值。
REM是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，即设置FONT-SIZE，则可以来算出元素的宽高。
例如待渲染窗口的宽度为320PX，即宽度为设计稿宽度的一半，则1REM等于5PX,FONT-SIZE值为5/10＝50％。
本实施例在上一实施例的基础上，以所述素材信息包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位为例，提供了一种根据素材信息和待渲染窗口的宽度生成HTML文件的方法，能根据目标用户界面组件的设计稿进行渲染适配，能提高用户界面设计稿的复用率。
作为上述各图所示方法的实现，本申请提供了一种渲染用户界面组件的装置的一个实施例,图3示出了本实施例提供的一种渲染用户界面组件的装置的结构示意图，该装置实施例与图1和图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。如图3所示，本实施例所述的渲染用户界面组件的装置包括素材信息获取单元310、宽度确定单元320、文件生成单元330和文件挂载单元340。
所述素材信息获取单元310被配置为，用于获取目标用户界面组件的素材信息。
所述宽度确定单元320被配置为，用于确定所述目标用户界面组件的待渲染窗口的宽度。
所述文件生成单元330被配置为，用于根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定。
所述文件挂载单元340被配置为，用于将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。
于一实施例中，若所述待渲染窗口为所述浏览器的可视窗口，则所述文件挂载单元340被配置为，用于将所述HTML文件作为所述预定网页文件。
于一实施例中，若所述待渲染窗口为内嵌窗口或弹窗，则所述文件挂载单元340被配置为，用于：
新建浮动窗口类型的元素，将所述HTML文件包裹在所述浮动窗口类型的元素中，其中所述浮动窗口类型的元素的透明度属性值为0；
将所述浮动窗口类型的元素挂载到所述预定网页文件的预定位置。
进一步地，所述浮动窗口类型的元素为IFRAME类型的元素。
进一步地，所述素材信息获取单元310被配置为，用于根据所述目标用户界面组件的标识获取所述目标用户界面组件的素材信息。
本实施例提供的渲染用户界面组件的装置可执行本公开方法实施例所提供的渲染用户界面组件的方法，具备执行方法相应的功能模块和有益效果。
图4示出了本公开实施例提供的另一种渲染用户界面组件的装置的结构示意图，如图4所示，本实施例所述的渲染用户界面组件的装置包括素材信息获取单元410、宽度确定单元420、文件生成单元430和文件挂载单元440。其中，所述文件生成单元430进一步包括REM值确定子单元431、文件生成子单元432和尺寸重置子单元433。
所述素材信息获取单元410被配置为，用于获取目标用户界面组件的素材信息。
所述宽度确定单元420被配置为，用于确定所述目标用户界面组件的待渲染窗口的宽度。
所述文件生成单元430被配置为，用于根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定。
其中，所述素材信息包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位，所述文件生成单元430进一步包括REM值确定子单元431、文件生成子单元432和尺寸重置子单元433。
所述REM值确定子单元431被配置为，根据所述网页设计稿中各元素的尺寸与所述网页设计稿的设计标准尺寸的比值确定所述各元素的REM值。
所述文件生成子单元432被配置为，用于根据所述网页设计稿和所述各元素的REM值生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位。
所述尺寸重置子单元433被配置为，用于根据所述宽度与所述设计标准尺寸的比值重置所述HTML文件的字体尺寸属性值。
所述文件挂载单元440被配置为，用于将所述HTML文件挂载到预定网页文件内部，以使所述浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。
于一实施例中，若所述待渲染窗口为所述浏览器的可视窗口，则所述文件挂载单元440被配置为，用于将所述HTML文件作为所述预定网页文件。
于一实施例中，若所述待渲染窗口为内嵌窗口或弹窗，则所述文件挂载单元440被配置为，用于：
新建浮动窗口类型的元素，将所述HTML文件包裹在所述浮动窗口类型的元素中，其中所述浮动窗口类型的元素的透明度属性值为0；
将所述浮动窗口类型的元素挂载到所述预定网页文件的预定位置。
进一步地，所述浮动窗口类型的元素为IFRAME类型的元素。
进一步地，所述素材信息获取单元410被配置为，用于根据所述目标用户界面组件的标识获取所述目标用户界面组件的素材信息。
本实施例提供的渲染用户界面组件的装置可执行本公开方法实施例所提供的渲染用户界面组件的方法，具备执行方法相应的功能模块和有益效果。
下面参考图5，其示出了适于用来实现本公开实施例的电子设备500的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图5示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图5所示，电子设备500可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储装置508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有电子设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许电子设备500与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的电子设备500，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开实施例的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开实施例的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置508被安装，或者从ROM 502被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的方法中限定的上述功能。
需要说明的是，本公开实施例上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：
获取目标用户界面组件的素材信息；
确定所述目标用户界面组件的待渲染窗口的宽度；
根据所述素材信息和所述宽度生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位，所述HTML文件的字体尺寸属性值根据所述宽度确定；
将所述HTML文件挂载到预定网页文件内部，以使浏览器解析所述HTML文件时将所述目标用户界面组件渲染到所述待渲染窗口。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开实施例的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开实施例各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。
根据本公开的一个或多个实施例，所述渲染用户界面组件的方法中，若所述待渲染窗口为所述浏览器的可视窗口，则将所述HTML文件挂载到预定网页文件内部包括：将所述HTML文件作为所述预定网页文件。
根据本公开的一个或多个实施例，所述渲染用户界面组件的方法中，若所述待渲染窗口为内嵌窗口或弹窗，则将所述HTML文件挂载到预定网页文件内部包括：
新建浮动窗口类型的元素，将所述HTML文件包裹在所述浮动窗口类型的元素中，其中所述浮动窗口类型的元素的透明度属性值为0；
将所述浮动窗口类型的元素挂载到所述预定网页文件的预定位置。
根据本公开的一个或多个实施例，所述渲染用户界面组件的方法中，所述浮动窗口类型的元素为IFRAME类型的元素。
根据本公开的一个或多个实施例，所述渲染用户界面组件的方法由预定网页文件内容的脚本代码执行。
根据本公开的一个或多个实施例，所述渲染用户界面组件的方法中，所述获取目标用户界面组件的素材信息包括：根据所述目标用户界面组件的标识获取所述目标用户界面组件的素材信息。
根据本公开的一个或多个实施例，所述渲染用户界面组件的方法中，所述素材信息包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位；
所述根据所述素材信息和所述宽度生成HTML文件包括：
根据所述网页设计稿中各元素的尺寸与所述网页设计稿的设计标准尺寸的比值确定所述各元素的REM值；
根据所述网页设计稿和所述各元素的REM值生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位；
根据所述宽度与所述设计标准尺寸的比值重置所述HTML文件的字体尺寸属性值。
根据本公开的一个或多个实施例，所述渲染用户界面组件的装置中，若所述待渲染窗口为所述浏览器的可视窗口，则所述文件挂载单元用于：将所述HTML文件作为所述预定网页文件。
根据本公开的一个或多个实施例，所述渲染用户界面组件的装置中，若所述待渲染窗口为内嵌窗口或弹窗，则所述文件挂载单元用于：
新建浮动窗口类型的元素，将所述HTML文件包裹在所述浮动窗口类型的元素中，其中所述浮动窗口类型的元素的透明度属性值为0；
将所述浮动窗口类型的元素挂载到所述预定网页文件的预定位置。
根据本公开的一个或多个实施例，所述渲染用户界面组件的装置中，所述浮动窗口类型的元素为IFRAME类型的元素。
根据本公开的一个或多个实施例，所述渲染用户界面组件的装置中，所述素材信息获取单元用于：根据所述目标用户界面组件的标识获取所述目标用户界面组件的素材信息。
根据本公开的一个或多个实施例，所述渲染用户界面组件的装置中，所述素材信息包括所述目标用户界面的网页设计稿，其中所述网页设计稿的元素使用绝对尺寸单位；
所述文件生成单元包括：
REM值确定子单元，根据所述网页设计稿中各元素的尺寸与所述网页设计稿的设计标准尺寸的比值确定所述各元素的REM值；
文件生成子单元，用于根据所述网页设计稿和所述各元素的REM值生成HTML文件，其中所述HTML文件的元素使用REM作为尺寸单位；
尺寸重置子单元，用于根据所述宽度与所述设计标准尺寸的比值重置所述HTML文件的字体尺寸属性值。
以上描述仅为本公开实施例的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开实施例中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开实施例中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

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.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一项所述的方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1-7任一项所述的方法。
CN202010081399.6A 2020-02-06 2020-02-06 渲染用户界面组件的方法、装置、电子设备、及存储介质 Pending CN111324835A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010081399.6A CN111324835A (zh) 2020-02-06 2020-02-06 渲染用户界面组件的方法、装置、电子设备、及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010081399.6A CN111324835A (zh) 2020-02-06 2020-02-06 渲染用户界面组件的方法、装置、电子设备、及存储介质

Publications (1)

Publication Number Publication Date
CN111324835A true CN111324835A (zh) 2020-06-23

Family

ID=71170919

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010081399.6A Pending CN111324835A (zh) 2020-02-06 2020-02-06 渲染用户界面组件的方法、装置、电子设备、及存储介质

Country Status (1)

Country Link
CN (1) CN111324835A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112162747A (zh) * 2020-09-25 2021-01-01 同程网络科技股份有限公司 一种前端页面组件化的方法、装置及计算机可读存储介质
CN113641926A (zh) * 2021-07-21 2021-11-12 深圳市六度人和科技有限公司 信息显示方法、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025728A1 (en) * 2001-07-10 2003-02-06 Ebbo David S. User control objects for providing server-side code generation from a user-defined dynamic web page content file
CN107463584A (zh) * 2016-06-06 2017-12-12 腾讯科技（深圳）有限公司 一种交互页面的编辑处理方法及终端
CN109614568A (zh) * 2018-12-07 2019-04-12 微梦创科网络科技（中国）有限公司 一种页面生成方法及装置
CN110532488A (zh) * 2018-05-23 2019-12-03 腾讯科技（深圳）有限公司 网页渲染方法、装置和电子设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030025728A1 (en) * 2001-07-10 2003-02-06 Ebbo David S. User control objects for providing server-side code generation from a user-defined dynamic web page content file
CN107463584A (zh) * 2016-06-06 2017-12-12 腾讯科技（深圳）有限公司 一种交互页面的编辑处理方法及终端
CN110532488A (zh) * 2018-05-23 2019-12-03 腾讯科技（深圳）有限公司 网页渲染方法、装置和电子设备
CN109614568A (zh) * 2018-12-07 2019-04-12 微梦创科网络科技（中国）有限公司 一种页面生成方法及装置

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112162747A (zh) * 2020-09-25 2021-01-01 同程网络科技股份有限公司 一种前端页面组件化的方法、装置及计算机可读存储介质
CN113641926A (zh) * 2021-07-21 2021-11-12 深圳市六度人和科技有限公司 信息显示方法、设备及存储介质
CN113641926B (zh) * 2021-07-21 2024-05-07 深圳市六度人和科技有限公司 信息显示方法、设备及存储介质

Similar Documents

Publication Publication Date Title
CN109460233B (zh) 页面的原生界面显示更新方法、装置、终端设备及介质
CN109857486B (zh) 一种程序页面数据的处理方法、装置、设备和介质
CN109857506B (zh) 引导信息的实现方法、装置、电子设备和存储介质
US10135910B2 (en) Cross-platform document presentation
CN111581555B (zh) 一种文档加载方法、装置、设备及存储介质
CN112684968A (zh) 页面展示方法、装置、电子设备和计算机可读介质
CN111367516A (zh) 应用界面生成方法、装置及电子设备
CN110865846B (zh) 应用管理的方法、装置、终端、系统及存储介质
CN111324835A (zh) 渲染用户界面组件的方法、装置、电子设备、及存储介质
CN115470432A (zh) 一种页面渲染方法、装置、电子设备及计算机可读介质
CN111381819B (zh) 列表的创建方法、装置、电子设备及计算机可读存储介质
CN111783010B (zh) 网页空白页面监测方法、装置、终端及存储介质
CN111177634A (zh) 支持多语言的文案内容加载方法、装置、设备、及介质
CN110147283B (zh) 一种显示内容切换显示方法、装置、设备及介质
CN110069186B (zh) 显示应用的操作界面的方法和设备
CN110618811B (zh) 信息呈现方法和装置
CN111324347A (zh) 组件构造方法、装置、系统、页面生成方法、设备及介质
CN111309406A (zh) 应用程序的事件处理方法、装置及电子设备
CN111083145A (zh) 消息发送方法、装置及电子设备
CN109669720B (zh) 基于Promise的链式异步请求处理方法、装置及电子设备
CN113296771A (zh) 页面显示方法、装置、设备和计算机可读介质
CN109857503B (zh) 页面交互效果自适应方法、装置与电子设备
CN112445478A (zh) 图形文件的处理方法、装置、设备及介质
CN112214665A (zh) 内容展示方法、装置、电子设备及计算机可读存储介质
CN113220293B (zh) 页面展示方法、装置、电子设备和计算机可读介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination