页面编辑的方法、装置、设备以及存储介质与流程

本申请涉及计算机技术领域，尤其涉及计算机视觉、应用程序页面编辑、浏览器页面编辑等领域。

背景技术：

在页面开发过程中，每一次产品或功能的开发都需要经历页面设计、代码编写、设计或代码的修改、上线等一系列过程。即便是对页面极小的编辑修改，仍然需要重复上述过程，繁杂琐碎。

技术实现要素：

本申请提供了一种页面编辑的方法、装置、设备以及存储介质。

根据本申请的一方面，提供了一种页面编辑的方法，该方法可以包括以下步骤：

对接收到的页面编辑编码进行解析，得到解析结果；

确定与解析结果对应的待编辑页面以及待编辑页面的页面元素；

利用页面元素对待编辑页面进行更新。

根据本申请的另一方面，提供了一种页面编辑的装置，该装置可以包括以下组件：

编码解析模块，用于对接收到的页面编辑编码进行解析，得到解析结果；

待编辑页面元素确定模块，用于确定与解析结果对应的待编辑页面以及待编辑页面的页面元素；

页面更新模块，用于利用页面元素对待编辑页面进行更新。

第三方面，本申请实施例提供一种电子设备，包括：

至少一个处理器；以及

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

存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本申请任意一项实施例所提供的方法。

第四方面，本申请实施例提供一种存储有计算机指令的非瞬时计算机可读存储介质，计算机指令用于使计算机执行本申请任意一项实施例所提供的方法。

通过上述方案，在对页面进行生成或者修改时，直接利用编码即可实现。利用编码进行页面修改的方式可以实现页面编辑的轻量化、便捷化，提高页面编辑的效率。

应当理解，本部分所描述的内容并非旨在标识本申请的实施例的关键或重要特征，也不用于限制本申请的范围。本申请的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本申请的限定。其中：

图1是根据本申请页面编辑的方法的流程图；

图2是根据本申请确定页面元素的流程图；

图3是根据本申请确定页面元素的流程图；

图4是根据本申请对待编辑页面进行更新的流程图；

图5是根据本申请对待编辑页面进行更新的流程图；

图6是根据本申请页面编辑的装置的示意图；

图7是用来实现本申请实施例的页面编辑的方法的电子设备的框图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

如图1所示，本申请提供一种页面编辑的方法，该方法可以包括以下步骤：

s101：对接收到的页面编辑编码进行解析，得到解析结果；

s102：确定与解析结果对应的待编辑页面以及待编辑页面的页面元素；

s103：利用页面元素对待编辑页面进行更新。

本申请的上述方法可以应用于页面编辑服务器。页面编辑包括页面的生成以及页面的修改。生成或修改的页面可以是应用程序的页面，例如可以是手机等智能终端中运行的应用程序的页面，或者是家用电脑中的浏览器的页面等。页面编辑服务器在实现对于页面的编辑后，更新后的页面显示于智能终端或家用电脑。

以应用程序为智能终端中的浏览器为例。在智能终端中运行的浏览器可以包括多种业务，例如搜索业务、feed流推送业务、音视频业务等。

页面编辑编码可以是对浏览器中任意业务进行修改的编码，或者，还可以是生成新增设的业务的编码。

以对业务进行修改的编码为例，例如，可以是对搜索业务标题的修改，将原搜索业务标题的字体、字号进行修改。在此情况下，页面编辑编码可以包括搜索业务标题的编码以及字体、字号的编码。

又例如，可以对浏览器中所有文字颜色进行修改。在此情况下，页面编辑编码可以包括文字颜色的编码。

接收到页面编辑编码，可以对页面编辑编码进行解析，以确定出页面编辑编码中的内容。即，确定出需要修改或新生成的页面的编码，以及页面中的元素的编码。

页面编辑服务器中可以预先存储有对应关系。该对应关系包括编码与页面的对应关系，以及编码与元素的对应关系。根据该对应关系，即可确定与页面编辑编码对应的待编辑页面，以及待编辑页面中的页面元素。

上述页面中的元素的编码对应的元素均是预先完成设计并通过审核的内容，因此在确定出上述元素后，可以将元素直接应用于页面中。无需再进行修改、审核等工作。

