CN114895901A - 一种页面处理方法、装置、存储介质和电子设备 - Google Patents

Abstract

本发明公开了一种页面处理方法、装置、存储介质和电子设备，其中方法包括：在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域；响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。本发明解决跨域通信的技术问题。能够在维护一套项目代码的情况下，实现跨域的运行于多种终端的项目都能正常运行，并在组件UI发生变化时，仅维护一处的项目代码即可。

Description

一种页面处理方法、装置、存储介质和电子设备

技术领域

本发明涉及网页处理领域，尤其是一种页面处理方法、装置、存储介质和电子设备。

背景技术

随着技术的发展，产生了多种能够用于执行项目的终端，为了满足不同用户的使用需求，对于同一项目，往往需要能够支持多种终端。例如，某平台是一个PC端项目，同时，为了满足移动终端使用需求，在移动终端展示的是一个移动端项目。用户在移动终端完成的具体的操作、功能，是根据用户在移动端项目配置的参数实现的。为了提高用户体验，在PC端的平台与在移动端的平台，其UI样式是一致的。

现有技术中维护PC端的平台与在移动端的平台的方法是，为了保证PC端与移动端的UI一致性，将PC端关于效果展示区域的代码，拷贝复制一份到移动端项目中，并在移动端UI展示基础上，根据运营平台配置的参数，具体去实现相关的业务逻辑。但现有技术的缺陷在于，涉及到多人开发或者业务需求更改时，如果某一组件UI进行修改或新增了组件，在没有同步更新移动端项目中的组件代码时，项目会报错出问题，而且在组件修改频繁的时候，由于PC端及移动端都需要对组件代码进行修改，还会对业务逻辑造成影响，可见，现有技术的解决方案存在较为明显的缺陷。

发明内容

有鉴于此，本发明提供了一种页面处理方法和装置，能够解决仅维护一处代码即实现跨域的不同终端的代码维护的技术问题。

本发明提供一种页面处理方法。所述方法包括：

在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域；

响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。

可选地，所述响应于用户在所述页面编辑区域的操作生成页面组件变更信息，包括：

在所述页面编辑区域展示页面组件树；

响应于用户对于页面组件树中页面组件的新增操作、删除操作或拖曳操作，生成页面组件变更信息。

可选地，所述响应于用户在所述页面编辑区域的操作生成页面组件变更信息，包括：

在所述页面编辑区域展示所选定的页面组件的组件属性；

响应于用户对于所述组件属性的属性修改操作，生成页面组件变更信息。

可选地，基于所述通知自动更新所述第一终端的页面所对应的页面展示代码。

可选地，使用webSocket或postMessage发送所述通知。

可选地，所述方法还包括：将更新后的代码发版上线。

可选地，所述第一终端是移动端，所述第二终端是PC端。

本发明提供一种页面处理装置。所述装置包括：

嵌入模块：配置为在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域；

更新模块：配置为响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。

本发明提供一种存储介质，所述存储介质中存储有多条指令；所述多条指令，用于由处理器加载并执行如前任一项所述方法。

本发明提供一种电子设备，所述电子设备，包括：

处理器，用于执行多条指令；

存储器，用于存储多条指令；

其中，所述多条指令，用于由所述存储器存储，并由所述处理器加载并执行如前任一项所述方法。

本发明在第二终端的页面的效果显示区域嵌入第一终端的页面，响应于用户在所述第一终端的页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。利用iframe及postMessage相互配合，解决跨域通信的技术问题。能够在维护一套项目代码的情况下，实现跨域的运行于多种终端的项目都能正常运行，并在组件UI发生变化时，仅维护一处的项目代码即可。例如，运营平台对应的PC端项目和移动端项目都能够正常运行，组件UI新增或修改时，只需维护一处即可。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

通过结合附图对本发明实施例进行更详细的描述，本发明的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1A是现有技术在移动终端展示的运营平台进行组件编辑的UI样式示意图。

图1B是现有技术在移动终端展示的运营平台的UI样式示意图。

图2是本发明一示例性实施例提供的方法的流程示意图。

图3本发明又一示例性实施例提供的方法的流程示意图。

图4是本发明一示例性实施例提供的装置的结构示意图。

图5是本发明一示例性实施例提供的电子设备的结构。

具体实施方式

