CN114385162A - 页面编辑方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种页面编辑方法、装置、设备及存储介质，属于计算机技术领域。本申请实施例中，在得到编译文件后，直接根据编译文件对基础库中相关的实例进行替换，这样实例替换后，无需重新启动应用，即可自动对页面编辑界面所显示的页面进行更新，因而不会耗费很多时间，且不涉及到应用重启，直接在目标页面中显示组件更新，也就不涉及到页面跳转，或者从应用的主页面重新操作跳转至子页面等情况，减少了用户操作，编辑方法的效率得到了有效提升。

Description

页面编辑方法、装置、设备及存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种页面编辑方法、装置、设备及存储介质。

背景技术

随着计算机技术的发展，可以通过在网络应用中显示页面并在页面中显示一些组件，来展示一些内容，或者为用户提供一些功能入口或功能选项等。在将网络应用投入使用后，根据用户需求的改变，可能需要对页面中的组件进行编辑，对其内容、显示样式或功能等进行改变。

目前，页面编辑方法通常是由技术人员在更新了组件的页面文件后，调用编译工具编译页面文件，并缓存编辑文件，然后重新启动应用，在重启过程中，注入已经缓存的编译结果。

上述方法中，每当编辑组件时，均需要重启应用再注入以实现页面更新，耗时较长。且如果当前改变的组件位于该应用的子页面中，重启更新后，显示的页面为主页面，技术人员需要手动操作，再重新进入子页面，操作繁琐，编辑效率低。

发明内容

本申请实施例提供了一种页面编辑方法、装置、设备及存储介质，能够减少耗时，减少用户操作，提高效率。所述技术方案如下：

一方面，提供了一种页面编辑方法，所述方法包括：

响应于对页面编辑界面中显示的目标页面中第一组件的编辑操作，对包含所述第一组件的第一页面文件进行编辑处理，得到包含第二组件的第二页面文件；

对所述第二页面文件进行编译，得到所述第二页面文件的编译文件；

根据所述编译文件，将基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例；

根据替换后的实例，在所述页面编辑界面中所显示的所述目标页面中，显示所述第一组件更新为所述第二组件。

一方面，提供了一种页面编辑装置，所述装置包括：

编辑模块，用于响应于对页面编辑界面中显示的目标页面中第一组件的编辑操作，对包含所述第一组件的第一页面文件进行编辑处理，得到包含第二组件的第二页面文件；

编译模块，用于对所述第二页面文件进行编译，得到所述第二页面文件的编译文件；

替换模块，用于根据所述编译文件，将基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例；

显示模块，用于根据替换后的实例，在所述页面编辑界面中所显示的所述目标页面中，显示所述第一组件更新为所述第二组件。

在一些实施例中，所述替换模块包括生成单元和替换单元；

所述生成单元用于根据所述编译文件，生成所述第二页面文件对应的实例；

所述替换单元用于将所述基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例。

在一些实施例中，所述替换单元包括调用子单元、搜索子单元和替换子单元；

所述调用子单元用于调用所述基础库的节点更新接口；

所述搜索子单元用于基于所述节点更新接口，在所述基础库中搜索所述第一页面文件对应的实例；

所述替换子单元用于将搜索得到的实例替换为所述第二页面文件对应的实例。

在一些实施例中，所述搜索子单元用于基于所述节点更新接口，通过深度优先搜索，在所述基础库中搜索所述第一页面文件对应的实例。

在一些实施例中，所述节点更新接口携带有路径参数和内容参数；所述调用子单元用于将所述编译文件的路径赋给所述节点更新接口的路径参数，将所述编译文件赋给所述内容参数；

所述搜索子单元用于基于所述节点更新接口携带的所述路径参数，在所述基础库中搜索所述第一页面文件对应的实例；

所述替换子单元用于基于所述节点更新接口携带的所述内容参数，对搜索得到的实例进行替换。

在一些实施例中，所述生成单元用于根据所述编译文件，生成所述第二页面文件对应实例的节点树；

所述替换单元用于将所述基础库中所述第一页面文件对应实例的节点树中根节点下的所有直接子节点替换为所述第二页面文件对应实例的节点树中根节点下的所有直接子节点。

在一些实施例中，所述替换单元用于：

将所述基础库中所述第一页面文件对应实例的节点树中根节点下的所有直接子节点移除；

将所述第二页面文件对应实例的节点树中根节点下的所有直接子节点移动至所述第一页面文件对应实例的节点树中根节点下。

在一些实施例中，所述替换模块和显示模块用于响应于热重载功能处于开启状态，执行所述实例替换步骤和所述第一组件更新为所述第二组件的显示步骤。

在一些实施例中，所述装置还包括：

重启模块，用于响应于所述热重载功能处于关闭状态，重启当前应用，在重启过程中，将所述编译文件注入所述当前应用的基础库中。

在一些实施例中，所述编译模块用于调用视窗控制中心工具，对所述第二页面文件进行编译，得到所述第二页面文件的编译文件。

在一些实施例中，所述编译模块用于响应于对所述第二页面文件的存储指令，执行所述编译步骤，得到所述第二页面文件的编译文件。

在一些实施例中，所述装置还包括：

缓存模块，用于缓存所述编译文件。

一方面，提供了一种电子设备，所述电子设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条程序代码，所述至少一条程序代码由所述一个或多个处理器加载并执行以实现上述页面编辑方法的各种可选实现方式。

一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条程序代码，所述至少一条程序代码由处理器加载并执行以实现上述页面编辑方法的各种可选实现方式。

一个方面，提供了一种计算机程序产品或计算机程序，所述计算机程序产品或所述计算机程序包括一条或多条程序代码，所述一条或多条程序代码存储在计算机可读存储介质中。电子设备的一个或多个处理器能够从计算机可读存储介质中读取所述一条或多条程序代码，所述一个或多个处理器执行所述一条或多条程序代码，使得电子设备能够执行上述任一种可能实施方式的页面编辑方法。

