CN114036417A - 页面更新方法、装置、存储介质及电子设备 - Google Patents

Abstract

本公开涉及一种页面更新方法、装置、存储介质及电子设备。该方法包括：基于展示的页面组件树，获取用户对该页面组件树中目标节点的节点更新操作，该页面组件树用于表征目标页面的多个页面组件的关联关系，该页面组件树包括多个节点，不同的节点对应不同的该页面组件；根据该节点更新操作，变更该页面组件树；根据变更后的页面组件树，更新该多个页面组件，以更新该目标页面。这样，无需复杂的代码开发，通过页面组件树就可以对目标节点进行节点更新操作，通过该页面组件树可以清晰的展示页面组件的关联关系，例如页面组件的嵌套层次、同一层的相对位置排序等，可以方便用户操作，提升页面更新效率。

Description

页面更新方法、装置、存储介质及电子设备

技术领域

本公开涉及互联网技术领域，具体地，涉及一种页面更新方法、装置、存储介质及电子设备。

背景技术

随着互联网技术和智能终端技术的不断发展，手机APP应用越来越广泛，手机APP服务中，APP的页面经常需要更新，例如产品推广、海报宣传、客户引流等活动，都需要更新APP页面。在相关技术中，在进行APP页面更新时，大到一块业务逻辑，小到一个文字图片，都需要由开发人员根据业务需求修改页面代码，导致页面更新效率较低。

发明内容

本公开的目的是提供一种页面更新方法、装置、存储介质及电子设备，以解决相关技术中存在的上述问题。

为了实现上述目的，本公开的第一方面提供了一种页面更新方法，所述方法包括：

基于展示的页面组件树，获取用户对所述页面组件树中目标节点的节点更新操作，所述页面组件树用于表征目标页面的多个页面组件的关联关系，所述页面组件树包括多个节点，不同的节点对应不同的所述页面组件；

根据所述节点更新操作，变更所述页面组件树；

根据变更后的页面组件树，更新所述多个页面组件，以更新所述目标页面。

可选地，所述节点更新操作包括节点拖拽操作，所述目标节点包括第一候选节点和第二候选节点；所述根据所述节点更新操作，变更所述页面组件树，包括：

获取所述节点拖拽操作的移动轨迹，所述移动轨迹包括起始位置点和结束位置点；

根据所述起始位置点确定所述节点拖拽操作选中的第一候选节点，根据所述结束位置点确定所述节点拖拽操作对应的第二候选节点；

根据所述移动轨迹，变更所述第一候选节点和/或所述第二候选节点在所述页面组件树中的目标位置，以变更所述页面组件树。

可选地，所述根据所述移动轨迹，变更所述第一候选节点和/或所述第二候选节点在所述页面组件树中的目标位置，包括：

根据所述移动轨迹，确定所述拖拽操作的最大水平移动距离；所述最大水平移动距离为所述移动轨迹中的所有位置点与所述起始位置点的水平位移的最大值；

在所述最大水平移动距离大于或等于预设水平移动阈值的情况下，将所述第一候选节点作为所述第二候选节点的下级组件节点。

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

在所述最大水平移动距离小于所述预设水平移动距离的情况下，将所述第一候选节点作为所述第二候选节点之后的同级组件节点。

可选地，所述节点更新操作包括节点点击操作，所述目标节点包括第三候选节点；所述根据所述节点更新操作，变更所述页面组件树包括：

在接收到用户针对所述第三候选节点的所述节点点击操作的情况下，展示多个子操作选项，以便用户根据展示的所述多个子操作选项选择目标子操作选项；

根据用户选择的所述目标子操作选项，对所述第三候选节点进行所述目标子操作选项对应的目标操作，以变更所述页面组件树。

可选地，所述多个子操作选项包括复制操作或删除操作；所述根据用户选择的所述目标子操作选项，对所述第三候选节点进行所述目标子操作选项对应的目标操作，包括：

在所述目标子操作选项为所述复制操作的情况下，将所述第三候选节点复制得到第四候选节点，并将该第四候选节点作为所述页面组件树中与所述第三候选节点同级的下一个节点；或者，