下面，将参考附图详细地描述根据本发明的示例实施例。显然，所描述的实施例仅仅是本发明的一部分实施例，而不是本发明的全部实施例，应理解，本发明不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

本领域技术人员可以理解，本发明实施例中的“第一”、“第二”、“S1”、“S2”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本发明实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本发明实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本发明中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本发明中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本发明对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本发明实施例可以应用于终端设备、计算机***、服务器等电子设备，其可与众多其它通用或专用计算***环境或配置一起操作。适于与终端设备、计算机***、服务器等电子设备一起使用的众所周知的终端设备、计算***、环境和/或配置的例子包括但不限于：个人计算机***、服务器计算机***、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的***、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机***﹑大型计算机***和包括上述任何***的分布式云计算技术环境，等等。

终端设备、计算机***、服务器等电子设备可以在由计算机***执行的计算机***可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机***/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算***存储介质上。

示例性方法

以天眼神笔运营平台为例，天眼神笔运营平台是一个实时在线编辑页面的平台，该平台为用户提供了日常页面所需的各种组件，例如：单图、轮播图、导航、视频、按钮、海报等各种应用组件，同时还支持具有编辑功能的组件的事件交互，再根据UI设计图或者用户的构想，就可以通过类似拼图的方式，编辑完成一个H5页面。移动端用户在编辑页面的时候，可以实时在预览区域查看页面的展示效果，最后保存编辑配置，并将保存的配置发版上线，就可以在移动端查看编辑的页面了。

天眼神笔运营平台是一个PC端项目，在移动端也提供移动端项目，例如，在手机端展示该移动端项目。基于用户在移动端运营平台配置的参数，在移动端的运营平台上配置各种交互事件，例如，微信环境授权、用户、地理信息获取、埋点等事件。用户在移动端的各项操作，具体的功能实现是在移动端项目完成的。移动端项目与PC端项目相比，除交互事件外，如图1A、图1B所示，PC端项目对应的运营平台展示的UI样式与移动端项目对应的运营平台展示的UI样式是一致的。也存在在组件UI发生变化时，无法仅维护一处代码即实现跨域的不同终端的代码维护的问题。

为了解决以上问题，图2是本发明一示例性实施例提供的页面处理方法的流程示意图。本实施例可应用在电子设备上，如图2所示，包括以下步骤：

步骤S1，在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域。

所述第一终端是移动端，所述第二终端是PC端。所述第一终端页面包括效果显示区域和页面编辑区域，如图1A所示，所述第一终端页面分为三个区域，自左向右分别是第一页面编辑区域、效果展示区域、以及第二页面编辑区域。所述第一页面编辑区域用于显示页面组件树，用户可以在所述第一页面编辑区域选择、编辑所述组件树中的组件。所述第二页面编辑区域用于对从所述第一页面编辑区域选择、编辑的组件的属性进行设置、编辑，例如，所述第二页面编辑区域设置组件间边距、维度、文字颜色、页面背景等。所述第一页面编辑区域和所述第二页面编辑区域共同构成所述页面编辑区域。所述效果展示区域用于显示所述页面编辑区域的编辑效果。

所述第一终端页面及所述第二终端页面均对应有代码。本实施例中，移动端项目的页面是H5页面，即第5代Html(互联网超文本标记语言)，能够将互联网语义化，便于阅读，同时支持各类媒体的嵌入，提升用户体验。

以某运营平台为例，部署单套代码，该代码能够部署于PC端，提供该运营平台的全部功能。将所述代码进行功能拆分，在所述代码中实现显示功能的部分以iframe形式嵌入的移动端应用的页面，即在第二终端的页面的效果显示区域嵌入第一终端的页面。例如，将启动的移动端应用的H5页面直接以iframe形式嵌套于运营平台的效果显示区域，其效果在于：无需在运营平台开发效果显示的页面代码，在移动端应用的H5页面展示的内容，与部署于PC端的运营平台效果显示区域联动，在移动端应用的H5页面展示的内容，也显示于运营平台的效果显示区域，以此实现在PC端的运营平台效果显示区域展示的页面UI与移动端应用的H5页面UI一致。

步骤S2，响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。

所述响应于用户在所述页面编辑区域的操作生成页面组件变更信息，包括：在所述页面编辑区域展示页面组件树；响应于用户对于页面组件树中页面组件的新增操作、删除操作或拖曳操作，生成页面组件变更信息。