本申请实施例中，在得到编译文件后，直接根据编译文件对基础库中相关的实例进行替换，这样实例替换后，无需重新启动应用，即可自动对页面编辑界面所显示的页面进行更新，因而不会耗费很多时间，且不涉及到应用重启，直接在目标页面中显示组件更新，也就不涉及到页面跳转，或者从应用的主页面重新操作跳转至子页面等情况，减少了用户操作，编辑方法的效率得到了有效提升。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还能够根据这些附图获得其他的附图。

图1是本申请实施例提供的一种页面编辑方法的实施环境的示意图；

图2是本申请实施例提供的一种页面编辑方法的流程图；

图3是本申请实施例提供的一种页面编辑方法的流程图；

图4是本申请实施例提供的一种热重载功能的功能开关控件的示意图；

图5是本申请实施例提供的一种页面编辑应用的页面编辑界面的示意图；

图6是本申请实施例提供的一种深度优先搜索的示意图；

图7是本申请实施例提供的一种实例替换过程的示意图；

图8是本申请实施例提供的一种页面编辑应用的页面编辑界面的示意图；

图9是本申请实施例提供的一种页面编辑方法的流程图；

图10是本申请实施例提供的一种页面编辑装置的结构示意图；

图11是本申请实施例提供的一种电子设备的结构示意图；

图12是本申请实施例提供的一种终端的结构框图；

图13是本申请实施例提供的一种服务器的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

本申请中术语“至少一个”的含义是指一个或多个，本申请中术语“多个”的含义是指两个或两个以上，例如，多个数据包是指两个或两个以上的数据包。

应理解，在本文中对各种所述示例的描述中所使用的术语只是为了描述特定示例，而并非旨在进行限制。如在对各种所述示例的描述和所附权利要求书中所使用的那样，单数形式“一个(“a”“an”)”和“该”旨在也包括复数形式，除非上下文另外明确地指示。

还应理解，本文中所使用的术语“和/或”是指并且涵盖相关联的所列出的项目中的一个或多个项目的任何和全部可能的组合。术语“和/或”，是一种描述关联对象的关联关系，表示能够存在三种关系，例如，A和/或B，能够表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本申请中的字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，在本申请的各个实施例中，各个过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

还应理解，根据A确定B并不意味着仅仅根据A确定B，还能够根据A和/或其它信息确定B。

还应理解，术语“包括”(也称“inCludes”、“inCluding”、“Comprises”和/或“Comprising”)当在本说明书中使用时指定存在所陈述的特征、整数、步骤、操作、元素、和/或部件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元素、部件、和/或其分组。

还应理解，术语“如果”可被解释为意指“当...时”(“when”或“upon”)或“响应于确定”或“响应于检测到”。类似地，根据上下文，短语“如果确定...”或“如果检测到[所陈述的条件或事件]”可被解释为意指“在确定...时”或“响应于确定...”或“在检测到[所陈述的条件或事件]时”或“响应于检测到[所陈述的条件或事件]”。

下面对本申请的实施环境进行说明。

图1是本申请实施例提供的一种页面编辑方法的实施环境的示意图。该实施环境包括终端101，或者该实施环境包括终端101和页面编辑平台102。终端101通过无线网络或有线网络与页面编辑平台102相连。

终端101能够是智能手机、游戏主机、台式计算机、平板电脑、电子书阅读器、MP3(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)播放器或MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器，膝上型便携计算机中的至少一种。终端101安装和运行有支持页面编辑的应用程序，例如，该应用程序能够是系统应用、页面编辑应用、即时通讯应用、新闻推送应用、购物应用、在线视频应用、社交应用。

示例性地，该终端101能够独立完成该工作，也能够通过页面编辑平台102为其提供数据服务。本申请实施例对此不作限定。

页面编辑平台102包括一台服务器、多台服务器、云计算平台和虚拟化中心中的至少一种。页面编辑平台102用于为支页面编辑的应用程序提供后台服务。可选地，页面编辑平台102承担主要处理工作，终端101承担次要处理工作；或者，页面编辑平台102承担次要处理工作，终端101承担主要处理工作；或者，页面编辑平台102或终端101分别能够单独承担处理工作。或者，页面编辑平台102和终端101两者之间采用分布式计算架构进行协同计算。

可选地，该页面编辑平台102包括至少一台服务器1021以及数据库1022，该数据库1022用于存储数据，在本申请实施例中，该数据库1022中能够存储编译文件或者页面的配置文件(例如，页面文件)，为至少一台服务器1021提供数据服务。

服务器能够是独立的物理服务器，也能够是多个物理服务器构成的服务器集群或者分布式系统，还能够是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端能够是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。

本领域技术人员能够知晓，上述终端101、服务器1021的数量能够更多或更少。比如上述终端101、服务器1021能够仅为一个，或者上述终端101、服务器1021为几十个或几百个，或者更多数量，本申请实施例对终端或服务器的数量和设备类型不加以限定。

图2是本申请实施例提供的一种页面编辑方法的流程图，该方法应用于电子设备中，该电子设备为终端或服务器，参见图2，该方法包括以下步骤。

201、电子设备响应于对页面编辑界面中显示的目标页面中第一组件的编辑操作，对包含该第一组件的第一页面文件进行编辑处理，得到包含第二组件的第二页面文件。

用户如果想要对目标页面中某个组件进行编辑，则可以对该组件进行编辑操作，电子设备检测到该编辑操作，即可根据编辑操作，对包含该组件的页面文件执行该编辑操作对应的编辑处理。

在此仅以“第一”“第二”来区分组件编辑前后的状态。本申请中术语“第一”“第二”等字样用于对作用和功能基本相同的相同项或相似项进行区分，应理解，“第一”、“第二”、“第n”之间不具有逻辑或时序上的依赖关系，也不对数量和执行顺序进行限定。还应理解，尽管以下描述使用术语第一、第二等来描述各种元素，但这些元素不应受术语的限制。这些术语只是用于将一元素与另一元素区别分开。在此将编辑前组件称为第一组件，该组件被编辑后则称之为第二组件。

202、电子设备对该第二页面文件进行编译，得到该第二页面文件的编译文件。