在所述目标子操作选项为所述删除操作的情况下，将所述第三候选节点从所述页面组件树中删除。

可选地，在所述更新所述多个页面组件之后，所述方法还包括：

通过页面展示区展示更新后的目标页面。

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

通过基础组件区展示预设基础组件；

获取用户将所述预设基础组件拖拽至所述页面组件树的节点增加操作；

根据所述节点增加操作，变更所述页面组件树，并更新所述目标页面。

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

通过组件属性设置区展示目标组件的组件属性；

获取用户通过所述组件属性设置区对所述目标组件的属性修改操作；

根据所述属性修改操作，修改该目标组件的组件属性，并更新所述目标页面。

第二方面，本公开提供一种页面更新装置，所述装置包括：

操作获取模块，用于基于展示的页面组件树，获取用户对所述页面组件树中目标节点的节点更新操作，所述页面组件树用于表征目标页面的多个页面组件的关联关系，所述页面组件树包括多个节点，不同的节点对应不同的所述页面组件；

组件树变更模块，用于根据所述节点更新操作，变更所述页面组件树；

页面更新模块，用于根据变更后的页面组件树，更新所述多个页面组件，以更新所述目标页面。

可选地，所述节点更新操作包括节点拖拽操作，所述目标节点包括第一候选节点和第二候选节点；所述组件树变更模块，用于获取所述节点拖拽操作的移动轨迹，所述移动轨迹包括起始位置点和结束位置点；根据所述起始位置点确定所述节点拖拽操作选中的第一候选节点，根据所述结束位置点确定所述节点拖拽操作对应的第二候选节点；根据所述移动轨迹，变更所述第一候选节点和/或所述第二候选节点在所述页面组件树中的目标位置，以变更所述页面组件树。

可选地，所述组件树变更模块，用于根据所述移动轨迹，确定所述拖拽操作的最大水平移动距离；所述最大水平移动距离为所述移动轨迹中的所有位置点与所述起始位置点的水平位移的最大值；在所述最大水平移动距离大于或等于预设水平移动阈值的情况下，将所述第一候选节点作为所述第二候选节点的下级组件节点。

可选地，所述组件树变更模块，还用于在所述最大水平移动距离小于所述预设水平移动距离的情况下，将所述第一候选节点作为所述第二候选节点之后的同级组件节点。

可选地，所述节点更新操作包括节点点击操作，所述目标节点包括第三候选节点；所述组件树变更模块，用于在接收到用户针对所述第三候选节点的所述节点点击操作的情况下，展示多个子操作选项，以便用户根据展示的所述多个子操作选项选择目标子操作选项；根据用户选择的所述目标子操作选项，对所述第三候选节点进行所述目标子操作选项对应的目标操作，以变更所述页面组件树。

可选地，所述多个子操作选项包括复制操作或删除操作；所述组件树变更模块，用于在所述目标子操作选项为所述复制操作的情况下，将所述第三候选节点复制得到第四候选节点，并将该第四候选节点作为所述页面组件树中与所述第三候选节点同级的下一个节点；或者，在所述目标子操作选项为所述删除操作的情况下，将所述第三候选节点从所述页面组件树中删除。

可选地，所述装置还包括：

页面展示模块，用于通过页面展示区展示更新后的目标页面。

可选地，所述装置还包括：

基础组件模块，用于通过基础组件区展示预设基础组件；获取用户将所述预设基础组件拖拽至所述页面组件树的节点增加操作；根据所述节点增加操作，变更所述页面组件树，并更新所述目标页面。

可选地，所述装置还包括：

组件属性设置模块，用于通过组件属性设置区展示目标组件的组件属性；获取用户通过所述组件属性设置区对所述目标组件的属性修改操作；根据所述属性修改操作，修改该目标组件的组件属性，并更新所述目标页面。

第三方面，本公开提供一种非临时性计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本公开第一方面所述方法的步骤。