所述响应于用户在所述页面编辑区域的操作生成页面组件变更信息，包括：在所述页面编辑区域展示所选定的页面组件的组件属性；响应于用户对于所述组件属性的属性修改操作，生成页面组件变更信息。

用户对页面编辑区域的页面组件树进行新增操作、删除操作或拖曳操作时，均会生成页面组件变更信息。用户对选定的页面组件的组件属性进行编辑时，均会生成页面组件变更信息。

在日常开发、使用过程中，对研发人员、用户而言，不能同时开启两个相同的端口，移动端应用与PC端应用的启动端口也不一样，则移动端应用与PC端应用的页面之间，无法传递信息。同理，移动端项目与PC端项目的启动端口也不一样，移动端项目与PC端项目的页面之间，也无法传递信息。也就是说，生成的所述页面组件变更信息在移动端应用与PC端应用之间无法传递。例如，在移动端应用的H5页面与PC端运营平台开启的端口不一样，存在跨域问题，页面之间信息不能通信，无法进行数据传递。PC端运营平台和移动端应用的H5页面开启的端口不一样，页面之间信息不能通信，无法进行数据传递，为了保证新增、删除、拖拽、编辑组件属性(如位置、大小、颜色等)能够实时地在效果展示区显现出来，需要进行页面之间的信息数据的传递。

例如，在移动端应用的H5页面和PC端对运营平台功能进行页面加载，在页面加载完成后，运营平台新增了一个组件，由运营平台产生了页面组件变更信息，通过postMessage向所述移动端应用的H5页面发送一条新增组件的信息，postMessage是浏览器默认支持的API，支持页面跨域信息通信。所述移动端应用的H5页面根据全局监听message事件就能够获取到新增组件的信息，从而在所述移动端应用的H5页面进行相关业务逻辑处理，在所述移动端应用的H5页面显示出新增组件。所述移动端应用的H5页面通过postMessage向所述PC端的运营平台页面发送新增组件的信息，从而在所述PC端的运营平台页面进行相关业务逻辑处理，在所述PC端的运营平台显示出新增组件。实现在使用同一套代码的基础上，在跨域的多终端上，实现数据交互，使跨域的多终端具有同样的展示效果。

本发明的另一实现方式，由一个终端获取所述页面组件变更信息，该终端应用的页面通过postMessage将所述页面组件变更信息通知与所述终端跨域的其他多个终端。

本实施例中，使用webSocket或postMessage发送所述通知。跨域终端的页面通过postMessage进行信息数据传递。postMessage的实现方式为：postMessage(message，targetOrigin,[transfer])其中，message为发送传递的信息，targetOrigin为接收信息的页面的URL地址，transfer设为空，为后续利用或扩展留有接口。

本发明的另一实施方式，是由webSocket机制代替postMessage，进行跨域终端的页面之间的数据通信。与使用postMessage相比，使用webSocket机制的优点在于兼容性好，并且能够对隐秘的数据进行加密；缺点在于开发实现成本高，需要进行webSocket相关的服务的研发。

本发明通过iframe与PostMessage相结合的机制，实现了在PC端进行页面编辑，页面组件数据改变时，通过PostMessage将改变后的页面组件数据传递给H5页面项目，H5就可以根据最新改变后的数据进行页面的重新渲染，在PC端看到最新改变后的页面组件内容。也实现了在移动端H5页面项目进行页面编辑，页面组件数据改变时，通过PostMessage将改变后的页面组件数据传递给PC端，PC端根据最新改变后的数据进行页面的重新渲染。通过对页面dom的树状图进行编辑，从而改变效果展示区的页面显示。与现有技术的区别在于现有技术中，手机效果展示区相关业务逻辑展示是放在PC端的，相关功能开发完毕后，还需要拷贝一份到H5项目中，基于现有的展示样式基础上，进行相关的交互逻辑处理。但现在直接在H5项目中进行相关组件UI的开发展示及业务逻辑处理即可，通过iframe使H5页面可以在PC项目中展示，通过PostMessage进行PC、H5页面的数据交互，PC端无需进行相关页面组件展示的开发，仅维护一处代码即实现跨域的不同终端的代码维护。通过引入postMessage建立双向信息数据，减少了代码维护的成本，一套代码能够在跨域的不同终端使用。现有技术在PC端进行页面组件的展示，只是简单地展示相关的页面UI，但具体组件之间的交互，例如页面跳转、生成海报等都需要在H5项目进行开发，但通过此方案，可以在运营平台效果显示区展示的就是带有交互业务逻辑的H5页面，从而可以在PC页面编辑时，进行更细致的事件交互，而非简单的UI展示。

