CN113626031A - web页面实现方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种web页面实现方法、装置、电子设备及存储介质，该方法包括：在图形化编程平台上展示初始web页面，初始web页面包括显示界面和控件池；响应于web页面编辑指令，确定目标控件，目标控件属于控件池；根据目标控件的编辑指令，对显示界面进行渲染，生成渲染结果；根据渲染结果生成目标web页面，展示目标web页面。本发明实施例可实现将web页面转化为图形化编程平台可运行的编程语言后，实现在浏览器环境对web页面进行编辑，操作方法简单，而且对目标控件进行编辑的形式，操作可视化，开发成本低，开发效率高，为初学者学习web页面开发提供方便。

Description

web页面实现方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种web页面实现方法、装置、电子设备及存储介质。

背景技术

web页面是使用HTML(hyper text markup language,超文本标记语言)语言建立的。任何一种web浏览器的计算机都能解释HTML语言，web浏览器把HTML语言翻译成为多媒体web文件的可视化表现，包括预先设计背景主题样式、页面标题、动画、页面标题等等。

HTML标记在浏览器中是不可见的，但是页面上的文本和图像是可见的。任何在web页面中见到的图片、声音或动画元素都是相互独立的文件。这些文件的名称，以及有关如何打开该文件，如何下载该文件和应把该文件放到web页面什么地方的信息，都由HTML标记提供。

web页面通常由HTML、JAVASCRIPT、CSS(Cascading Style Sheets，层叠样式表)等几部分进行支持。现有技术中的web页面的实现方式通过对HTML，JAVASCRIPT，CSS的后台程序进行手动编写，因此在实现一个web页面，需要用户同时掌握HTML，JAVASCRIPT，CSS的程序语言，增加了初学者的学习成本，为初学者学习web页面设计带来不便。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明提供了一种web页面实现方法、装置、电子设备及存储介质，旨在解决现有技术中web页面实现方式复杂，增加用户的学习成本，为初学者带来不便的问题。

本发明的技术方案如下：

本发明第一实施例提供了一种web页面实现方法，应用于图形化编程平台，所述图形化编程平台运行于浏览器环境，方法包括：

在图形化编程平台上展示初始web页面，所述初始web页面包括显示界面和控件池；

响应于web页面编辑指令，确定目标控件，所述目标控件属于所述控件池；

根据所述目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果；

根据渲染结果生成目标web页面，展示所述目标web页面。

进一步地，所述在图形化编程平台上展示初始web页面前，所述方法还包括：

预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，其中所述控件池设置在所述显示界面上。

进一步地，所述显示界面参数包括项目标识、项目名称、界面标识，所述控件池为所述显示界面各个控件组成的控件列表；

所述预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，包括：

预先将所述显示界面的项目标识、项目名称、界面标识转化为第一JSON数据；

预先将所述显示界面的控件列表转化为第二JSON数据；

根据第一JSON数据和第二JSON数据的组合，生成初始web页面对应的目标JSON数据，存储所述目标JSON数据。

进一步地，所述在图形化编程平台上展示初始web页面，包括：

响应于web页面初始化指令，获取所述初始web页面的显示界面；

根据显示界面获取对应的控件池；

根据所述界面和所述控件池中对目标JSON数据进行渲染，生成所述初始web页面；

展示所述初始web页面。

进一步地，所述根据所述界面和所述控件池中对目标JSON数据进行渲染，生成初始web页面，包括:

循环处理控件池中的每一个控件，根据所述每一个控件动态生成一个无属性的数据容器；

将所述控件的属性赋值给无属性的数据容器，生成目标数据容器；

根据目标数据容器对目标JSON数据进行渲染，生成初始web页面。

进一步地，所述根据所述目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果，包括：

根据所述目标控件的编辑指令，获取所述目标控件的控件标识；

根据控件标识获取对应控件JSON数据，对控件JSON数据进行更改，生成目标控件JSON数据；

根据目标控件JSON数据对所述显示界面中的目标控件进行局部渲染，生成局部渲染结果。

进一步地，所述预先将所述显示界面的控件列表转化为第二JSON数据，包括：

预先获取所述显示界面的控件列表的每一个控件；