第四方面，本公开提供一种电子设备，包括：存储器，其上存储有计算机程序；处理器，用于执行所述存储器中的所述计算机程序，以实现本公开第一方面所述方法的步骤。

采用上述技术方案，基于展示的页面组件树，获取用户对该页面组件树中目标节点的节点更新操作，该页面组件树用于表征目标页面的多个页面组件的关联关系，该页面组件树包括多个节点，不同的节点对应不同的该页面组件；根据该节点更新操作，变更该页面组件树；根据变更后的页面组件树，更新该多个页面组件，以更新该目标页面。这样，无需复杂的代码开发，通过页面组件树就可以对目标节点进行节点更新操作，通过该页面组件树可以清晰的展示页面组件的关联关系，例如页面组件的嵌套层次、同一层的相对位置排序等，可以方便用户操作，提升页面更新效率。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

图1是本公开实施例提供的一种页面更新方法的流程图。

图2是本公开实施例提供的一种页面组件树和目标页面的示意图。

图3是根据图1所示实施例示出的一种S102步骤的流程图。

图4是本公开实施例提供的一种提供该页面更新方法的操作界面的示意图。

图5是本公开实施例提供的一种页面更新装置的结构示意图。

图6是本公开实施例提供的第二种页面更新装置的结构示意图。

图7是本公开实施例提供的第三种页面更新装置的结构示意图。

图8是本公开实施例提供的第四种页面更新装置的结构示意图。

图9是本公开实施例提供的一种电子设备的框图。

具体实施方式

以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。

需要说明的是，在本公开中，“第一”、“第二”等词汇，仅用于区分描述的目的，而不能理解为指示或暗示相对重要性，也不能理解为指示或暗示顺序；术语“S101”、“S102”、“S201”、“S202”等用于区别步骤，而不必理解为按照特定的顺序或先后次序执行方法步骤；下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。

首先，对本公开的应用场景进行说明。本公开可以应用于页面更新场景。在相关技术中，在进行APP页面更新时，大到一块业务逻辑，小到一个文字图片，都需要由开发人员根据业务需求修改页面代码。由于页面更新需求的提出者往往是市场人员或运营人员，而页面更新的工作需要由开发人员完成，因此，在这个过程中，需要开发人员理解市场人员或运营人员的具体需求，不断摸索和调整，可能需要多次交互才能得到符合需求的页面。这样，使得页面更新效率较低，无法快速满足相关的业务需求。

为了解决上述问题，本公开提供了一种页面更新方法、装置、存储介质及电子设备，引入页面组件树，利用树状结构清晰的特点，可以向用户清晰的展示目标页面的结构，并通过页面组件树上的节点更新操作，可以降低了页面更新操作难度，方便用户操作，提高页面更新效率。

以下结合附图对本公开的具体实施方式进行详细说明。

图1是本公开实施例提供的一种页面更新方法，如图1所示，该方法可以包括：

S101、基于展示的页面组件树，获取用户对该页面组件树中目标节点的节点更新操作。

其中，该页面组件树用于表征目标页面的多个页面组件的关联关系，该页面组件树包括多个节点，不同的节点对应不同的该页面组件。

S102、根据该节点更新操作，变更该页面组件树。

S103、根据变更后的页面组件树，更新该多个页面组件，以更新该目标页面。

示例地，图2是本公开实施例提供的一种页面组件树和目标页面的示意图，如图2所示，该页面组件树10可以包括多个节点，不同的节点对应目标页面20中的不同的页面组件，从而可以通过该页面组件树表征多个页面组件的关联关系。该页面组件树可以包括以下第一层子节点：“单图1”、“轮播图”、“倒计时组件”、“Tabs容器”和“回到顶部”，上述第一层子节点对应的页面组件可以在目标页面中按照该页面组件树中的子节点顺序从上到下排列，例如页面组件树中的子节点“单图1”对应目标页面中的第一页面组件21；页面组件树中的子节点“轮播图”对应目标页面中的第二页面组件22；页面组件树中的子节点“倒计时组件”对应目标页面中的第三页面组件23；页面组件树中的子节点“Tabs容器”对应目标页面中的第四页面组件24；页面组件树中的子节点“回到顶部”对应目标页面中的第五页面组件25。这样，通过该第一层子节点对应的多个页面组件，可以组成该目标页面。