编译就是把高级语言变成计算机可以识别的二进制语言，计算机只认识1和0，编译程序把人们熟悉的语言换成二进制的语言。编译过程可以通过编译程序实现，编译程序把一个源程序翻译成目标程序的过程，其工作过程可分为五个阶段：词法分析；语法分析；语义检查和中间代码生成；代码优化；目标代码生成。目标代码也即是二进制的代码。其中词法分析和语法分析又称为源程序分析，在分析过程中，如果发现有语法错误，可以给出提示信息。因而，该编译过程还能够纠正源程序语言中的错误，以提示用户对其进行更正。

在该步骤304中，电子设备得到更新后的第二页面文件后，可以对其进行编译，将高级语言编译为计算机可识别的二进制语言，从而电子设备可以识别出第二页面文件的内容，鞥能够确定如何对基础库中的实例进行处理。

203、电子设备根据该编译文件，将基础库中该第一页面文件对应的实例替换为该第二页面文件对应的实例。

对于实例(instance)，在面向对象程序设计中，“类”在实例化之后叫做一个“实例”。“类”是静态的，不占进程内存，而“实例”拥有动态内存。在数据库中，实例代表一些程序的集合。如Oracle中，实例就是一些能支撑数据库运行的数据库程序。

在本实施例中，电子设备确定出需要更新的页面文件，则可以直接进行实例替换，实例替换了，那运行实例显示的内容则更新了。

204、电子设备根据替换后的实例，在该页面编辑界面中所显示的该目标页面中，显示该第一组件更新为该第二组件。

通过实例替换步骤，没有重新启动应用即实现了页面更新，节省了启动应用所需时间，另外，用户也可以实时获知编辑后的效果，能够提高编辑效率。

本申请实施例中，在得到编译文件后，直接根据编译文件对基础库中相关的实例进行替换，这样实例替换后，无需重新启动应用，即可自动对页面编辑界面所显示的页面进行更新，因而不会耗费很多时间，且不涉及到应用重启，直接在目标页面中显示组件更新，也就不涉及到页面跳转，或者从应用的主页面重新操作跳转至子页面等情况，减少了用户操作，编辑方法的效率得到了有效提升。

图3是本申请实施例提供的一种页面编辑方法的流程图，参见图3，该方法包括以下步骤。

301、电子设备响应于页面编辑应用的启动指令，显示页面编辑应用的页面编辑界面。

电子设备可以提供页面编辑应用，为用户提供页面编辑功能。如果用户想要对某个页面中组件进行编辑时，可以对页面编辑应用进行启动操作，电子设备接收到该启动操作触发的启动指令，可以启动该页面编辑应用，从而会在屏幕上显示该页面编辑应用的页面编辑界面。

在一种可能实现方式中，该页面编辑应用可以为开发者工具。该开发者工具用于开发者对应用的代码进行更新，对应用的组件进行编辑。例如，应用可以为小程序，开发者工具可以为小程序开发者工具。该小程序开发者工具用于帮助开发者简单和高效地开发和调试小程序。

本申请实施例提供的页面编辑方法中，能够提供一种热重载功能或热更新功能。应用该该热重载功能或热更新功能，能够在每次编辑应用中组件时无需重启应用即可实现代码更新，能够直接显示出页面更新情况。

对于该热重载功能或热更新功能，可以提供功能开关控件，该功能开关控件用于指示开启或关闭该热重载功能或热更新功能。用户可以根据自身的使用习惯，对该功能开关控件进行操作，以选择是否应用该热重载功能或热更新功能。具体地，电子设备可以响应于对该功能开关控件的开启指令，启用热重载功能，此时该热重载功能处于开启状态。电子设备也可以响应于对该功能开关控件的关闭指令，停用或关闭该热重载功能，此时该热重载功能处于关闭状态。

在一些实施例中，该热重载功能可以支持目标格式的文件，而不支持一些其他格式的文件。例如，该热重载功能可以支持json(JavaScript Object Notation，JS对象简谱)文件之外的文件，而不支持json文件，该目标格式等可以由相关技术人员根据需求进行设置，本申请实施例对此不作限定。

例如，如图4所示，电子设备可以在开发者工具的界面中提供一个热重载功能的功能开关控件401，功能开关控件401的显示内容可以为“启用代码自动热重载(不支持json文件，需页面编辑X及以上基础库版本)”。该界面可以为编辑界面，也可以在设置界面，本申请对此不作限定。在该功能开关控件401的周围区域可以提供状态指示项402，该状态指示项402显示为“√”时，说明该热重载功能处于开启状态，该状态指示项402显示为空时，说明热重载功能处于关闭状态。图4中示出了热重载功能处于开启状态的情况。

在该热重载功能的状态不同时，电子设备对页面文件编译后得到的编译文件的处理方式不同，具体可以参见下述步骤304，在此先不作过多赘述。

302、电子设备响应于对目标页面的显示操作，在页面编辑界面的预览显示区域显示该目标页面，并在该目标页面中显示该目标页面相应的组件。

用户如果想要对某个页面进行编辑时，可以先对该目标页面进行显示操作，使得在页面编辑界面的预览显示区域显示该目标页面，并在目标页面中显示相应的组件，这样用户能够基于预览显示的目标页面以及该目标页面中的组件，对组件进行编辑，进而电子设备对组件进行编辑处理后，能够再在目标页面中显示编辑后的组件。

例如，如图5所示，电子设备可以显示页面编辑应用的页面编辑界面501，在页面编辑界面501中的预览显示区域502中显示目标页面，在页面编辑界面501中还显示有该目标页面的页面文件503，该页面文件503可以包含多个组件的配置文件。在对某个配置文件进行编辑时，还能在页面编辑界面501中显示编辑内容504。

303、电子设备响应于对目标页面中第一组件的编辑操作，对该第一组件的第一页面文件进行编辑处理，得到第二组件的第二页面文件。

用户如果想要对目标页面中某个组件进行编辑，则可以对该组件进行编辑操作，电子设备检测到该编辑操作，即可根据编辑操作，对该组件的页面文件执行该编辑操作对应的编辑处理。在此仅以“第一”“第二”来区分组件编辑前后的状态。

