CN107391116B - 一种组件帮助弹窗渲染方法及装置 - Google Patents

一种组件帮助弹窗渲染方法及装置 Download PDF

Info

Publication number
CN107391116B
CN107391116B CN201710508164.9A CN201710508164A CN107391116B CN 107391116 B CN107391116 B CN 107391116B CN 201710508164 A CN201710508164 A CN 201710508164A CN 107391116 B CN107391116 B CN 107391116B
Authority
CN
China
Prior art keywords
component
help
rendering
popup
document content
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.)
Active
Application number
CN201710508164.9A
Other languages
English (en)
Other versions
CN107391116A (zh
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.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu 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 Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201710508164.9A priority Critical patent/CN107391116B/zh
Publication of CN107391116A publication Critical patent/CN107391116A/zh
Application granted granted Critical
Publication of CN107391116B publication Critical patent/CN107391116B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种组件帮助弹窗渲染方法及装置,所述的方法包括:监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。通过本发明,组件开发者只需要编写组件的帮助文档,可以通过一个帮助弹窗就能够渲染多个组件的帮助内容,多个组件的帮助文档内容共用一个帮助弹窗,相比现有的一个组件对应一个帮助弹窗,提高了页面的性能。

Description

一种组件帮助弹窗渲染方法及装置
技术领域
本发明涉及弹窗渲染技术领域,更具体地,涉及一种组件帮助弹窗渲染方法及装置。
背景技术
webMarket是一个开发人员通过拖拽页面表现组件来搭建网页的在线平台。该平台可以在浏览器里面访问并使用,webMarket平台提供了大量可视化的页面基础元素组件,只需要合适配置就可以完成页面的设计,在页面中完成相关功能或者展示相关内容,比如文字组件,图片组件等等。具体为通过鼠标操作拖拽组件到画布的相应位置,然后使用属性编辑器对组件进行编辑,最终拼成一个完整页面以供预览和发布。webMarket平台使用没有门槛,技术人员和普通非技术人员都能通过该平台快速搭建发布页面。
webMarket平台中提供了丰富的组件,而且还在持续增加中,越来越多、越来越复杂的组件使得页面开发者在挑选和使用的时候陷入了困境。比如,对于简单的组件,可能有多个类似的组件,那么到底该使用哪个来实现当前需求?而对于复杂组件,该如何配置来完成想要的效果?以及在使用各种组件的时候该注意什么事项?为了解决这些问题,很多组件开发者会为开发的组件编写组件帮助文档说明,但是纯文本的说明对页面开发者并不友好,在使用过程中需要页面开发者去一个个寻找组件的帮助文档说明,很浪费时间。
那么这种时候最好的方式是在webMarket平台中实现组件的帮助弹窗,但是为每个组件单独开发弹窗又是个很麻烦的事情,而且不同开发者可能开发的弹窗样式不统一,弹窗的控制不统一甚至产生冲突导致功能异常。
发明内容
本发明提供一种克服上述问题或者至少部分地解决上述问题的组件帮助弹窗渲染方法及系统,能够克服页面上多个弹窗显示引起的降低页面性能的问题。
根据本发明的第一方面,提供了一种组件帮助弹窗渲染方法,包括:
S1,监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
S2,将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
S3,当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
本发明的有益效果为:组件开发者只需要编写组件的帮助文档,可以通过一个帮助弹窗就能够渲染多个组件的帮助内容,一次显示一个组件的帮助文档内容,即多个组件的帮助文档内容通过复写的方式共享一个帮助弹窗,相比现有的一个组件对应开发一个弹窗,在页面中一直是提高了页面的性能;且能够采用统一的渲染格式对页面中各的组件帮助文档内容进行渲染,避免渲染样式不统一,带来的阅读困难问题。
在上述技术方案的基础上,本发明还可以作如下改进。
进一步的,所述步骤S1之前还包括:
编写各个组件对应的组件帮助文档内容,其中,所述组件帮助文档内容为JSON格式。
进一步的,所述组件帮助文档内容包括组件使用步骤部分和问答环节部分,其中,所述组件使用步骤部分采用文字和图片匹配的方式,所述问答环节部分采用问题和答案的方式。
进一步的,所述组件帮助文档内容中的图片采用图片索引地址存储,相应的,与图片索引地址对应的图片文件保存于组件目录中。
进一步的,所述步骤S2还包括:
为组件帮助文档内容中的不同部分内容配置不同的渲染样式;
相应地,所述步骤S2中按照预设的渲染样式,对第一组件帮助文档内容进行渲染包括:
根据组件帮助文档内容中不同部分内容对应的渲染样式,对第一组件帮助文档中的不同部分内容进行相应的渲染。
进一步的,所述步骤S2中还包括:
将获取的JSON格式的第一组件帮助文档内容转换成JSON对象,并从中读取JSON数据;
将JSON数据中的图片索引地址拼接成完整的图片链接地址,以便于根据图片链接地址,实现对图片的加载。各
根据本发明的第二方面,提供了一种组件帮助弹窗渲染装置,包括:
获取模块,用于监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
渲染模块,用于将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
复写模块,用于当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
进一步的,还包括:
配置模块,用于为组件帮助文档内容中的不同部分内容配置不同的渲染样式;
相应地,所述渲染模块,具体用于根据组件帮助文档内容中不同部分内容对应的渲染样式,对第一组件帮助文档中的不同部分内容进行相应的渲染。
根据本发明的第三方面,提供了一种组件帮助弹窗渲染方法的设备,包括处理器(processor)、存储器(memory)和总线;
所述处理器和存储器通过所述总线完成相互间的通信;
所述存储器存储有可被所述处理器执行的程序指令,所述处理器调用所述程序指令能够执行如下方法:
监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
根据本发明的第四方面,提供了一种非暂态计算机可读存储介质,其特征在于,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令使所述计算机执行如下方法:
监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
附图说明
图1为本发明一个实施例的组件帮助弹窗渲染方法流程图;
图2为本发明另一个实施例的组件帮助弹窗渲染装置连接框图;
图3为本发明又一个实施例的组件帮助弹窗渲染装置的整体连接框图;
图4为本发明再一个实施例的组件帮助弹窗渲染方法的设备连接框图。
具体实施方式
下面结合附图和实施例,对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明,但不用来限制本发明的范围。
参见图1,提供了本发明一个实施例的组件帮助弹窗渲染方法,通过渲染出来的帮助弹窗能够用来引导页面开发者使用组件来设计页面。该方法包括:S1,监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;S2,将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;S3,当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
在页面开发过程中,会使用到很多组件,随着组件越来越多,组件越来越复杂,使得页面开发者在挑选和使用组件时陷入了困境。因此,在页面开发者使用组件进行页面设计时,需要配备对应的帮助弹窗来介绍每一个组件,以便页面开发者更好地使用各个组件。
本实施例中,在页面开发者需要设计的页面上,将设计该页面需要用到的组件标识以列表的方式显示,当页面开发者需要用到哪个组件时,点击该组件的帮助按钮。当监听到页面上的组件帮助按钮的点击事件时,根据该组件标识,查找到与该组件标识对应的组件帮助文档内容。其中,各组件标识与组件帮助文档内容具有对应关系。
当查找到组件帮助文档内容后,将组件帮助文档内容导入帮助弹窗模板中,进行渲染。其中,帮助弹窗模板是预先定义好的,帮助弹窗模板的渲染样式也是事先编写好的。组件帮助文档内容导入帮助弹窗模板中后,按照帮助弹窗模板的预设样式,对组件帮助文档内容进行渲染,生成与该组件对应的帮助弹窗。
一个页面里面通常有很多组件,如果一个组件配置一个帮助弹窗,当页面开发者使用的组件较多时,则需要很多个帮助弹窗,同时在页面上弹出多个帮助弹窗,会降低页面的性能。因此,在本实施例中,完成一个帮助弹窗的渲染后,当随后监听到另一个组件的帮助按钮点击事件时,则获取该另一个组件对应的组件帮助文档内容,并将其导入帮助弹窗模板中,用该另一个组件帮助文档内容覆盖上一个组件帮助文档内容,重新渲染,得到该另一个组件的帮助弹窗。
因此,本实施例组件开发者只需要编写组件的帮助文档,可以通过一个帮助弹窗模板就能够渲染多个组件的帮助内容,一次显示一个组件的帮助文档,即多个组件的帮助文档内容通过复写的方式共享一个帮助弹窗,相比现有的一个组件对应开发一个弹窗,提高了页面的性能;并且能够采用统一的渲染格式对页面中各的组件帮助文档内容进行渲染,避免渲染样式不统一,带来的阅读困难问题。
在上述实施例的基础上,本发明的另一个实施例中,所述步骤S1之前还包括:编写各个组件对应的组件帮助文档内容,其中,所述组件帮助文档内容为JSON格式。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器生成和解析。采用JSON结构能够尽量简单,使得组件开发者能够轻松编写配置。因此,本实施例对于页面设计的每一个组件,组件开发者采用JSON格式编写各个组件对应的组件帮助文档内容。
在上述各实施例的基础上,本发明一个实施例中,所述组件帮助文档内容包括组件使用步骤部分和问答环节部分,其中,所述组件使用步骤部分采用文字和图片匹配的方式,所述问答环节部分采用问题和答案的方式。
在本实施例中,为了更好地帮助页面开发者阅读帮助文档,组件开发者将组件帮助文档内容涉及为两部分,第一部分为组件使用步骤,这一部分采用文字加图片的形式,具体为一行文字配置一张图片,采用图文并茂的方式来编写组件帮助文档内容,使得页面开发者更容易理解。需要说的是,在组件帮助文档内容,为文字配置的图片是以图片索引地址存储,而不是真正的图片,真正的图片时需要占用很大存储空间的,而图片索引地址占用的存储空间比较小。而与图片索引地址对应的图片文件是存储于组件目录当中的。第二部分为问答环节部分,采用问题和答案的方式,具体为一个问题配置一个答案,均为文本形式。具体编写的JSON格式的组件帮助文档内容如下:
Figure BDA0001335152790000071
Figure BDA0001335152790000081
在上述各实施例的基础上,本发明的另一个实施例中,所述步骤S2还包括:在帮助弹窗模板中,为组件帮助文档内容中的不同部分内容配置不同的渲染样式;相应地,所述步骤S2中按照预设的渲染样式,对第一组件帮助文档内容进行渲染包括:根据组件帮助文档内容中不同部分内容对应的渲染样式,对第一组件帮助文档中的不同部分内容进行相应的渲染。
在对组件帮助文档内容进行渲染之前,需要对帮助弹窗模板的渲染样式进行定义,从上述实施例中可以得知,每一个组件帮助文档内容中均有两部分内容,再加上组件对应的组件帮助弹窗的标题。对于这些不同的部分,本实施例在帮助弹窗模板中,为组件帮助文档内容中的不同部分内容配置不同的渲染样式。那么在采用帮助弹窗模板进行组件帮助文档内容渲染的时候,根据不同的渲染样式,对组件帮助文档内容中的不同部分内容进行相应的渲染。对同一个组件的帮助文档内容的不同部分采用不同的渲染样式进行渲染,实现同一个组件的帮助文档内容渲染的多样化。在此,需要说明的是,对于不同组件的帮助文档内容中的相同部分,在本实施例中是采用相同的渲染样式进行渲染的。这样对于同一个组件的帮助文档内容的不同部分,采用不同的渲染样式进行渲染,而对于不同组件的帮助文档内容的相同部分,是采用相同的渲染样式进行渲染的,既实现了渲染的多样化,也实现了渲染的统一性。
其中,帮助弹窗模板的渲染样式为:
//2级头部标签来渲染与帮助弹窗标题
'<h2>{{title}}<span标识="help-close">X</span></h2>',
//主体标签
'<div class="modal-body">',
//3级头部标签渲染描述
'<h3>{{description}}</h3>',
//循环语法渲染使用步骤部分
'{{each steps as step}}',
'<p>{{step.text}}</p>',
'<img src="{{step.img}}">',
'{{/each}}',
'<h3>FAQ</h3>',
//循环标签渲染问答环节
'{{each faq as item}}',
'<p><b>问:{{item.q}}</b></p>',
'<p>答:{{item.a}}</p>',
'{{/each}}',
'</div>'
在上述各实施例的基础上,本发明的另一个实施例中,所述步骤S2中还包括:将获取的JSON格式的第一组件帮助文档内容转换成JSON对象,并从中读取JSON数据;将JSON数据中的图片索引地址拼接成完整的图片链接地址,以便于根据图片链接地址,实现对图片的加载。
在具体对每一个组件帮助文档内容进行渲染的过程中,当监听到页面上的组件帮助按钮的点击事件时,会根据组件标识查找到与对应的组件帮助文档内容。由于组件帮助文档内容是JSON格式的,因此,将JSON格式的组件帮助文档内容转换为JSON对象,然后从JSON对象中获取JSON数据。对于组件的使用步骤部分,将与文字介绍对应的图片索引地址拼接成完整的图片链接地址,以便根据图片链接地址,加载对应的图片进行显示。其中,图片索引地址是指图片在组件帮助文档中的地址,而图片链接地址是指图片存储的源地址。
对组件帮助文档内容采用帮助弹窗模板进行了渲染后,生成组件帮助弹窗的内容是基于HTML(HyperText Markup Language,超文本标记语言)格式的,帮助弹窗模板的渲染样式是预先设计好的,因此,组件开发者不用考虑弹窗的样式编写,只需要关注组件的帮助文档内容的编写。另外,使用一个帮助弹窗实现对多个组件的帮助文档内容的渲染,相比现有技术一个组件对应一个帮助弹窗,能够提高页面的性能,每次页面开发者需要呼出某个弹窗时,只需点击该组件的帮助按钮后,系统会自动执行该组件帮助文档内容的渲染和展示。
其中,对于展示的组件帮助弹窗,页面开发者可以选择弹出,也可以选择关闭。帮助弹窗的弹出和隐藏是由页面开发者来触发的,页面开发者在页面上组件列表处点击组件帮助按钮来呼出弹窗,点击弹窗右上角的X按钮来关闭弹窗。
参见图2,提供了本发明另一个实施例的组件帮助弹窗渲染装置,包括获取模块21、渲染模块22和复写模块23。
获取模块21,用于监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
渲染模块22,用于将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
复写模块23,用于当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
参见图3,在上述实施例的基础上,本发明另一个实施例提供的组件帮助弹窗渲染装置还包括编写模块24和配置模块25。
编写模块24,用于编写各个组件对应的组件帮助文档内容,其中,所述组件帮助文档内容为JSON格式。
其中,所述组件帮助文档内容包括组件使用步骤部分和问答环节部分,所述组件使用步骤部分采用文字和图片匹配的方式,所述问答环节部分采用问题和答案的方式。组件帮助文档内容中的图片采用图片索引地址存储,相应的,与图片索引地址对应的图片文件保存于组件目录中。
配置模块25,用于为组件帮助文档内容中的不同部分内容配置不同的渲染样式;相应地,所述渲染模块22,具体用于根据组件帮助文档内容中不同部分内容对应的渲染样式,对第一组件帮助文档中的不同部分内容进行相应的渲染。
图4示出本申请实施例的组件帮助弹窗渲染方法的设备的结构框图。
参照图4,组件帮助弹窗渲染方法的设备包括:处理器(processor)401、存储器(memory)402和总线403;其中,所述处理器401和存储器402通过所述总线403完成相互间的通信。
所述处理器401用于调用所述存储器402中的程序指令,以执行上述各方法实施例所提供的方法,例如包括:监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
本发明公开一种计算机程序产品,该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序,该计算机程序包括程序指令,当程序指令被计算机执行时,计算机能够执行上述对应实施例所提供的组件帮助弹窗渲染方法,例如包括:监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
本发明还提供一种非暂态计算机可读存储介质,该非暂态计算机可读存储介质存储计算机指令,该计算机指令使计算机执行上述对应实施例所提供的组件帮助弹窗渲染方法,例如包括:监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗。
本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成,前述的程序可以存储于一计算机可读取存储介质中,该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所描述的组件帮助弹窗渲染方法的设备等实施例仅仅是示意性的,其中作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行各个实施例或者实施例的某些部分方法。
本发明提供了一种组件帮助弹窗渲染方法及装置,组件开发者只需要编写组件的帮助文档,可以通过一个帮助弹窗就能够渲染多个组件的帮助内容,一次显示一个组件的帮助文档内容,即多个组件的帮助文档内容通过复写的方式共享一个帮助弹窗,相比现有的一个组件对应开发一个弹窗,在页面中一直是提高了页面的性能;且能够采用统一的渲染格式对页面中各的组件帮助文档内容进行渲染,避免渲染样式不统一,带来的阅读困难问题。
最后,本申请的方法仅为较佳的实施方案,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (10)

1.一种组件帮助弹窗渲染方法,其特征在于,包括:
S1,监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
S2,将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
S3,当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗;
其中,所述帮助弹窗模板的个数为1个。
2.如权利要求1所述的组件帮助弹窗渲染方法,其特征在于,所述步骤S1之前还包括:
编写各个组件对应的组件帮助文档内容,其中,所述组件帮助文档内容为JSON格式。
3.如权利要求2所述的组件帮助弹窗渲染方法,其特征在于,所述组件帮助文档内容包括组件使用步骤部分和问答环节部分,其中,所述组件使用步骤部分采用文字和图片匹配的方式,所述问答环节部分采用问题和答案的方式。
4.如权利要求3所述的组件帮助弹窗渲染方法,其特征在于,所述组件帮助文档内容中的图片采用图片索引地址存储,相应的,与图片索引地址对应的图片文件保存于组件目录中。
5.如权利要求4所述的组件帮助弹窗渲染方法,其特征在于,所述步骤S2还包括:
为组件帮助文档内容中的不同部分内容配置不同的渲染样式;
相应地,所述步骤S2中按照预设的渲染样式,对第一组件帮助文档内容进行渲染包括:
根据组件帮助文档内容中不同部分内容对应的渲染样式,对第一组件帮助文档中的不同部分内容进行相应的渲染。
6.如权利要求5所述的组件帮助弹窗渲染方法,其特征在于,所述步骤S2中还包括:
将获取的JSON格式的第一组件帮助文档内容转换成JSON对象,并从中读取JSON数据;
将JSON数据中的图片索引地址拼接成完整的图片链接地址,以便于根据图片链接地址,实现对图片的加载。
7.一种组件帮助弹窗渲染装置,其特征在于,包括:
获取模块,用于监听页面上第一组件的帮助按钮点击事件,根据第一组件标识,获取对应的第一组件帮助文档内容;
渲染模块,用于将所述第一组件帮助文档内容导入帮助弹窗模板,并按照预设的渲染样式,对第一组件帮助文档内容进行渲染,生成第一组件的帮助弹窗;
复写模块,用于当监听到第二组件的帮助按钮点击事件时,通过在帮助弹窗模板中复写第二组件帮助文档内容,重新生成第二组件的帮助弹窗;
其中,所述帮助弹窗模板的个数为1个。
8.如权利要求7所述的组件帮助弹窗渲染装置,其特征在于,还包括:
配置模块,用于为组件帮助文档内容中的不同部分内容配置不同的渲染样式;
相应地,所述渲染模块,具体用于根据组件帮助文档内容中不同部分内容对应的渲染样式,对第一组件帮助文档中的不同部分内容进行相应的渲染。
9.一种组件帮助弹窗渲染方法的设备,其特征在于,包括处理器(processor)、存储器(memory)和总线;
所述处理器和存储器通过所述总线完成相互间的通信;
所述存储器存储有可被所述处理器执行的程序指令,所述处理器调用所述程序指令能够执行如权利要求1-6任一项所述的方法。
10.一种非暂态计算机可读存储介质,其特征在于,所述非暂态计算机可读存储介质存储计算机指令,所述计算机指令使所述计算机执行如权利要求1至6任一所述的方法。
CN201710508164.9A 2017-06-28 2017-06-28 一种组件帮助弹窗渲染方法及装置 Active CN107391116B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710508164.9A CN107391116B (zh) 2017-06-28 2017-06-28 一种组件帮助弹窗渲染方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710508164.9A CN107391116B (zh) 2017-06-28 2017-06-28 一种组件帮助弹窗渲染方法及装置

Publications (2)

Publication Number Publication Date
CN107391116A CN107391116A (zh) 2017-11-24
CN107391116B true CN107391116B (zh) 2021-02-02

Family

ID=60334178

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710508164.9A Active CN107391116B (zh) 2017-06-28 2017-06-28 一种组件帮助弹窗渲染方法及装置

Country Status (1)

Country Link
CN (1) CN107391116B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112241261A (zh) * 2019-07-16 2021-01-19 深圳易为控股有限公司 一种基于模板引擎渲染弹窗动态添加内容方法
CN117369906B (zh) * 2023-12-07 2024-02-09 成都市楠菲微电子有限公司 Pcie验证平台、方法、装置、存储介质及电子设备

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6102967A (en) * 1997-01-31 2000-08-15 Microsoft Corporation Testing a help system of a computer software application without executing the computer software application
KR20060011327A (ko) * 2004-07-30 2006-02-03 삼성전자주식회사 사용자 인터페이스 팝업 메시지 생성 방법 및 시스템
CN101540740A (zh) * 2009-05-05 2009-09-23 腾讯科技(深圳)有限公司 一种多即时通信窗口的提示方法、系统及设备
CN104123059A (zh) * 2013-04-26 2014-10-29 华茂云天科技(北京)有限公司 基于web桌面化的云计算管理系统
CN104267947A (zh) * 2014-09-23 2015-01-07 广州金山网络科技有限公司 一种编辑弹窗图片的方法及弹窗图片编辑装置
US9021390B1 (en) * 2010-05-05 2015-04-28 Zynga Inc. Methods and apparatus for optimized pausing of an embedded application to render pop-up window
CN105930364A (zh) * 2016-04-12 2016-09-07 无锡天脉聚源传媒科技有限公司 一种页面加载方法及装置
CN106648641A (zh) * 2016-12-09 2017-05-10 武汉斗鱼网络科技有限公司 一种iOS系统设备上多层弹框的自动管理方法和系统
CN106779833A (zh) * 2016-12-09 2017-05-31 广东神马搜索科技有限公司 信息发布方法、设备、可编程设备及服务平台

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6102967A (en) * 1997-01-31 2000-08-15 Microsoft Corporation Testing a help system of a computer software application without executing the computer software application
KR20060011327A (ko) * 2004-07-30 2006-02-03 삼성전자주식회사 사용자 인터페이스 팝업 메시지 생성 방법 및 시스템
CN101540740A (zh) * 2009-05-05 2009-09-23 腾讯科技(深圳)有限公司 一种多即时通信窗口的提示方法、系统及设备
US9021390B1 (en) * 2010-05-05 2015-04-28 Zynga Inc. Methods and apparatus for optimized pausing of an embedded application to render pop-up window
CN104123059A (zh) * 2013-04-26 2014-10-29 华茂云天科技(北京)有限公司 基于web桌面化的云计算管理系统
CN104267947A (zh) * 2014-09-23 2015-01-07 广州金山网络科技有限公司 一种编辑弹窗图片的方法及弹窗图片编辑装置
CN105930364A (zh) * 2016-04-12 2016-09-07 无锡天脉聚源传媒科技有限公司 一种页面加载方法及装置
CN106648641A (zh) * 2016-12-09 2017-05-10 武汉斗鱼网络科技有限公司 一种iOS系统设备上多层弹框的自动管理方法和系统
CN106779833A (zh) * 2016-12-09 2017-05-31 广东神马搜索科技有限公司 信息发布方法、设备、可编程设备及服务平台

Also Published As

Publication number Publication date
CN107391116A (zh) 2017-11-24

Similar Documents

Publication Publication Date Title
CN110781423B (zh) 网页生成方法、装置及电子设备
US20190236118A1 (en) Filtered stylesheets
CN107066618B (zh) 一种网页页面转换后显示方法和装置
US8682964B1 (en) Progressively loading network content
US10902508B2 (en) Methods for extracting and adapting information to generate custom widgets and devices thereof
US9672197B2 (en) Universal rebranding engine
CN110727429B (zh) 一种前端页面的生成方法、装置及设备
CN113655999A (zh) 一种页面控件的渲染方法、装置、设备及存储介质
CN107391116B (zh) 一种组件帮助弹窗渲染方法及装置
US20170031889A1 (en) Creating a communication editable in a browser independent of platform and operating system
CN112799670B (zh) 一种统一多端逻辑开发的方法及系统
CN111399836B (zh) 修改页面属性的方法及装置
CN115618144B (zh) 基于网页的动态布局方法、系统、设备及介质
US11126410B2 (en) Method and apparatus for building pages, apparatus and non-volatile computer storage medium
EP3819760A1 (en) Methods and apparatus for generating a platform-agnostic mobile application configuration data structure with a dynamic quiz
US11550990B2 (en) Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time
Radford Learning Web Development with Bootstrap and AngularJS
Zea Mastering Responsive Web Design
Kyrnin Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours
CN113849257A (zh) 页面处理方法、装置、介质及电子设备
CN111949266B (zh) 网页生成方法、装置及电子设备
Muyldermans How does the virtual DOM compare to other DOM update mechanisms in JavaScript frameworks
US20240126978A1 (en) Determining attributes for elements of displayable content and adding them to an accessibility tree
CN113485714B (zh) 数据处理方法、装置、计算机设备以及存储介质
Barhoum et al. Creating an IDE-independent Version of the Saros Whiteboard Using Web-Technologies

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
GR01 Patent grant
GR01 Patent grant