CN112084446A

CN112084446A - 一种网页编辑方法、编辑器、电子设备和可读存储介质

Info

Publication number: CN112084446A
Application number: CN202010822147.4A
Authority: CN
Inventors: 张天霖; 徐亚楠; 梁丽洁
Original assignee: CITIC Aibank Corp Ltd
Current assignee: CITIC Aibank Corp Ltd
Priority date: 2020-08-16
Filing date: 2020-08-16
Publication date: 2020-12-15

Abstract

本申请涉及计算机技术领域，尤其涉及一种网页编辑方法、编辑器、电子设备和可读存储介质，所述方法包括创建满足业务需求的数据信息组件；将所述数据信息组件关联至目标UI组件；其中，所述每一个组件具有唯一的ID标识。本申请涉及的编辑方案实现了对数据接口的关联和数据信息的调用，可以支持具有交互性的复杂、动态活动页面的编辑，拓展了编辑器的功能并进一步地提高编辑器利用率。

Description

一种网页编辑方法、编辑器、电子设备和可读存储介质

技术领域

本申请涉及计算机数据处理技术领域，尤其涉及一种网页编辑方法、编辑器、电子设备和可读存储介质。

背景技术

HTML5，简称H5，是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一，相比H4，H5有更多的交互和功能，最大优点之一是在移动设备上支持多媒体。目前H5的应用是直接利用基础语言进行活动开发，从开发到上线周期过长，如果遇到频繁改动页面上的元素，例如文案，图片，则需要频繁上线，非常不利于维护。虽然目前有很多公司实践去开发过这样的简易版H5编辑器，但是简易版的编辑器无法实现任何与数据接口及后端的活动页面的交互。

发明内容

本申请的目的旨在至少能解决上述的技术缺陷之一。本申请所采用的技术方案如下：

第一方面，本申请实施例提供一种网页编辑方法，所述方法包括：

创建满足业务需求的数据信息组件；

将所述数据信息组件关联至目标UI组件；

其中，所述每一个组件具有唯一的ID标识。

可选地，所述创建满足业务需求的数据信息组件包括：

获取并分析业务需求；

根据分析结果，编写满足业务需求的数据信息；

将所述数据信息进行封装形成数据信息组件并生成组件ID标识。

可选地，将所述数据信息组件关联至目标UI组件包括：

所述关联属性为所述目标UI组件用于调用所述数据信息组件中数据信息。

可选地，将所述数据信息组件关联至目标UI组件包括：

创建一个包括至少一个所述数据信息组件的关键值的JSON文件；

将所述数据信息组件的关键值关联至目标UI组件。

可选地，所述方法还包括：

响应于用户的UI界面操纵指令，将所述数据信息组件关联至目标UI组件；

响应于用户的UI界面操纵指令，将所述关联数据信息组件的目标UI组件关联至UI界面。

可选地，所述方法还包括：

响应于用户的UI界面操纵指令，对所述UI组件进行编辑；其中所述编辑至少包括以下之一：

修改、删除、新增、调整、拖拉。

第二方面，本申请实施例提供了一种编辑编辑器，所述编辑器包括创建模块和关联模块；其中，

所述创建模块，用于创建满足业务需求的数据信息组件；

所述关联模块，用于将所述数据信息组件关联至目标UI组件；

其中，所述每一个组件具有唯一的ID标识。

可选地，所述编辑器还包括读取模块、编辑模块、封装模块和生成模块；

所述读取模块，用于获取并分析业务需求；

所述编辑模块，用于根据分析结果，编写满足业务需求的数据信息；

所述封装模块，用于将所述数据信息进行封装形成数据信息组件；

所述生成模块，用于生成组件ID标识。

第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器；

所述存储器，用于存储操作指令；

所述处理器，用于通过调用所述操作指令，执行上述网页编辑方法。

第四方面，一种计算机可读存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述编辑的方法。

本申请实施例公开的网页编辑方案，通过创建满足业务需求的数据信息组件；将所述数据信息组件关联至目标UI组件，其中，所述每一个组件具有唯一的ID标识。本申请实施例提供的技术方案带来的有益效果是：

(1)在网页编辑中能够让编辑者通过可视化的拖拉拽活动快速生成运营活动页面，且避免了现有技术中存在的需要进行多次开发、测试、上线带来的耗时问题，减少人力成本，缩短上线周期。

(2)在支持对***应用UI界面中UI组件编辑的基础上实现了对数据接口的关联和数据信息的调用，可以支持具有交互性的复杂、动态活动页面的编辑，拓展了编辑器的功能并进一步地提高编辑器利用率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种网页编辑方法的流程示意图；