进一步地，在“Tabs容器”节点可以包括以下第二层子节点：“TabPane容器1”、“TabPane容器2”和“TabPane容器3”；该三个第二层子节点对应的页面组件嵌套在Tabs容器下，如图2中所示的第四页面组件的“商品”、“市场”和“个人中心”三个页签。在“TabPane容器1”节点下可以包括第三层子节点“单图2”，该“单图2”子节点对应的页面组件可以是图中所示的图片，在“TabPane容器2”节点下可以包括第三层子节点“富文本”，该“富文本”子节点对应的页面组件可以在用户点击第四页面组件的“市场”页签时显示。这样，上述不同的节点可以对应目标页面中不同的页面组件，通过多个页面组件可以构成目标页面。

在本实施例中，可以向用户展示该页面组件树，并获取用户基于该页面组件树对目标节点进行的节点更新操作。该节点更新操作可以包括节点拖拽操作或节点点击操作，根据节点拖拽操作或节点点击操作，可以变更页面组件树；并根据变更后的页面组件树，对目标节点对应的页面组件进行移动、删除或复制，以更新目标页面。

采用上述方法，基于展示的页面组件树，获取用户对该页面组件树中目标节点的节点更新操作，该页面组件树用于表征目标页面的多个页面组件的关联关系，该页面组件树包括多个节点，不同的节点对应不同的该页面组件；根据该节点更新操作，变更该页面组件树；根据变更后的页面组件树，更新该多个页面组件，以更新该目标页面。这样，无需复杂的代码开发，通过页面组件树就可以对目标节点进行节点更新操作，通过该页面组件树可以清晰的展示页面组件的关联关系，例如页面组件的嵌套层次、同一层的相对位置排序等，可以方便用户操作，提升页面更新效率。

图3是根据图1所示实施例示出的一种S102步骤的流程图，如图3所示，上述节点更新操作可以包括节点拖拽操作，该目标节点可以包括第一候选节点和第二候选节点；上述S102步骤可以包括以下步骤：

S1021、获取节点拖拽操作的移动轨迹。

该移动轨迹包括起始位置点和结束位置点。

示例地，该节点拖拽操作可以包括：用户通过鼠标或触摸组件，在第一目标位置按下；然后保持鼠标或触摸组件处于按下状态移动一端距离后，在第二目标位置松开该鼠标或触摸组件，以完成一次拖拽操作。其中，可以将上述第一目标位置作为该移动轨迹的起始位置点，将上述第二目标位置作为该移动轨迹的结束位置点。

S1022、根据移动轨迹的起始位置点确定该节点拖拽操作选中的第一候选节点，根据移动轨迹的结束位置点确定该节点拖拽操作对应的第二候选节点。

示例地，可以首先获取该页面组件树中每个节点的目标区域，然后将目标区域中包括该起始位置点的节点作为该第一候选节点，然后将目标区域中包括该结束位置点的节点作为该第二候选节点。

S1023、根据该移动轨迹，变更该第一候选节点和/或该第二候选节点在该页面组件树中的目标位置，以变更该页面组件树。

示例地，该S1023步骤可以包括以下步骤：

首先，根据该移动轨迹，确定该拖拽操作的最大水平移动距离。

其中，该最大水平移动距离为该移动轨迹中的所有位置点与该起始位置点的水平位移的最大值。

该最大水平移动距离可以用像素点的数目表示。可以将该页面组件树所在的区域划分为N*M个像素点，也就是水平方向上划分N个像素点，垂直方向上划分M个像素点，例如，可以划分为800*600个像素点，或者1920*768个像素点。这样可以根据像素点坐标系确定每个位置点的水平像素点和垂直像素点，可以计算得到该移动轨迹中的每个位置点的水平像素点与该起始位置点的水平像素点的差值的绝对值，可以将该多个差值的绝对值中的最大值作为该最大水平移动距离。