例如，在一个具体示例中，第一组件为目标页面中的某个view(视图)标签，其内容为“wxml自动热重载”。本次编辑操作用于将第一组件的内容变更为“wxml自动热重载测试”，变更后，内容为“wxml自动热重载测试”的组件在此称为第二组件。

在一个具体示例中，当前应用为小程序，上述第一页面文件和第二页面文件为wxml文件。其中，wxml(WeiXin Markup Language)是小程序框架设计的一套标签语言，结合基础组件、事件系统，可以构建出小程序页面的结构。

304、电子设备响应于对该第二页面文件的存储指令，对该第二页面文件进行编译，得到该第二页面文件的编译文件。

在该步骤304中，电子设备得到更新后的第二页面文件后，可以对其进行编译，将高级语言编译为计算机可识别的二进制语言，从而电子设备可以识别出第二页面文件的内容，进而进行后续处理。例如，用户编辑得到第二页面文件后，保存该第二页面文件，进而能够触发电子设备对第二页面文件进行编译，以便于用编译结果去进行基础库中的实例替换，对第一组件相关的实例进行替换后，能够根据新的实例显示出编辑后的第二组件。

在一些实施例中，该编译过程可以通过编译工具实现。该编译工具可以为视窗控制中心工具。具体地，该步骤304中，电子设备调用视窗控制中心工具，对该第二页面文件进行编译，得到该第二页面文件的编译文件。其中，该视窗控制中心工具为wcc(WindowsControl Center，wincc)工具。是第一个使用最新的32位技术的过程监视系统，具有良好的开放性和灵活性。