获取每一个控件的层叠样式数据，将所述层叠样式数据转化为第二JSON数据。

本发明的另一实施例提供了一种web页面实现装置，装置包括：

第一展示模块，用于在图形化编程平台上展示初始web页面，所述初始web页面包括显示界面和控件池；

目标控件定位模块，用于响应于web页面编辑指令，确定目标控件，所述目标控件属于所述控件池；

渲染模块，用于根据所述目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果；

第二展示模块，用于根据渲染结果生成目标web页面，展示所述目标web页面。

本发明的另一实施例提供了一种电子设备，所述电子设备包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的web页面实现方法。

本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的web页面实现方法。

有益效果：本发明实施例可将web页面转化为图形化编程平台可运行的编程语言后，实现在浏览器环境对web页面进行编辑，操作方法简单，而且对目标控件进行编辑的形式，操作可视化，开发成本低，开发效率高，为初学者学习web页面开发提供方便。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1为本发明一种web页面实现方法较佳实施例的流程图；

图2为本发明一种web页面实现方法的具体应用实施例的web页面编辑示意图；

图3为本发明一种web页面实现方法的具体应用实施例的web页面示意图；

图4为本发明一种web页面实现方法的具体应用实施例的流程图；

图5为本发明一种web页面实现装置的较佳实施例的功能模块示意图；

图6为本发明一种电子设备的较佳实施例的硬件结构示意图。

具体实施方式

为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

以下结合附图对本发明实施例进行介绍。

本发明实施例提供了一种web页面实现方法，应用于图形化编程平台，图形化编程平台运行于浏览器环境，请参阅图1，图1为本发明一种web页面实现方法较佳实施例的流程图。如图1所示，其包括步骤：

步骤S101、在图形化编程平台上展示初始web页面，初始web页面包括显示界面和控件池；

具体地，本发明实施例的web页面实现方法通过图形化编程平台进行实现，图形化编程平台就是编写有界面的程序，编程语言是一种被标准化的交流技巧，用来向计算机发出指令，定义计算机程序。使用图形化编程可以进行良好的页面布局，在现有的很多web应用中，其应用程序的页面布局经常需要使用图像，这样能够让页面整体效果更加友好。

web页面包括HTML文件、JAVASCRIPT文件和CSS内容。其中HTML是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

JAVASCRIPT是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发web页面的脚本语言而出名，也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。

CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

初始web页面为用户在图形化编程平台上未处理的原始web页面，初始web页面包括显示界面和控件池，显示界面还设置有当前显示web页面的标识，不同功能的web页面对应的不同的标识。控件池是由若干个web页面的控件组成的。在实际应用中，可以根据需求对初始web页面进行限制，本发明实施例对此不作限制。

步骤S102、响应于web页面编辑指令，确定目标控件，目标控件属于控件池；

具体实施时，当图形化编程平台接收到用户输入的web页面编辑指令，接收用户选择，则从控件池获取待处理的控件，作为目标控件。目标控件可以是一个或多个。初始web页面的控件池中设置有大量的控件。web页面编辑指令是指web页面进入可编辑状态，根据用户指令选择待处理的控件为目标控件。例如：在web页面编辑指令被触发后，用户可在控件池中选择要调整的控件，确定被选中的控件为目标控件。

在一些其他的实施例中，若显示界面上存在控件且控件池也存在控件，则当检测到web页面编辑指令被触发，则控制控件池中的所有控件和初始web页面中的控件处于浮动状态，根据用户的选择的某一个控件，确定待处理的目标控件。其他浮动的控件变为静止。

在一些其他的实施例中，若显示界面上不存在控件，仅控件池上存在控件，则当检测到web页面编辑指令被触发，则控制控件池中的所有控件控件处于浮动状态，根据用户的选择的某一个控件，确定待处理的目标控件。其他浮动的控件变为静止。

控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能、控件创建过程包括设计、开发、调试工作，然后是控件的使用。

web页面编辑指令可以是图形化编程平台设置的web页面编辑按钮，当检测到web页面编辑按钮被点击，则判定web页面编辑指令被触发。在实际应用时，可以根据需求对web页面编辑指令的触发方式进行限制，本发明实施例对此不作限制。