然后，根据该最大水平移动距离，变更该第一候选节点和/或该第二候选节点在该页面组件树中的目标位置。具体地，可以包括以下方式一或方式二：

方式一、在该最大水平移动距离大于或等于预设水平移动阈值的情况下，可以进行嵌套操作，该嵌套操作表征将该第一候选节点作为该第二候选节点的下级组件节点。

其中，该预设水平移动阈值也可以用像素点数目表示，例如可以是50个像素点。

进一步地，在通过方式一变更页面组件树后，可以根据变更后的页面组件树，更新目标页面中的多个页面组件，例如，可以将该第一候选节点对应的第一候选组件作为该第二候选节点对应的第二候选组件的下级页面组件，以更新目标页面。

方式二、在该最大水平移动距离小于该预设水平移动距离的情况下，可以进行平移操作，该平移操作表征将该第一候选节点作为该第二候选节点之后的同级组件节点。

例如，可以将该第一候选节点的目标位置移动至该第二候选节点之后，且作为该第二候选节点的同级组件节点。

进一步地，在通过方式二变更页面组件树后，可以根据变更后的页面组件树，更新目标页面中的多个页面组件，例如，可以将该第一候选节点对应的第一候选组件作为该第二候选节点对应的第二候选组件之后的同级页面组件，以更新目标页面。

这样，采用上述方式，可以通过节点拖拽操作调整节点间的关联关系，例如相对位置排序、嵌套关系等，从而可以在无需编写代码的情况下，方便地变更页面组件树，并根据该页面组件树更新目标页面。

在本公开的另一实施例中，该节点更新操作可以包括节点点击操作，该目标节点包括第三候选节点；上述S102步骤可以包括以下步骤：

首先，在接收到用户针对该第三候选节点的该节点点击操作的情况下，展示多个子操作选项，以便用户根据展示的该多个子操作选项选择目标子操作选项。

示例地，该多个子操作选项可以包括复制操作和/或删除操作。例如，可以通过浮动图标显示复制按钮和/或删除按钮。

然后，根据用户选择的该目标子操作选项，对该第三候选节点进行该目标子操作选项对应的目标操作，以变更该页面组件树。

示例地，在该目标子操作选项为该复制操作的情况下，将该第三候选节点复制得到第四候选节点，并将该第四候选节点作为该页面组件树中与该第三候选节点同级的下一个节点；或者，

在该目标子操作选项为该删除操作的情况下，将该第三候选节点从该页面组件树中删除。

同样地，在通过该方式变更页面组件树后，可以根据变更后的页面组件树，更新目标页面中的多个页面组件，例如，可以将该第三候选节点对应的第三候选组件删除，以更新目标页面。

这样，采用上述方式，可以通过节点拖拽操作调整节点间的关联关系，例如相对位置排序、嵌套关系等，从而可以在无需编写代码的情况下，方便地变更页面组件树，并根据该页面组件树更新目标页面。

进一步地，在更新目标页面中的多个页面组件之后，还可以通过页面展示区展示更新后的目标页面。

图4是本公开实施例提供的一种提供该页面更新方法的操作界面的示意图。如图4所示，该页面更新操作界面可以包括页面组件树10和目标页面20，该页面组件树可以位于页面设置区，该目标页面可以位于页面展示区，该页面设置区和该页面展示区可以为操作界面上的两个不同的区域；用户可以在页面设置区对页面组件树执行本公开上述实施例中的页面更新方法的步骤；然后在每次进行页面组件树变更时，可以同步更新目标页面，并在页面展示区中展示更新后的目标页面。

需要说明的是，通过页面展示区展示的目标页面可以与该页面发布后，终端用户所看到的实际页面相同，这样可以在通过页面组件树调整节点后，通过页面展示区方便及时地展示目标页面更新后的效果。