在一个具体示例中，上述第一页面文件和第二页面文件为wxml文件，该编译文件可以为js(java script)文件。JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的高级编程语言。它可以作为开发Web((World Wide Web，全球广域网或万维网)页面的脚本语言，也可以作为其他非浏览器环境中的语言。JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。

该步骤304之后，电子设备还可以缓存该编译文件，后续根据编译文件进行实例替换和页面组件刷新显示的步骤时，可以从缓存数据中提取该编译文件。

该步骤304为对该第二页面文件进行编译，得到该第二页面文件的编译文件的过程，上述过程仅示出了在编辑得到第二页面文件后，存储该第二页面文件时触发编译步骤的情况，在一些实施例中，上述编译步骤也可以通过其他方式触发，在一种可能的实现方式中，可以为实时得到的页面文件进行编译。例如，在每次编辑操作结束后，均对编辑得到的页面文件进行编译。

电子设备可以响应于热重载功能处于开启状态，执行下述步骤305至步骤309。而如果热重载功能处于关闭状态，电子设备可以响应于该热重载功能处于关闭状态，重启当前应用，在重启过程中，将该编译文件注入该当前应用的基础库中。电子设备不再执行步骤305至步骤309。

305、电子设备调用该基础库的节点更新接口。

电子设备在确定了编辑操作处理后的第二页面文件，并将其编译称为计算机可识别的二进制文件，则可以对基础库中相应的数据进行更新，这样基础库中的数据为更新后的第二页面文件的数据，基于该基础库执行相应的程序得到的显示结果自然也就是编辑操作后的效果。

一般地，电子设备无法直接修改基础库，需要调用该基础库提供的接口来调用基础库中的数据，或对基础库中的数据进行修改。在本实施例中，基础库提供有节点更新接口，电子设备能够通过该节点更新接口对基础库中的节点进行更新。

在一些实施例中，该节点更新接口携带有路径参数和内容参数。相应地，该步骤305中，电子设备将该编译文件的路径赋给该节点更新接口的路径参数，将该编译文件赋给该内容参数。该路径参数用于指示需要更新的节点的路径，或者用于指示需要更新的节点在基础库中的位置。内容参数用于指示更新后的内容。这样电子设备调用该节点更新接口时，可以基于该节点更新接口向基础库传递数据，告知基础库需要更新的节点以及需要更新为哪些内容。在本实施例中，第一组件更新为第二组件了，电子设备需要对基础库中第一组件相关的实例进行更新，更新为第二组件相关的实例。

在一些实施例中，上述页面编辑方法可以应用于小程序场景中，目标页面为小程序中的页面，该节点更新接口可以为updateWxAppCode接口。

306、电子设备基于该节点更新接口，在该基础库中搜索该第一页面文件对应的实例。

电子设备调用该节点更新接口后，可以基于该节点更新接口向基础库传递数据。在本实施例中，第一组件更新为第二组件了，电子设备需要对基础库中第一组件相关的实例进行更新。电子设备可以根据页面文件的编译文件，将对应的实例进行替换，这样第一组件相关的实例更新为第二组件相关的实例。因而，在该步骤306中，电子设备可以基于该节点更新接口，在基础库中搜索需要替换的第一页面文件对应的实例，以便于对这些实例进行替换。

该搜索过程可以采用任一种搜索方式实现。在一些实施例中，该搜索过程采用DFS(Depth-First-Search，深度优先搜索)实现。具体地，电子设备基于该节点更新接口，通过深度优先搜索，在该基础库中搜索该第一页面文件对应的实例。对于DFS，深度优先搜索是一种在开发爬虫早期使用较多的方法。它的目的是要达到被搜索结构的叶节点(即那些不包含任何超链的HTML文件)。在一个超文本标记语言(Hyper Text Markup Language，HTML)文件中，当一个超链被选择后，被链接的HTML文件将执行深度优先搜索，即在搜索其余的超链结果之前完整地搜索单独的一条链。深度优先搜索沿着HTML文件上的超链走到不能再深入为止，然后返回到某一个HTML文件，再继续选择该HTML文件中的其他超链。当不再有其他超链可选择时，说明搜索已经结束。事实上，深度优先搜索属于图算法的一种。其过程简要来说是对每一个可能的分支路径深入到不能再深入为止，而且每个节点只能访问一次。举例说明：如图6所示，如果从A点发起深度优先搜索(以下的访问次序并不是唯一的，第二个点既可以是B，也可以是C，D)，则可能得到如下的一个访问过程：A->B->E(没有路了，回溯到A)->C->F->H->G->D(没有路，最终回溯到A，A也没有未访问的相邻节点，本次搜索结束)。

简要说明深度优先搜索的特点：每次深度优先搜索的结果必然是图的一个连通分量.深度优先搜索可以从多点发起。如果将每个节点在深度优先搜索过程中的"结束时间"排序(具体做法是创建一个list(列表)，然后在每个节点的相邻节点都已被访问的情况下，将该节点加入list结尾，然后逆转整个链表)，则我们可以得到所谓的"拓扑排序"，即topological sort。

当然，该搜索过程也可以采用其他方式，例如，广度优先搜索、A*算法、回溯算法、蒙特卡洛树搜索等，本申请实施例对此不作限定。

在该搜索过程中，能够搜索到该第一组件相关的所有实例，例如，第一组件的实例，使用该第一组件的其他组件的实例，或者使用该第一组件的其它页面的实例等。

在一些实施例中，在上述步骤305中节点更新接口携带有路径参数和内容参数的实现方式中，电子设备基于该节点更新接口携带的该路径参数，在该基础库中搜索该第一页面文件对应的实例。在该方式中，电子设备向基础库传递了第一页面文件的路径或第二页面文件的路径，能够在基础库中找到更新的是哪个组件，那么就可以找到该组件相关的实例。该第一页面文件的路径和第二页面文件的路径相同，也即是，电子设备将该路径的第一页面文件进行了修改，得到了第二页面文件，此时该路径上的页面文件为第二页面文件了。

307、电子设备根据该编译文件，生成该第二页面文件对应的实例。

电子设备编译得到新的编译文件后，需要用新的编译文件去替换原有的第一页面文件。对于这些组件，电子设备通常生成各种实例，将实例存储于基础库中，这样后续在对组件进行显示时，可以直接调用基础库中的实例，实现相应的显示或操作功能。

该步骤307中，电子设备生成实例的过程为实例化过程，实例化是指在面向对象的编程中，把用类创建对象的过程称为实例化。实例化过程是将一个抽象的概念类，具体到该类实物的过程。实例化过程中一般由类名对象名＝new类名(参数1，参数2...，参数n)构成。其中，n为大于2的整数。

在一些实施例中，上述实例可以为节点树的形式。每个组件均为一个节点。不同组件之间具有使用和被使用的关系，因而，节点之间具有关系，这样每个实例可以采用节点树的形式。相应地，该步骤307中，电子设备根据该编译文件，生成该第二页面文件对应实例的节点树。该节点树基于编译文件中各个组件之间的关系生成。

308、电子设备将搜索得到的实例替换为该第二页面文件对应的实例。

电子设备得到新的实例后，可以使用新的实例替换旧的实例。通过实例替换方式，无需重启当前应用，更无需重启后注入，而是通过上述节点更新接口，将新的实例传递给基础库进行替换即可实现页面更新。

在上述步骤307中实例以节点树的形式存储的实现方式中，电子设备将该基础库中该第一页面文件对应实例的节点树中根节点下的所有直接子节点替换为该第二页面文件对应实例的节点树中根节点下的所有直接子节点。

该替换过程可以先将原有的直接子节点移除，再将新生成的直接子节点移动过来。具体地，电子设备可以将该基础库中该第一页面文件对应实例的节点树中根节点下的所有直接子节点移除，将该第二页面文件对应实例的节点树中根节点下的所有直接子节点移动至该第一页面文件对应实例的节点树中根节点下。

例如，如图7中的(a)所示，以一个实例为例，在替换之前，该实例的shadowRoot下的所有直接子节点包括div标签、span标签和image标签。span标签被用来组合文档中的行内元素。shadowRoot为HTML中的一种接口。image标签定义HTML页面中的图像。替换时可以直接移除这些直接子节点，如图7中的(b)所示，替换后，shadowRoot下的所有直接子节点被直接替换为新的实例的所有直接子节点。新的直接子节点包括div标签、h1标签和div标签。

在上述步骤305中节点更新接口携带有路径参数和内容参数的实现方式中，电子设备基于该节点更新接口携带的该内容参数，对搜索得到的实例进行替换。

需要说明的是，上述步骤305至步骤308为根据该编译文件，将基础库中该第一页面文件对应的实例替换为该第二页面文件对应的实例的过程。其中，步骤305、306和步骤308为将该基础库中该第一页面文件对应的实例替换为该第二页面文件对应的实例的过程，该过程中步骤305和步骤306与上述步骤307的生成过程的执行顺序可以任意。也即是，电子设备可以按照上述执行顺序，先执行步骤305和步骤306，再执行步骤307。或者，电子设备也可以先执行该步骤307，再执行上述步骤305和步骤306。又或者步骤307，以及步骤305和步骤306同时执行，本申请实施例对此不作限定。

309、电子设备根据替换后的实例，在该页面编辑界面中所显示的该目标页面中，显示该第一组件更新为该第二组件。

电子设备将基础库中的实例替换后，可以执行实例，实现对目标页面的更新。原本目标页面中显示有第一组件，在更新后，该目标页面中显示第二组件。需要说明的是，在编辑前后，电子设备持续显示该页面编辑应用的页面编辑界面，该页面编辑界面均显示有该目标页面，只是编辑前后，该目标页面中的内容发生了更新。

例如，如图5和图8所示，电子设备可以显示页面编辑应用的编辑界面501，在编辑界面501中的预览显示区域502中显示目标页面，在编辑界面501中还显示有该目标页面的页面文件503，该页面文件503包含有多个组件的配置文件。在对某个组件的配置文件进行编辑时，还能在编辑界面501中显示编辑内容504。该页面文件503在被编辑前对应图5中的组件505，组件505的内容为“wxml自动热重载”。替换后，如图8所示，该组件505的内容被更新为“wxml自动热重载测试”。此时页面自动刷新，不会进行重启小程序的操作，此时页面还是在当前页面(也即是目标页面)。开发更加便利。

在一个具体示例中，如图9所示，上述页面编辑过程可以在开发者工具上实现，开发者工具中，默认情况下是不开启热重载的，当开发者勾选“启用代码自动热重载”之后，开发者工具才会开启热重载的逻辑，当开发者编辑完wxml代码之后，保存wxml文件，此时就会触发开发者工具的热重载逻辑。具体地，该页面编辑过程可以包括以下六个步骤。

步骤1.开发者在开发者工具开启“热重载”。

步骤2.开发者工具开始监听wxml代码变化。

步骤3.开发者修改wxml。

步骤4.开发者工具监听到wxml代码的变化，此时会做两件事，第一件事是对wxml进行编译，然后缓存编译结果。第二件事是调用基础库提供的updateWxAppCode接口来进行热更新。

该步骤1至步骤4中，开发者工具判断编辑和处理热更新的文件代码，使用wcc将wxml文件编译为js(JavaScript)文件，并且缓存编译结果。js是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。

步骤5.基础库收到updateWxAppCode调用，可以做两件事，第一件事是DFS找到所有页面中这个组件的所有实例。第二件事是用新的wxml生成的节点数实例替换旧实例。然后调用基础库提供的updateWxAppCode(PATH，CONTENT)接口来进行代码热更新，携带的参数为PATH和CONTENT，PATH表示wxml文件的地址，CONTENT表示wxml组件编译之后的内容。

步骤6.基础库更新实例之后，就可以在页面看到热更新的效果。

在小程序页面编辑场景中，当开发者工具完成wxml代码编译之后，将变更文件路径以及对应的编译结果传递给小程序基础库。基础库收到之后，直接清空页面或者组件的内部节点，然后根据新的wxml来重新组建内部的节点树，以此达到热更新的效果。通过该方案的实现，可以提高小程序开发者开发小程序的速度，让小程序开发者在进行代码编辑调试的过程中更加顺畅，提高开发效率。

本申请实施例中，在得到编译文件后，直接根据编译文件对基础库中相关的实例进行替换，这样实例替换后，无需重新启动应用，即可自动对页面编辑界面所显示的页面进行更新，因而不会耗费很多时间，且不涉及到应用重启，直接在目标页面中显示组件更新，也就不涉及到页面跳转，或者从应用的主页面重新操作跳转至子页面等情况，减少了用户操作，编辑方法的效率得到了有效提升。

上述所有可选技术方案，能够采用任意结合形成本申请的可选实施例，在此不再一一赘述。

图10是本申请实施例提供的一种页面编辑装置的结构示意图，参见图10，该装置包括：

编辑模块1001，用于响应于对页面编辑界面中显示的目标页面中第一组件的编辑操作，对包含该第一组件的第一页面文件进行编辑处理，得到包含第二组件的第二页面文件；

编译模块1002，用于对该第二页面文件进行编译，得到该第二页面文件的编译文件；

替换模块1003，用于根据该编译文件，将基础库中该第一页面文件对应的实例替换为该第二页面文件对应的实例；

显示模块1004，用于根据替换后的实例，在该页面编辑界面中所显示的该目标页面中，显示该第一组件更新为该第二组件。

在一些实施例中，该替换模块1003包括生成单元和替换单元；

该生成单元用于根据该编译文件，生成该第二页面文件对应的实例；

该替换单元用于将该基础库中该第一页面文件对应的实例替换为该第二页面文件对应的实例。

在一些实施例中，该替换单元包括调用子单元、搜索子单元和替换子单元；

该调用子单元用于调用该基础库的节点更新接口；

该搜索子单元用于基于该节点更新接口，在该基础库中搜索该第一页面文件对应的实例；

该替换子单元用于将搜索得到的实例替换为该第二页面文件对应的实例。

在一些实施例中，该搜索子单元用于基于该节点更新接口，通过深度优先搜索，在该基础库中搜索该第一页面文件对应的实例。

在一些实施例中，该节点更新接口携带有路径参数和内容参数；该调用子单元用于将该编译文件的路径赋给该节点更新接口的路径参数，将该编译文件赋给该内容参数；

该搜索子单元用于基于该节点更新接口携带的该路径参数，在该基础库中搜索该第一页面文件对应的实例；

该替换子单元用于基于该节点更新接口携带的该内容参数，对搜索得到的实例进行替换。

在一些实施例中，该生成单元用于根据该编译文件，生成该第二页面文件对应实例的节点树；

该替换单元用于将该基础库中该第一页面文件对应实例的节点树中根节点下的所有直接子节点替换为该第二页面文件对应实例的节点树中根节点下的所有直接子节点。

在一些实施例中，该替换单元用于：

将该基础库中该第一页面文件对应实例的节点树中根节点下的所有直接子节点移除；

将该第二页面文件对应实例的节点树中根节点下的所有直接子节点移动至该第一页面文件对应实例的节点树中根节点下。

在一些实施例中，该替换模块1003和显示模块1004用于响应于热重载功能处于开启状态，执行该实例替换步骤和该第一组件更新为该第二组件的显示步骤。

在一些实施例中，该装置还包括：

重启模块，用于响应于该热重载功能处于关闭状态，重启当前应用，在重启过程中，将该编译文件注入该当前应用的基础库中。

在一些实施例中，该编译模块1002用于调用视窗控制中心工具，对该第二页面文件进行编译，得到该第二页面文件的编译文件。

在一些实施例中，该编译模块1002用于响应于对该第二页面文件的存储指令，执行该编译步骤，得到该第二页面文件的编译文件。

在一些实施例中，该装置还包括：

缓存模块，用于缓存该编译文件。

本申请实施例中，在得到编译文件后，直接根据编译文件对基础库中相关的实例进行替换，这样实例替换后，无需重新启动应用，即可自动对页面编辑界面所显示的页面进行更新，因而不会耗费很多时间，且不涉及到应用重启，直接在目标页面中显示组件更新，也就不涉及到页面跳转，或者从应用的主页面重新操作跳转至子页面等情况，减少了用户操作，编辑方法的效率得到了有效提升。

需要说明的是：上述实施例提供的页面编辑装置在编辑页面时，仅以上述各功能模块的划分进行举例说明，实际应用中，能够根据需要而将上述功能分配由不同的功能模块完成，即将页面编辑装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的页面编辑装置与页面编辑方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图9是本申请实施例提供的一种电子设备的结构示意图，参见图9，该电子设备900可因配置或性能不同而产生比较大的差异，能够包括一个或一个以上处理器(CentralProcessing Units，CPU)901和一个或一个以上的存储器902，其中，该存储器902中存储有至少一条程序代码，该至少一条程序代码由该处理器901加载并执行以实现上述各个方法实施例提供的页面编辑方法。该电子设备还能够包括其他用于实现设备功能的部件，例如，该电子设备还能够具有有线或无线网络接口以及输入输出接口等部件，以便进行输入输出。本申请实施例在此不做赘述。

上述方法实施例中的电子设备能够实现为终端。例如，图12是本申请实施例提供的一种终端的结构框图。该终端1100可以是便携式移动终端，比如：智能手机、平板电脑、MP3(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)播放器、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1100还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端1100包括有：处理器1101和存储器1102。

处理器1101可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1101可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1101也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1101可以集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1101还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1102可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1102还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1102中的非暂态的计算机可读存储介质用于存储至少一个程序代码，该至少一个程序代码用于被处理器1101所执行以实现本申请中方法实施例提供的页面编辑方法。

在一些实施例中，终端1100还可选包括有：外围设备接口1103和至少一个外围设备。处理器1101、存储器1102和外围设备接口1103之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1103相连。具体地，外围设备包括：射频电路1104、显示屏1105、摄像头组件1106、音频电路1107、定位组件1108和电源1109中的至少一种。

外围设备接口1103可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器1101和存储器1102。在一些实施例中，处理器1101、存储器1102和外围设备接口1103被集成在同一芯片或电路板上；在一些其他实施例中，处理器1101、存储器1102和外围设备接口1103中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路1104用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1104通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1104将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1104包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1104可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1104还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏1105用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1105是触摸显示屏时，显示屏1105还具有采集在显示屏1105的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1101进行处理。此时，显示屏1105还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏1105可以为一个，设置在终端1100的前面板；在另一些实施例中，显示屏1105可以为至少两个，分别设置在终端1100的不同表面或呈折叠设计；在另一些实施例中，显示屏1105可以是柔性显示屏，设置在终端1100的弯曲表面上或折叠面上。甚至，显示屏1105还可以设置成非矩形的不规则图形，也即异形屏。显示屏1105可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-EmittingDiode，有机发光二极管)等材质制备。