步骤S103、根据目标控件的编辑指令，对显示界面进行渲染，生成渲染结果；

具体实施时，本发明实施例中的编辑指令可以是指新增指令、修改指令或删除指令中一种。当检测到对待处理的目标控件的编辑指令时，根据编辑指令对显示界面进行渲染，生成编辑后的渲染结果。

步骤S104、根据渲染结果生成目标web页面，展示目标web页面。

具体实施时，当检测到web页面编辑指令停止时，获取渲染结果后生成最终设计好的目标web页面，并在显示界面上展示目标web页面，完成了web页面的设计过程。

在一个实施例中，在图形化编程平台上展示初始web页面前，方法还包括：

预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，其中控件池设置在显示界面上。

具体实施时，每一个web页面都包括显示界面参数和与控件池参数。其中显示界面参数主要用于对当前显示界面的ID等数据进行标识，控件池参数则控件对应的后台数据。预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，该数据为图形化编程平台后可执行的程序数据。

控件池设置在显示界面上，例如控件池可以设置在显示界面的一侧。

在一个实施例中，显示界面参数包括项目标识、项目名称、界面标识，控件池为显示界面各个控件组成的控件列表；

预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，包括：

预先将显示界面的项目标识、项目名称、界面标识转化为第一JSON数据；

预先将显示界面的控件列表转化为第二JSON数据；

根据第一JSON数据和第二JSON数据的组合，生成初始web页面对应的目标JSON数据，存储目标JSON数据。

具体实施时，JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

因此本发明实施例将显示界面的项目ID(IDentity，标识)、项目名称、界面ID等数据转为第一JSON数据，将控件列表的控件池对应的数据转化为第二JSON数据；结合第一JSON数据和第二JSON数据生成初始web页面对应的目标JSON数据，并对目标JSON数据进行存储。

在实际应用时，可以根据需求对数据结构格式进行限制，例如采用PYTHON语言或是C语言等进行实现，本发明实施例对此不作限制。

在一个实施例中，在图形化编程平台上展示初始web页面，包括：

响应于web页面初始化指令，获取初始web页面的显示界面；

根据显示界面获取对应的控件池；

根据目标JSON数据进行渲染，生成初始web页面；

展示初始web页面。

具体实施时，图形化编程平台接收到用户输入的web页面初始化指令，首先获取初始web页面的显示界面参数，根据web页面的显示界面参数获取对应的控件池数据，控件池是指由多个控件组成的控件列表。根据目标JSON数据进行渲染，生成初始web页面，对初始web页面进行展示。

在一个实施例中，根据目标JSON数据进行渲染，生成初始web页面，包括:

循环处理控件池中的每一个控件，根据每一个控件动态生成一个无属性的数据容器；

将控件的属性赋值给无属性的数据容器，生成目标数据容器；

根据目标数据容器对目标JSON数据进行渲染，生成初始web页面。

具体实施时，web页面初始化时，首先会通过获取当前屏幕，再获取当前屏幕的控件列表，通过循环处理控件池中的每一个控件，动态生成一个无属性的DIV容器中，在将每个控件的属性赋值个空DIV容器。其中DIV标签属于块状标签，只是相对于一些具有特殊含义的块状元素，DIV是一个通用的块状元素，可以容纳各种元素。

在一个实施例中，根据目标控件的编辑指令，对显示界面进行渲染，生成渲染结果，包括：

根据目标控件的编辑指令，获取目标控件的控件标识；

根据控件标识获取对应控件JSON数据，对控件JSON数据进行更改，生成目标控件JSON数据；

根据目标控件JSON数据对显示界面中的目标控件进行局部渲染，生成局部渲染结果。

具体实施时，本发明实施例中目标控件的编辑指令主要是通过对目标控件的按下、拖拽、松开等操作进行触发，不同的操作对应不同的处理方法。

在检测到目标控件的编辑指令后，获取目标控件的控件ID，找到该控件ID对应的JSON数据，修改控件JSON数据的attribute属性。通知渲染机根据JSON数据进行局部UI(user interface,用户界面)更新。

attribute：是HTML标签上的某个属性，如ID、class、value等以及自定义属性，它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute(设置)、getAttribute(获取)、removeAttribute(删除)；