示例性的，页面编辑编码可以是ab_0122。通过对编码进行解析，可以确定编码的首字母a可以对应搜索业务、次字母b可以对应搜索业务的搜索框、前三位数字(012)可以表示搜索框的颜色编码、第四位数字可以表示透明度编码。

根据解析结果，即可确定与解析结果对应的待编辑页面以及待编辑页面的页面元素。例如前述示例的编码，即表示为对于搜索业务中的搜索框的颜色以及透明度进行编辑修改。

在进行页面编辑时，可以直接将待编辑页面中的元素修改为页面编辑编码对应的内容，即可完成页面的编辑。通过上述方案，在对页面进行生成或者修改时，直接利用编码即可实现。由于编码所对应的元素均为已通过审核的内容，因此利用编码进行页面修改的方式可以实现页面编辑的轻量化、便捷化，提高页面编辑的效率。

如图2所示，在一种实施方式中，在页面编辑编码包括页面标识编码和页面元素编码的情况下，步骤s102具体可以包括以下步骤：

s1021：利用预先建立的对应关系，将与页面标识编码对应的页面确定为待编辑页面；

s1022：利用预先建立的对应关系，将与页面元素编码对应的页面元素确定为待编辑页面的页面元素。

页面标识编码可以表征待编辑的页面。例如前述搜索业务、feed流推送业务、音视频业务的页面可以分别对应不同页面标识。根据页面标识编码即可确定出待编辑的页面。

页面元素编码可以表征待编辑页面中的不同元素。在当前实施方式中，页面元素编码可以从不同维度表征待编辑页面中元素。

不同维度可以从细粒度至粗粒度区分。

例如，第一级别的细粒度元素可以包括：字号编码、字形编码、圆角编码、间距编码、投影编码、蒙层编码、文本编码、线条编码、图标编码、颜色模式编码、(不)透明度编码和/或色值编码等。

第二级别的细粒度元素可以是组件，组件中可以涵盖第一级别的细粒度元素，组件可以包括：标签组件编码、按钮组件编码、图片组件编码、文字链编码、视频/图片复合组件编码、底板组件编码、头像复合组件编码和/或评分复合组件编码等。

第三级别的细粒度元素可以是区块，区块中可以涵盖第二级别的细粒度元素，区块可以包括：标题区块编码、头部区块编码、正文区块编码和/或挂件区块编码等。

第四级别的细粒度元素可以是卡片，区块中可以涵盖第三级别的细粒度元素，卡片可以包括：单图卡片编码、多图卡片编码、多话题卡片编码、动态卡片编码、热门小组卡片编码、左图右文卡片编码、大图卡片编码和/或理财信息卡片编码等。

在页面编辑编码包括页面标识编码和页面元素编码的情况下，可以首先利用页面标识编码确定出待编辑的页面，进而根据页面元素编码确定出待编辑页面的页面元素。

即，上述方案适合对于页面的精准编辑，利用页面标识编码可以锁定待编辑的页面，从而页面元素编码是仅针对某个特定页面的。其余页面可以正常展示或正常访问而不受编辑过程的干扰。

如图3所示，在一种实施方式中，在页面编辑编码包括页面元素编码的情况下，步骤s102可以包括以下子步骤：

s1023：利用预先建立的对应关系，将与页面元素编码对应的页面元素确定为待编辑页面的页面元素；

s1024：将包含页面元素的多个页面确定为待编辑页面。

在页面编辑编码仅包括页面元素编码的情况，页面元素编码对应的页面元素可以被确定为目标元素。应用程序中出现目标元素的页面均为待编辑页面。

例如，在特殊情况下，需要将应用程序的所有彩色内容修改为黑白内容。在此情况下，页面编辑编码可以仅包括颜色模式编码。由此，颜色模式被确定为目标元素。所有出现颜色模式的页面都被确定为待编辑页面。确定待编辑页面后，可以根据颜色模式编码将所有待编辑页面的颜色模式调整为黑白。

又例如，如果页面编辑编码包括标题区块编码和圆角编码。由此，标题区块被确定为目标元素。则存在有标题区块的所有页面将被确定为待编辑页面。确定待编辑页面后，可以根据圆角编码将所有待编辑页面的标题区圆角修改为圆角编码对应的样式(例如直角标题区块，圆角标题区块等)。