摄像头组件1106用于采集图像或视频。可选地，摄像头组件1106包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件1106还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路1107可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1101进行处理，或者输入至射频电路1104以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端1100的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1101或射频电路1104的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1107还可以包括耳机插孔。

定位组件1108用于定位终端1100的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件1108可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源1109用于为终端1100中的各个组件进行供电。电源1109可以是交流电、直流电、一次性电池或可充电电池。当电源1109包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端1100还包括有一个或多个传感器1110。该一个或多个传感器1110包括但不限于：加速度传感器1111、陀螺仪传感器1112、压力传感器1113、指纹传感器1114、光学传感器1115以及接近传感器1116。

加速度传感器1111可以检测以终端1100建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器1111可以用于检测重力加速度在三个坐标轴上的分量。处理器1101可以根据加速度传感器1111采集的重力加速度信号，控制显示屏1105以横向视图或纵向视图进行用户界面的显示。加速度传感器1111还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器1112可以检测终端1100的机体方向及转动角度，陀螺仪传感器1112可以与加速度传感器1111协同采集用户对终端1100的3D动作。处理器1101根据陀螺仪传感器1112采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器1113可以设置在终端1100的侧边框和/或显示屏1105的下层。当压力传感器1113设置在终端1100的侧边框时，可以检测用户对终端1100的握持信号，由处理器1101根据压力传感器1113采集的握持信号进行左右手识别或快捷操作。当压力传感器1113设置在显示屏1105的下层时，由处理器1101根据用户对显示屏1105的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器1114用于采集用户的指纹，由处理器1101根据指纹传感器1114采集到的指纹识别用户的身份，或者，由指纹传感器1114根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器1101授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1114可以被设置在终端1100的正面、背面或侧面。当终端1100上设置有物理按键或厂商Logo时，指纹传感器1114可以与物理按键或厂商Logo集成在一起。