图2为本申请实施例提供的一种网页编辑器的结构示意图；

图3为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本发明的限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

为了更清楚地介绍本申请技术方案，以下介绍一些可能涉及到的概念或定义以辅助本申请方案的理解：

HTML 5作为网页编辑器具有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application，RIA)，如Adobe Flash、MicrosoftSilverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准。

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

下面将结合附图以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

为使本申请的目的、技术方案和优点更加清楚，图1公开了本申请实施例提供的一种网页编辑方法的流程图，如图1所示，所述网页编辑方法包括：

S101、创建满足业务需求的数据信息组件；

在本申请实施例中，所述创建满足业务需求的数据信息组件包括：

获取并分析业务需求；

根据分析结果，编写满足业务需求的数据信息；将所述数据信息进行封装形成数据信息组件并生成组件ID标识。

在本实施例中，所述数据信息为根据业务需求编写的数据、数表或方法流程等代码信息。所述ID是每一个组件在创建时***自动加载的标识信息，该ID信息一旦形成就无法再对此进行修改。ID信息作为各组件的唯一标识能够起到识别不同组件的功能。

在本申请可选实施例中，所述数据信息组件可以在该方案实施之前就预先编辑并存储在网页编辑器中，也可以由编辑者根据接收到的业务需求进行自行实时编辑。

S102、将所述数据信息组件关联至目标UI组件；其中，所述每一个组件具有唯一的ID标识。所述关联属性为所述目标UI组件用于调用所述数据信息组件中数据信息；

进一步地，关联过程包括：

步骤1、创建一个包括至少一个所述数据信息组件的关键值的JSON文件；即该JSON文件包含各个数据信息组件的key-value组合，

步骤2、将所述数据信息组件的关键值关联至目标UI组件。即H5引擎在JSON文件中选择目标UI组件所需的数据信息的value，则完成了将数据信息组件绑定到该UI组件上。在这个过程中对于各组件绑定的识别是基于各组件的唯一ID。

在本申请可选实施例中，所述所述数据信息组件基于网页编辑器引擎，具体为H5网页编辑器引擎进行开发创建，且在网页活动页面中均各数据信息组件的ID为唯一标识进行组装，形成一个JSON串，方便后续H5端引擎解析。

在本申请实施例中，将所述数据信息组件关联至目标UI组件包括：

响应于用户的UI界面操纵指令，将所述数据信息组件关联至目标UI组件；即在UI界面上用户通过拖拉拽的界面操纵将数据信息组件拖拽至目标UI组件所占具的区域范围内，例如用户利用鼠标在UI界面或网页活动页面内将一个编写好的方法流程代码文本(数据信息组件)拖拽至选定的模块按钮(目标UI组件)所占的区域内即实现了将所述方法流程与所述模块按钮关联绑定。可选地，所述组件所占区域可以为以UI组件图标中心为中心，以一定的半径或距离进行各维度的的边界约束形成。

本申请可选实施例中还包括响应于用户的UI界面操纵指令，将所述关联数据信息组件的目标UI组件关联至UI界面，具体实现过程同将所述数据信息组件关联至目标UI组件。

在本申请可选实施例中，所述方法还包括：响应于用户的UI界面操纵指令，对所述UI组件进行编辑；其中所述编辑至少包括以下之一：

修改、删除、新增、调整、拖拉。

上述实施例中所述对UI组件的编辑过程同目前H5编辑器对网页活动页面的编辑方式相同，再次不再赘述。

在上述所有实施例中，所述数据信息组件中所述方法流程包括但不限于：

用户登录时进行身份验证的方法；或，

设置跑马灯使能的方法；或，

分享配置信息的方法；或，

更新动态列表的方法；或，

设置活动页面显示配置或状态的方法。

基于上述实施例提供的网页编辑方法，解决了现有技术中开发活动存在的耗费人力和时间的问题，基于本申请提供的这种基于H5编辑器的网页编辑方法，活动运营团队可以直接在线上对简单的活动页面进行配置，无需研发人员再去干涉。

基于图1所示的实施例提供的网页编辑方法，图2示出了本申请实施例提供的一种网页编辑器，如图2所示，该编辑器主要可以包括201创建模块和202关联模块；其中，

所述201创建模块，用于创建满足业务需求的数据信息组件；

所述202关联模块，用于将所述数据信息组件关联至目标UI组件；

其中，所述每一个组件具有唯一的ID标识。

在本申请实施例中，所述网页编辑器为H5编辑器。

在本申请可选实施例中，所述编辑器还包括203读取模块、204编辑模块、205封装模块和206生成模块；

所述读取模块，用于获取并分析业务需求；

所述生成模块，用于生成组件ID标识。