通过上述方案，在需要多页面编辑时，直接利用页面元素编码可以同时对包含目标元素的多个页面进行同时编辑。由此可以提高页面编辑效率。

需要强调的是，页面元素编码与业务之间是通过映射关系建立关联的。

页面可以包括标题、正文、摘要等。例如，标题的字号对应编码为t1、正文的字号对应编码为t2、摘要的字号对应编码为t3。三个区域的字号可以相同，也可以不同。例如字号编码可以包括24、25、26、30等。那么，三个区域的字号与编码的映射关系可以表示为t1＝25，t2＝30，t3＝30。

如果标题出现在搜索业务，搜索业务(搜索业务的编码可以为s)的标题的字号与编码的映射关系可以表示为：st1＝t1。如果标题出现在信息推送业务(信息推送业务的编码可以为f)，信息推送业务正文的字号与编码的映射关系可以表示为：ft2＝t2。

由此，直接更改编码的码值即可实现页面编辑。即，无须修改代码，即可实现无代码化的页面样式变更。由于不同业务之间并不会发生关联，因此可以只调整前述示例中搜索业务的字号，保持搜索业务线的灵活性。另外，由于前述示例中编辑搜索业务的字号与标题的字号有映射关系，这样编辑搜索业务的字号保持在标题的字号所定义的规范里，从而保障整体设计风格的统一。

另外，页面编辑编码还可以与编码对应的文字说明建立映射关系。示例性地，字号编码5至10可以映射为“小号字”，字号编码10至20可以映射为“中号字”，字号编码大于20可以映射为“大号字”。

如图4所示，在一种实施方式中，步骤s103可以包括以下子步骤：

s1031：确定页面元素的代码以及待编辑页面的代码；

s1032：根据页面元素在待编辑页面的位置，将页面元素的代码与待编辑页面的代码相结合，得到结合的代码。

待编辑页面的代码可以是预先编写好的代码。例如，搜索业务、feed流推送业务、音视频业务等不同业务均对应有代码。

待编辑页面的编码可以和代码之间建立索引关系，即，根据待编辑页面的编码即可确定出待编辑页面的代码。

待编辑页面的代码可以是代码框架，即，在代码框架中可以包含有不同页面元素的代码。根据页面元素在待编辑页面的位置，可以确定出页面元素的代码在代码框架中的位置。由此，将页面编辑编码中的页面元素的代码填入代码框架中的对应位置，以实现页面元素的代码与待编辑页面的代码相结合。

另外，页面编辑服务器还包括代码编辑入口。利用代码编辑入口可以接收不同应用程序(的程序开发人员上传)的页面的代码。即，通过代码编辑入口可以实现页面编辑编码与待编辑页面的代码、页面元素的代码的联动。

通过上述方案，可以对接收到的页面编辑编码进行页面代码的转换。对于不懂页面代码开发的设计人员，可以直接生成页面代码，由此降低了页面编辑的难度。

如图5所示，在一种实施方式中，步骤s103还可以包括以下子步骤：

s1033：获取显示待编辑页面的设备的信息；

s1034：根据设备的信息，对结合的代码进行转换，以满足利用转换后的结合的代码生成的页面符合设备的显示要求。

待编辑页面的设备可以是移动设备，也可以是家用电脑等设备。由此导致设备的操作系统、代码开发环境存在差异。例如，操作系统可以包括ios操作系统和android操作系统等。代码开发环境可以包括less和sass等预编译语言。

显示待编辑页面的设备的信息可以在页面编辑编码中获取，也可以通过预先提供设备的信息的选项的方式，根据接收到的设备的信息获取。

页面编辑服务器预置有元素导入工具，可以利用元素导入工具，根据设备的信息对结合后的代码进行转换，以满足利用转换后的结合的代码生成的页面符合设备的显示要求。

通过上述方案，可以实现设备自适应。可以直接生成适配显示待编辑页面的设备的页面代码，由此降低了页面编辑的难度。

在一种实施方式中，在对接收到的页面编辑编码进行解析之前，还可以包括以下步骤：

对页面编辑编码进行检测；

在检测结果出现错误的情况下，进行错误修正或报错处理。