进一步地，如图4所示，该操作界面还可以包括基础组件30，该基础组件可以位于操作界面的基础组件区，可以根据用户操作指令，将用户选择的目标基础组件增加到目标页面中，并在目标组件树中增加该目标基础组件对应的节点。这样，该页面更新方法还可以包括以下步骤：

首先，通过基础组件区展示预设基础组件。

其次，获取用户将该预设基础组件拖拽至该页面组件树的节点增加操作。

最后，根据该节点增加操作，变更该页面组件树，并更新该目标页面。

示例地，该基础组件可以包括多个预先设置的候选基础组件，例如：单图、轮播图、视频组件、海报弹窗、倒计时组件、导航、城市选择、交易组件和容器组件等。

该节点增加操作可以是用户从基础组件区选择想要添加的目标基础组件，并拖拽到页面设置区；根据该节点增加操作，可以在页面组件树添加该目标基础组件对应的节点，并更新目标页面，在页面展示区可以展示增加该目标基础组件后的目标页面。

这样，通过该基础组件，可以方便用户添加新的组件，以生成新的目标页面或对目标页面进行更新。

可选地，上述基础组件可以预先通过原生JS(JavaScript)编程封装实现，在本公开的页面更新方法中，可以直接加入目标页面后使用，无需再次编写代码。

进一步地，如图4所示，该操作界面还可以包括组件属性设置区40，通过该组件属性设置区，可以对目标组件的属性进行设置或修改。这样，该页面更新方法还可以包括以下步骤：

首先，通过组件属性设置区展示目标组件的组件属性。

其次，获取用户通过该组件属性设置区对该目标组件的属性修改操作。

最后，根据该属性修改操作，修改该目标组件的组件属性，并更新该目标页面。

例如，在目标组件为单图的情况下，该目标组件的组件属性可以包括以下属性中的一个或多个：

该目标组件的组件标识，该组件标识可以是自动生成的，也可以用户手动修改；

组件间边距，该组件间边距用于表征该目标组件与相邻组件之间的距离。该组件间边距可以通过滑动条方式进行设置；

该目标组件对应的图片，该图片将在该目标组件的区域进行展示；

该目标组件的点击触发属性，该点击触发属性可以包括：无跳转、跳转链接、跳转位置、唤起分享和生成海报。

用户通过组件属性设置区，可以执行上述属性修改操作，从而对该目标组件的上述组件属性进行修改。

这样，通过该组件属性设置区，可以方便地对目标组件的属性进行设置或修改，并更新目标页面。

图5是本公开实施例提供的一种页面更新装置，如图5所示，该装置包括：

操作获取模块501，用于基于展示的页面组件树，获取用户对该页面组件树中目标节点的节点更新操作，该页面组件树用于表征目标页面的多个页面组件的关联关系，该页面组件树包括多个节点，不同的节点对应不同的该页面组件；

组件树变更模块502，用于根据该节点更新操作，变更该页面组件树；

页面更新模块503，用于根据变更后的页面组件树，更新该多个页面组件，以更新该目标页面。

可选地，该节点更新操作包括节点拖拽操作，该目标节点包括第一候选节点和第二候选节点；该组件树变更模块502，用于获取该节点拖拽操作的移动轨迹，该移动轨迹包括起始位置点和结束位置点；根据该起始位置点确定该节点拖拽操作选中的第一候选节点，根据该结束位置点确定该节点拖拽操作对应的第二候选节点；根据该移动轨迹，变更该第一候选节点和/或该第二候选节点在该页面组件树中的目标位置，以变更该页面组件树。

可选地，该组件树变更模块502，用于根据该移动轨迹，确定该拖拽操作的最大水平移动距离；该最大水平移动距离为该移动轨迹中的所有位置点与该起始位置点的水平位移的最大值；在该最大水平移动距离大于或等于预设水平移动阈值的情况下，将该第一候选节点作为该第二候选节点的下级组件节点。

可选地，该组件树变更模块502，还用于在该最大水平移动距离小于该预设水平移动距离的情况下，将该第一候选节点作为该第二候选节点之后的同级组件节点。