在可选实施例中，所述202关联模块还用于控制所述目标UI组件用于调用所述数据信息组件中数据信息。

在可选实施例中，所述201创建模块还用于：

所述202关联模块还用于，将所述数据信息组件的关键值关联至目标UI组件。

在可选实施例中，所述203读取模块还用于读取用户的UI界面操纵指令；

所述202关联模块，还用于将所述数据信息组件关联至目标UI组件；

所述203读取模块，还用于读取用户的UI界面操纵指令；

所述202关联模块，还用于将所述关联数据信息组件的目标UI组件关联至UI界面。

在可选实施例中，所述读取模块，还用于读取用户的UI界面操纵指令；

所述204编辑模块，用于对所述UI组件进行编辑；其中所述编辑至少包括以下之一：

修改、删除、新增、调整、拖拉。

可以理解的是，本实施例中的编辑编辑器的上述各模块具有实现图1中所示的实施例中的方法相应步骤的功能。该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。上述模块可以是软件和/或硬件，上述各模块可以单独实现，也可以多个模块集成实现。对于上述各模块的功能描述具体可以参见图1中所示实施例中的方法的对应描述，在此不再赘述。

本申请实施例提供了一种电子设备，包括处理器和存储器；

存储器，用于存储操作指令；

处理器，用于通过调用操作指令，执行本申请任一实施方式中所提供的网页编辑方法。

作为一个示例，图3示出了本申请实施例所适用的一种电子设备的结构示意图，如图3所示，该电子设备2000包括：处理器2001和存储器2003。其中，处理器2001和存储器2003相连，如通过总线2002相连。可选的，电子设备2000还可以包括收发器2004。需要说明的是，实际应用中收发器2004不限于一个，该电子设备2000的结构并不构成对本申请实施例的限定。

其中，处理器2001应用于本申请实施例中，用于实现上述方法实施例所示的方法。收发器2004可以包括接收机和发射机，收发器2004应用于本申请实施例中，用于执行时实现本申请实施例的电子设备与其他设备通信的功能。

处理器2001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器2001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线2002可包括一通路，在上述组件之间传送信息。总线2002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线2002可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器2003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

可选的，存储器2003用于存储执行本申请方案的应用程序代码，并由处理器2001来控制执行。处理器2001用于执行存储器2003中存储的应用程序代码，以实现本申请任一实施方式中所提供的网页编辑方法。

本申请实施例提供的电子设备，适用于上述方法任一实施例，在此不再赘述。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现上述方法实施例所示的网页编辑方法。

本申请实施例提供的计算机可读存储介质，适用于上述方法任一实施例，在此不再赘述。

本申请实施例公开的编辑方案，通过创建满足业务需求的数据信息组件；将所述数据信息组件关联至目标UI组件；其中，所述每一个组件具有唯一的ID标识。本申请涉及的编辑方案实现了对数据接口的关联和数据信息的调用，可以支持具有交互性的复杂、动态活动页面的编辑，拓展了编辑器的功能并进一步地提高编辑器利用率。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

以上仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims

1.一种网页编辑方法，应用于网页编辑器，其特征在于，所述方法包括：

创建满足业务需求的数据信息组件；

将所述数据信息组件关联至目标UI组件；

其中，所述每一个组件具有唯一的ID标识。

2.根据权利要求1所述的网页编辑方法，其特征在于，所述创建满足业务需求的数据信息组件包括：

获取并分析业务需求；

根据分析结果，编写满足业务需求的数据信息；

3.根据权利要求2所述的网页编辑方法，其特征在于，将所述数据信息组件关联至目标UI组件包括：

4.根据权利要求3所述的网页编辑方法，其特征在于，将所述数据信息组件关联至目标UI组件包括：

将所述数据信息组件的关键值关联至目标UI组件。

5.根据权利要求4所述的网页编辑方法，其特征在于，所述方法还包括：

6.根据权利要求5所述的网页编辑方法，其特征在于，所述方法还包括：

修改、删除、新增、调整、拖拉。

7.一种网页编辑器，其特征在于，所述编辑器包括：创建模块和关联模块；其中，

所述创建模块，用于创建满足业务需求的数据信息组件；

其中，所述每一个组件具有唯一的ID标识。

8.根据权利要求7所述的网页编辑器，其特征在于，所述编辑器还包括读取模块、编辑模块、封装模块和生成模块；

所述读取模块，用于获取并分析业务需求；

所述生成模块，用于生成组件ID标识。

9.一种电子设备，其特征在于，包括处理器和存储器；

所述存储器，用于存储操作指令；

所述处理器，用于通过调用所述操作指令，执行权利要求1-6中任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-6中任一项所述的方法。