在使用setAttribute的时候，该函数一定接收两个参数，setAttribute(attributeName,value),attributeName为attribute的名称属性，value为attributeName对应的值。无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。

UI指对软件的人机交互、操作逻辑、界面美观的整体设计。

在一个实施例中，预先将显示界面的控件列表转化为第二JSON数据，包括：

预先获取显示界面的控件列表的每一个控件；

获取每一个控件的层叠样式数据，将层叠样式数据转化为第二JSON数据。

具体实施时，本发明实施例中一个显示界面可容纳若干个控件，若干个控件组成控件列表。在获取显示界面的控件列表的每一个控件，每一个控件都有对应的CSS属性记录在第二JSON数据。

在一个实施例中，本发明实施例中通过屏幕+不同的控件的组合，以实现不同的业务需求。如图2所示，初始web页面由显示界面和控件列表构成，显示界面的左上角还对当前屏幕进行标识，控件列表包括若干个控件，控件包括不限于界面控件和绘图动画控件，界面控件中又包括文本控件、按钮控件、输入框控件、图片框控件、单选框控件、复选框控件、网页浏览框控件、开关控件和滚动条控件，绘图动画控件包括画布控件、画笔控件和角色控件。本发明实施例的图形化编程平台的编程技术是基于浏览环境器环境实现，因此该技术可以跨多个环境(window，ios，android)中正常实现功能。具有低功耗，高性能，轻量级，易操作开发成本低，时效性高的特点。

如图3所示，为本发明实施例已经生成的目标web页面，该目标web页面为登录界面，包括登录账号、登录账号输入框、登录密码输入框、登录按钮、立即注册操作按钮和忘记密码操作按钮。

本发明实施例需要预先对JSON数据结构进行定义。定义JSON数据结构如下：显示界面的界面参数对应内容包括项目标识、项目名、屏幕ID、屏幕列表等数据，控件池的参数包括ID、type类型、title主题、size尺寸、visible可视化、position位置、parentId父节点、onload加载事件、attribute属性、zIndex属性设置元素的堆叠顺序等数据。整个JSON数据主要包括屏幕和控件，每个屏幕可以容纳若干个控件，每个控件都有对应的CSS属性记录在JSON数据中。

当项目A JOSN初始化时，首先会通过获取当前屏幕，再获取当前屏幕的控件列表，通过循环，动态生成一个无属性的DIV容器中，在将每个控件的属性赋值个空DIV容器。在UI界面中，整个流程的处理我们将它定义为—实现渲染机。渲染机有两种渲染方式：全量渲染，用于在项目初始化时，需要将所有的数据转化为视图。局部渲染，用于当用户拖动某一个控件时触发控制器，进行局部渲染。

但用户触发DOM(Document Object Model,文档对象模型)的事件后，相关事件如(按下，拖拽，松开)，每个事件都有不同的控制器去负责处理，控制器主要的作用:根据事件传入的控件ID，并找到控件ID对应的JSON数据，修改控件JSON数据的Attribute属性。通知渲染机根据JSON数据进行局部UI更新。

本发明实施例提供了一种web页面实现方法，如图4所示，其工作流程如下：

获取用户行为，将用户行为发送至控制器；

通过控件器对控件1、控件2、控件3对应的JSON数据进行更改；其中控件1、控件2、控件3是指需要进行修改的控件。

将更改后的JSON数据发送至渲染机，渲染机进行渲染后生成目标web页面，即用户视图。其中渲染机的实现方式在上文中已提及，此处不再赘述。

需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。

本发明另一实施例提供一种web页面实现装置，如图5所示，装置1包括：

第一展示模块11，用于在图形化编程平台上展示初始web页面，初始web页面包括显示界面和控件池；

目标控件定位模块12，用于响应于web页面编辑指令，确定目标控件，目标控件属于控件池；

渲染模块13，用于根据目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果；

第二展示模块14，用于根据渲染结果生成目标web页面，展示所述目标web页面。

具体实施方式见方法实施例，此处不再赘述。

本发明另一实施例提供一种电子设备，如图6所示，电子设备10包括：

一个或多个处理器110以及存储器120，图6中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图6中以通过总线连接为例。