光学传感器1115用于采集环境光强度。在一个实施例中，处理器1101可以根据光学传感器1115采集的环境光强度，控制显示屏1105的显示亮度。具体地，当环境光强度较高时，调高显示屏1105的显示亮度；当环境光强度较低时，调低显示屏1105的显示亮度。在另一个实施例中，处理器1101还可以根据光学传感器1115采集的环境光强度，动态调整摄像头组件1106的拍摄参数。

接近传感器1116，也称距离传感器，通常设置在终端1100的前面板。接近传感器1116用于采集用户与终端1100的正面之间的距离。在一个实施例中，当接近传感器1116检测到用户与终端1100的正面之间的距离逐渐变小时，由处理器1101控制显示屏1105从亮屏状态切换为息屏状态；当接近传感器1116检测到用户与终端1100的正面之间的距离逐渐变大时，由处理器1101控制显示屏1105从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图12中示出的结构并不构成对终端1100的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

上述方法实施例中的电子设备能够实现为服务器。例如，图13是本申请实施例提供的一种服务器的结构示意图，该服务器1200可因配置或性能不同而产生比较大的差异，能够包括一个或一个以上处理器(Central Processing Units，CPU)1201和一个或一个以上的存储器1202，其中，该存储器1202中存储有至少一条程序代码，该至少一条程序代码由该处理器1201加载并执行以实现上述各个方法实施例提供的页面编辑方法。当然，该服务器还能够具有有线或无线网络接口以及输入输出接口等部件，以便进行输入输出，该服务器还能够包括其他用于实现设备功能的部件，在此不做赘述。