可选地，该节点更新操作包括节点点击操作，该目标节点包括第三候选节点；该组件树变更模块502，用于在接收到用户针对该第三候选节点的该节点点击操作的情况下，展示多个子操作选项，以便用户根据展示的该多个子操作选项选择目标子操作选项；根据用户选择的该目标子操作选项，对该第三候选节点进行该目标子操作选项对应的目标操作，以变更该页面组件树。

可选地，该多个子操作选项包括复制操作或删除操作；该组件树变更模块502，用于在该目标子操作选项为该复制操作的情况下，将该第三候选节点复制得到第四候选节点，并将该第四候选节点作为该页面组件树中与该第三候选节点同级的下一个节点；或者，在该目标子操作选项为该删除操作的情况下，将该第三候选节点从该页面组件树中删除。

图6是本公开实施例提供的第二种页面更新装置的结构示意图，如图6所示，该装置还包括：

页面展示模块601，用于通过页面展示区展示更新后的目标页面。

图7是本公开实施例提供的第三种页面更新装置的结构示意图，如图7所示，该装置还包括：

基础组件模块602，用于通过基础组件区展示预设基础组件；获取用户将该预设基础组件拖拽至该页面组件树的节点增加操作；根据该节点增加操作，变更该页面组件树，并更新该目标页面。

图8是本公开实施例提供的第四种页面更新装置的结构示意图，如图8所示，该装置还包括：

组件属性设置模块603，用于通过组件属性设置区展示目标组件的组件属性；获取用户通过该组件属性设置区对该目标组件的属性修改操作；根据该属性修改操作，修改该目标组件的组件属性，并更新该目标页面。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

采用上述装置，基于展示的页面组件树，获取用户对该页面组件树中目标节点的节点更新操作，该页面组件树用于表征目标页面的多个页面组件的关联关系，该页面组件树包括多个节点，不同的节点对应不同的该页面组件；根据该节点更新操作，变更该页面组件树；根据变更后的页面组件树，更新该多个页面组件，以更新该目标页面。这样，无需复杂的代码开发，通过页面组件树就可以对目标节点进行节点更新操作，通过该页面组件树可以清晰的展示页面组件的关联关系，例如页面组件的嵌套层次、同一层的相对位置排序等，可以方便用户操作，提升页面更新效率。

图9是根据一示例性实施例示出的一种电子设备700的框图。如图9所示，该电子设备700可以包括：处理器701，存储器702。该电子设备700还可以包括多媒体组件703，输入/输出(I/O)接口704，以及通信组件705中的一者或多者。

其中，处理器701用于控制该电子设备700的整体操作，以完成上述的页面更新方法中的全部或部分步骤。存储器702用于存储各种类型的数据以支持在该电子设备700的操作，这些数据例如可以包括用于在该电子设备700上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等。该存储器702可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件703可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器702或通过通信组件705发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口704为处理器701和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件705用于该电子设备700与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(Near FieldCommunication，简称NFC)，2G、3G、4G、5G、NB-IOT、eMTC、或其他6G等，或它们中的一种或几种的组合，在此不做限定。因此相应的该通信组件705可以包括：Wi-Fi模块，蓝牙模块，NFC模块等。

在一示例性实施例中，电子设备700可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的页面更新方法。

在另一示例性实施例中，还提供了一种包括程序指令的非临时性计算机可读存储介质，该程序指令被处理器执行时实现上述的页面更新方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器702，上述程序指令可由电子设备700的处理器701执行以完成上述的页面更新方法。

在另一示例性实施例中，还提供一种计算机程序产品，该计算机程序产品包含能够由可编程的装置执行的计算机程序，该计算机程序具有当由该可编程的装置执行时用于执行上述页面更新方法的代码部分。

以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，可以对本公开的技术方案进行多种简单变型，这些简单变型均属于本公开的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本公开对各种可能的组合方式不再另行说明。

此外，本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。

Claims (12)

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

基于展示的页面组件树，获取用户对所述页面组件树中目标节点的节点更新操作，所述页面组件树用于表征目标页面的多个页面组件的关联关系，所述页面组件树包括多个节点，不同的节点对应不同的所述页面组件；