对于页面编辑编码进行检测的目的在于查验是否出现错误。在出现错误的情况下，可以进行报错处理。以提示用户页面编辑编码出现错误。另外，还可以预先建立错误修正规则，在页面编辑编码的错误符合错误修正规则的情况下，可以依据错误修正规则对页面编辑编码进行修正。

通过上述方案，可以提高页面编辑编码的争取率。

在一种实施方式中，待编辑页面的页面元素包括：

细粒度元素；

由至少一种细粒度元素组成的组件元素；

由至少一种组件元素组成的区块元素；

由至少一种区块组成的卡片元素。

细粒度元素包括：字体、文本、图标、线条、字号、字形、颜色、阴影、边角、上下间距、左右间距、文本行间距中的至少一种；

组件元素包括：标签组件、按钮组件、图片组件、文字链、视频/图片复合组件、底板组件、头像复合组件和评分复合组件中的至少一种；

区块元素包括：标题区块、头部区块、正文区块和挂件区块中的至少一种；

卡片元素包括：单图卡片、多图卡片、多话题卡片、动态卡片、热门小组卡片、左图右文卡片、大图卡片和理财信息卡片中的至少一种。

上述页面元素与前述页面元素编码相对应。

如图6所示，本申请提供一种页面编辑的装置，该装置可以包括以下组件：

编码解析模块601，用于对接收到的页面编辑编码进行解析，得到解析结果；

待编辑页面元素确定模块602，用于确定与解析结果对应的待编辑页面以及待编辑页面的页面元素；

页面更新模块603，用于利用页面元素对待编辑页面进行更新。

在一种实施方式中，在页面编辑编码包括页面标识编码和页面元素编码的情况下，待编辑页面元素确定模块602可以进一步包括：

待编辑页面确定子模块，用于利用预先建立的对应关系，将与页面标识编码对应的页面确定为待编辑页面；

页面元素确定子模块，用于利用预先建立的对应关系，将与页面元素编码对应的页面元素确定为待编辑页面的页面元素。

在一种实施方式中，在页面编辑编码包括页面元素编码的情况下，待编辑页面元素确定模块602可以进一步包括：

页面元素确定子模块，用于利用预先建立的对应关系，将与页面元素编码对应的页面元素确定为待编辑页面的页面元素；

待编辑页面确定子模块，用于将包含页面元素的多个页面确定为待编辑页面。

在一种实施方式中，页面更新模块603可以进一步包括：

待编辑页面代码确定子模块，用于确定页面元素的代码以及待编辑页面的代码；

代码结合子模块，用于根据页面元素在待编辑页面的位置，将页面元素的代码与待编辑页面的代码相结合，得到结合代码。

在一种实施方式中，页面更新模块603还可以包括：

设备信息获取子模块，用于获取显示待编辑页面的设备的信息；

代码转换子模块，用于根据设备的信息，对结合代码进行转换，以使利用转换后的结合代码生成的页面符合设备的显示要求。

在一种实施方式中，页面编辑的装置还可以包括：

编码检测模块，用于对页面编辑编码进行检测；

错误处理模块，用于在检测结果出现错误的情况下，进行错误修正或报错处理。

根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

如图7所示，是根据本申请实施例的页面编辑的方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。

如图7所示，该电子设备包括：一个或多个处理器710、存储器720，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示gui的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图7中以一个处理器710为例。

存储器720即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的页面编辑的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的页面编辑的方法。

存储器720作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的页面编辑的方法对应的程序指令/模块(例如，附图6所示的编码解析模块601、待编辑页面元素确定模块602和页面更新模块603)。处理器710通过运行存储在存储器720中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的页面编辑的方法。

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

页面编辑的方法的电子设备还可以包括：输入装置730和输出装置740。处理器710、存储器720、输入装置730和输出装置740可以通过总线或者其他方式连接，图7中以通过总线连接为例。

输入装置730可接收输入的数字或字符信息，以及产生与页面编辑的方法的电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置740可以包括显示设备、辅助照明装置(例如，led)和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器(lcd)、发光二极管(led)显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。

此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用asic(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(pld))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入、或者触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决传统物理主机与虚拟专用服务器(vps)服务中，存在的管理难度大，业务扩展性弱的缺陷。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。