处理器110用于完成电子设备10的各种控件逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件控件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的web页面实现方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行设备10的各种功能应用以及数据处理，即实现上述方法实施例中的web页面实现方法。

存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据设备10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的web页面实现方法，例如，执行以上描述的图1中的方法步骤S101至步骤S104。

本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S101至步骤S104。

作为示例，非易失性存储介质能够包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦ROM(EEPROM)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(RAM)。通过说明并非限制，RAM可以以诸如同步RAM(SRAM)、动态RAM、(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强型SDRAM(ESDRAM)、Synchlink DRAM(SLDRAM)以及直接Rambus(兰巴斯)RAM(DRRAM)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器控件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。

本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使处理器执行上述方法实施例的web页面实现方法。例如，执行以上描述的图1中的方法步骤S101至步骤S104。

以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。

通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存在于计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。

除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地还旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。

已经在本文中在本说明书和附图中描述的内容包括能够提供web页面实现方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。

Claims (10)

1.一种web页面实现方法,其特征在于,应用于图形化编程平台，所述图形化编程平台运行于浏览器环境，所述方法包括：

在图形化编程平台上展示初始web页面，所述初始web页面包括显示界面和控件池；

响应于web页面编辑指令，确定目标控件，所述目标控件属于所述控件池；

根据所述目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果；

根据渲染结果生成目标web页面，展示所述目标web页面。

2.根据权利要求1所述的方法，其特征在于，所述在图形化编程平台上展示初始web页面前，所述方法还包括：

预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，其中所述控件池设置在所述显示界面上。

3.根据权利要求2所述的方法，其特征在于，所述显示界面参数包括项目标识、项目名称、界面标识，所述控件池为所述显示界面各个控件组成的控件列表；

所述预先将初始web页面中的显示界面参数与控件池参数定义为预设数据结构的数据，包括：

预先将所述显示界面的项目标识、项目名称、界面标识转化为第一JSON数据；

预先将所述显示界面的控件列表转化为第二JSON数据；

根据第一JSON数据和第二JSON数据的组合，生成初始web页面对应的目标JSON数据，存储所述目标JSON数据。

4.根据权利要求1-3中任一项所述的方法，其特征在于，所述在图形化编程平台上展示初始web页面，包括：

响应于web页面初始化指令，获取所述初始web页面的显示界面；

根据显示界面获取对应的控件池；

根据所述界面和所述控件池中对目标JSON数据进行渲染，生成所述初始web页面；

展示所述初始web页面。

5.根据权利要求4所述的方法，其特征在于，所述根据所述界面和所述控件池中对目标JSON数据进行渲染，生成初始web页面，包括:

循环处理控件池中的每一个控件，根据所述每一个控件动态生成一个无属性的数据容器；

将所述控件的属性赋值给无属性的数据容器，生成目标数据容器；

根据目标数据容器对目标JSON数据进行渲染，生成初始web页面。

6.根据权利要求5所述的方法，其特征在于，所述根据所述目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果，包括：

根据所述目标控件的编辑指令，获取所述目标控件的控件标识；

根据控件标识获取对应控件JSON数据，对控件JSON数据进行更改，生成目标控件JSON数据；

根据目标控件JSON数据对所述显示界面中的目标控件进行局部渲染，生成局部渲染结果。

7.根据权利要求3-6任一项所述的方法，其特征在于，所述预先将所述显示界面的控件列表转化为第二JSON数据，包括：

预先获取所述显示界面的控件列表的每一个控件；

获取每一个控件的层叠样式数据，将所述层叠样式数据转化为第二JSON数据。

8.一种web页面实现装置，其特征在于，所述装置包括：

第一展示模块，用于在图形化编程平台上展示初始web页面，所述初始web页面包括显示界面和控件池；

目标控件定位模块，用于响应于web页面编辑指令，确定目标控件，所述目标控件属于所述控件池；

渲染模块，用于根据所述目标控件的编辑指令，对所述显示界面进行渲染，生成渲染结果；

第二展示模块，用于根据渲染结果生成目标web页面，展示所述目标web页面。

9.一种电子设备，其特征在于，所述电子设备包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7任一项所述的web页面实现方法。

10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的web页面实现方法。

Images