在所述步骤S2之后，还包括步骤S3：将更新后的代码发版上线。

图3是本发明一示例性实施例提供的页面处理方法的流程示意图。如图3所示，对于运营平台项目，由移动端与PC端公用同一套代码。所述方法包括以下步骤。

步骤S31:进行运营平台项目功能拆分，将移动端应用的H5页面以iframe形式嵌入所述代码的显示功能部分；

步骤S32：基于postMessage机制，在移动端应用的H5页面监听到代码发生更新的消息后，由移动端应用的H5页面进行逻辑处理；

步骤S33：由所述移动端应用的H5页面以postMessage将消息发送到PC端运营平台。

可选地，采用先将消息发送到PC端运营平台，再由PC端运营平台发送消息到移动端应用的H5页面的方式，即基于postMessage机制，在PC端运营平台监听到代码发生更新的消息后，由PC端运营平台的页面进行逻辑处理，再由PC端运营平台页面以postMessage将消息发送到所述移动端应用的H5页面。

步骤S34：代码更新配置；

步骤S35：将更新后的代码作为新版本的项目，进行项目发版。

示例性装置

图4是本发明一示例性实施例提供的页面处理装置的结构示意图。如图4所示，本实施例包括嵌入模块41及更新模块42：

嵌入模块：配置为在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域；

更新模块：配置为响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。

示例性电子设备

图5是本发明一示例性实施例提供的电子设备的结构。该电子设备可以是第一设备和第二设备中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。图5图示了根据本公开实施例的电子设备的框图。如图5所示，电子设备包括一个或多个处理器51和存储器52。

处理器51可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。

存储器52可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器51可以运行所述程序指令，以实现上文所述的本公开的各个实施例的页面处理的方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置53和输出装置54，这些组件通过总线***和/或其他形式的连接机构(未示出)互连。

此外，该输入装置53还可以包括例如键盘、鼠标等等。

该输出装置54可以向外部输出各种信息。该输出设备54可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图5中仅示出了该电子设备中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面处理方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面处理的方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于***实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、***的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、***。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (10)

1.一种页面处理方法，其特征在于，包括：

在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域；

响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。

2.如权利要求1所述的方法，其特征在于，所述响应于用户在所述页面编辑区域的操作生成页面组件变更信息，包括：

在所述页面编辑区域展示页面组件树；

响应于用户对于页面组件树中页面组件的新增操作、删除操作或拖曳操作，生成页面组件变更信息。

3.根据权利要求2所述的方法，其特征在于，所述响应于用户在所述页面编辑区域的操作生成页面组件变更信息，包括：

在所述页面编辑区域展示所选定的页面组件的组件属性；

响应于用户对于所述组件属性的属性修改操作，生成页面组件变更信息。

4.如权利要求1所述的方法，其特征在于，所述方法还包括：基于所述通知自动更新所述第一终端的页面所对应的页面展示代码。

5.如权利要求1或4所述的方法，其特征在于，使用webSocket或postMessage发送所述通知。

6.如权利要求4所述的方法，其特征在于，所述方法还包括：将更新后的代码发版上线。

7.如权利要求1所述的方法，其特征在于，所述第一终端是移动端，所述第二终端是PC端。

8.一种页面处理装置，其特征在于，包括：

嵌入模块：配置为在第二终端的页面的效果显示区域嵌入第一终端的页面，所述第二终端的页面包括效果显示区域和页面编辑区域；

更新模块：配置为响应于用户在所述页面编辑区域的操作生成页面组件变更信息，将所述页面组件变更信息形成通知并发送给所述第一终端，以使所述第一终端的页面基于所述页面组件变更信息同步执行变更。

9.一种计算机可读存储介质，所述存储介质中存储有多条指令；所述多条指令，用于由处理器加载并执行如权利要求1-7中任一项所述方法。

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

处理器，用于执行多条指令；

存储器，用于存储多条指令；

其中，所述多条指令，用于由所述存储器存储，并由所述处理器加载并执行如权利要求1-7中任一项所述方法。

Images