在示例性实施例中，还提供了一种计算机可读存储介质，例如包括至少一条程序代码的存储器，上述至少一条程序代码由可由处理器执行以完成上述实施例中的页面编辑方法。例如，计算机可读存储介质能够是只读存储器(Read-Only Memory，简称：ROM)、随机存取存储器(Random Access Memory，简称：RAM)、只读光盘(Compact Disc Read-OnlyMemory，简称：CD-ROM)、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序产品或计算机程序，该计算机程序产品或该计算机程序包括一条或多条程序代码，该一条或多条程序代码存储在计算机可读存储介质中。电子设备的一个或多个处理器能够从计算机可读存储介质中读取该一条或多条程序代码，该一个或多个处理器执行该一条或多条程序代码，使得电子设备能够执行上述页面编辑方法。

应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

应理解，根据A确定B并不意味着仅仅根据A确定B，还能够根据A和/或其它信息确定B。

本领域普通技术人员能够理解实现上述实施例的全部或部分步骤能够通过硬件来完成，也能够通过程序来指令相关的硬件完成，该程序能够存储于一种计算机可读存储介质中，上述提到的存储介质能够是只读存储器，磁盘或光盘等。

以上描述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (15)

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

响应于对页面编辑界面中显示的目标页面中第一组件的编辑操作，对包含所述第一组件的第一页面文件进行编辑处理，得到包含第二组件的第二页面文件；

对所述第二页面文件进行编译，得到所述第二页面文件的编译文件；

根据所述编译文件，将基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例；

根据替换后的实例，在所述页面编辑界面中所显示的所述目标页面中，显示所述第一组件更新为所述第二组件。

2.根据权利要求1所述的方法，其特征在于，所述根据所述编译文件，将基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例，包括：

根据所述编译文件，生成所述第二页面文件对应的实例；

将所述基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例。

3.根据权利要求2所述的方法，其特征在于，所述将所述基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例，包括：

调用所述基础库的节点更新接口；

基于所述节点更新接口，在所述基础库中搜索所述第一页面文件对应的实例；

将搜索得到的实例替换为所述第二页面文件对应的实例。

4.根据权利要求3所述的方法，其特征在于，所述基于所述节点更新接口，在所述基础库中搜索所述第一页面文件对应的实例，包括：

基于所述节点更新接口，通过深度优先搜索，在所述基础库中搜索所述第一页面文件对应的实例。

5.根据权利要求3所述的方法，其特征在于，所述节点更新接口携带有路径参数和内容参数；所述调用所述基础库的节点更新接口，包括：

将所述编译文件的路径赋给所述节点更新接口的路径参数，将所述编译文件赋给所述内容参数；

所述基于所述节点更新接口，在所述基础库中搜索所述第一页面文件对应的实例，包括：

基于所述节点更新接口携带的所述路径参数，在所述基础库中搜索所述第一页面文件对应的实例；

所述将搜索得到的实例替换为所述第二页面文件对应的实例，包括：

基于所述节点更新接口携带的所述内容参数，对搜索得到的实例进行替换。

6.根据权利要求2所述的方法，其特征在于，所述根据所述编译文件，生成所述第二页面文件对应的实例，包括：

根据所述编译文件，生成所述第二页面文件对应实例的节点树；

所述将所述基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例，包括：

将所述基础库中所述第一页面文件对应实例的节点树中根节点下的所有直接子节点替换为所述第二页面文件对应实例的节点树中根节点下的所有直接子节点。

7.根据权利要求6所述的方法，其特征在于，所述将所述基础库中所述第一页面文件对应实例的节点树中根节点下的所有直接子节点替换为所述第二页面文件对应实例的节点树中根节点下的所有直接子节点，包括：

将所述基础库中所述第一页面文件对应实例的节点树中根节点下的所有直接子节点移除；

将所述第二页面文件对应实例的节点树中根节点下的所有直接子节点移动至所述第一页面文件对应实例的节点树中根节点下。

8.根据权利要求1所述的方法，其特征在于，所述根据所述编译文件，将基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例；根据替换后的实例，在所述页面编辑界面中所显示的所述目标页面中，显示所述第一组件更新为所述第二组件，包括：

响应于热重载功能处于开启状态，执行所述实例替换步骤和所述第一组件更新为所述第二组件的显示步骤。

9.根据权利要求8所述的方法，其特征在于，所述对所述第二页面文件进行编译，得到所述第二页面文件的编译文件之后，所述方法还包括：

响应于所述热重载功能处于关闭状态，重启当前应用，在重启过程中，将所述编译文件注入所述当前应用的基础库中。

10.根据权利要求1所述的方法，其特征在于，所述对所述第二页面文件进行编译，得到所述第二页面文件的编译文件，包括：

调用视窗控制中心工具，对所述第二页面文件进行编译，得到所述第二页面文件的编译文件。

11.根据权利要求1所述的方法，其特征在于，所述对所述第二页面文件进行编译，得到所述第二页面文件的编译文件，包括：

响应于对所述第二页面文件的存储指令，执行所述编译步骤，得到所述第二页面文件的编译文件。

12.根据权利要求1所述的方法，其特征在于，所述对所述第二页面文件进行编译，得到所述第二页面文件的编译文件后，所述方法还包括：缓存所述编译文件。

13.一种页面编辑装置，其特征在于，所述装置包括：

编辑模块，用于响应于对页面编辑界面中显示的目标页面中第一组件的编辑操作，对包含所述第一组件的第一页面文件进行编辑处理，得到包含第二组件的第二页面文件；

编译模块，用于对所述第二页面文件进行编译，得到所述第二页面文件的编译文件；

替换模块，用于根据所述编译文件，将基础库中所述第一页面文件对应的实例替换为所述第二页面文件对应的实例；

显示模块，用于根据替换后的实例，在所述页面编辑界面中所显示的所述目标页面中，显示所述第一组件更新为所述第二组件。

14.一种电子设备，其特征在于，所述电子设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条程序代码，所述至少一条程序代码由所述一个或多个处理器加载并执行以实现如权利要求1至权利要求12任一项所述的页面编辑方法。

15.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条程序代码，所述至少一条程序代码由处理器加载并执行以实现如权利要求1至权利要求12任一项所述的页面编辑方法。

Images