根据所述节点更新操作，变更所述页面组件树；

根据变更后的页面组件树，更新所述多个页面组件，以更新所述目标页面。

2.根据权利要求1所述的方法，其特征在于，所述节点更新操作包括节点拖拽操作，所述目标节点包括第一候选节点和第二候选节点；所述根据所述节点更新操作，变更所述页面组件树，包括：

获取所述节点拖拽操作的移动轨迹，所述移动轨迹包括起始位置点和结束位置点；

根据所述起始位置点确定所述节点拖拽操作选中的第一候选节点，根据所述结束位置点确定所述节点拖拽操作对应的第二候选节点；

根据所述移动轨迹，变更所述第一候选节点和/或所述第二候选节点在所述页面组件树中的目标位置，以变更所述页面组件树。

3.根据权利要求2所述的方法，其特征在于，所述根据所述移动轨迹，变更所述第一候选节点和/或所述第二候选节点在所述页面组件树中的目标位置，包括：

根据所述移动轨迹，确定所述拖拽操作的最大水平移动距离；所述最大水平移动距离为所述移动轨迹中的所有位置点与所述起始位置点的水平位移的最大值；

在所述最大水平移动距离大于或等于预设水平移动阈值的情况下，将所述第一候选节点作为所述第二候选节点的下级组件节点。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

在所述最大水平移动距离小于所述预设水平移动距离的情况下，将所述第一候选节点作为所述第二候选节点之后的同级组件节点。

5.根据权利要求1所述的方法，其特征在于，所述节点更新操作包括节点点击操作，所述目标节点包括第三候选节点；所述根据所述节点更新操作，变更所述页面组件树包括：

在接收到用户针对所述第三候选节点的所述节点点击操作的情况下，展示多个子操作选项，以便用户根据展示的所述多个子操作选项选择目标子操作选项；

根据用户选择的所述目标子操作选项，对所述第三候选节点进行所述目标子操作选项对应的目标操作，以变更所述页面组件树。

6.根据权利要求5所述的方法，其特征在于，所述多个子操作选项包括复制操作或删除操作；所述根据用户选择的所述目标子操作选项，对所述第三候选节点进行所述目标子操作选项对应的目标操作，包括：

在所述目标子操作选项为所述复制操作的情况下，将所述第三候选节点复制得到第四候选节点，并将该第四候选节点作为所述页面组件树中与所述第三候选节点同级的下一个节点；或者，

在所述目标子操作选项为所述删除操作的情况下，将所述第三候选节点从所述页面组件树中删除。

7.根据权利要求1至6中任一项所述的方法，其特征在于，在所述更新所述多个页面组件之后，所述方法还包括：

通过页面展示区展示更新后的目标页面。

8.根据权利要求7所述的方法，其特征在于，所述方法还包括：

通过基础组件区展示预设基础组件；

获取用户将所述预设基础组件拖拽至所述页面组件树的节点增加操作；

根据所述节点增加操作，变更所述页面组件树，并更新所述目标页面。

9.根据权利要求7所述的方法，其特征在于，所述方法还包括：

通过组件属性设置区展示目标组件的组件属性；

获取用户通过所述组件属性设置区对所述目标组件的属性修改操作；

根据所述属性修改操作，修改该目标组件的组件属性，并更新所述目标页面。

10.一种页面更新装置，其特征在于，所述装置包括：

操作获取模块，用于基于展示的页面组件树，获取用户对所述页面组件树中目标节点的节点更新操作，所述页面组件树用于表征目标页面的多个页面组件的关联关系，所述页面组件树包括多个节点，不同的节点对应不同的所述页面组件；

组件树变更模块，用于根据所述节点更新操作，变更所述页面组件树；

页面更新模块，用于根据变更后的页面组件树，更新所述多个页面组件，以更新所述目标页面。

11.一种非临时性计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至9中任一项所述方法的步骤。

12.一种电子设备，其特征在于，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1至9中任一项所述方法的步骤。

Images