CN114116443A - 一种页面数据传递方法、装置、系统及介质 - Google Patents
一种页面数据传递方法、装置、系统及介质 Download PDFInfo
- Publication number
- CN114116443A CN114116443A CN202110763865.3A CN202110763865A CN114116443A CN 114116443 A CN114116443 A CN 114116443A CN 202110763865 A CN202110763865 A CN 202110763865A CN 114116443 A CN114116443 A CN 114116443A
- Authority
- CN
- China
- Prior art keywords
- page
- data
- message event
- preset
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 75
- 230000005540 biological transmission Effects 0.000 title claims abstract description 29
- 238000012544 monitoring process Methods 0.000 claims abstract description 37
- 230000000694 effects Effects 0.000 claims abstract description 25
- 230000004044 response Effects 0.000 claims abstract description 12
- 230000006870 function Effects 0.000 claims description 83
- 238000012546 transfer Methods 0.000 claims description 20
- 230000008569 process Effects 0.000 abstract description 19
- 230000008859 change Effects 0.000 abstract description 9
- 230000000007 visual effect Effects 0.000 description 21
- 238000011161 development Methods 0.000 description 8
- 238000004088 simulation Methods 0.000 description 7
- 238000010586 diagram Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 5
- 238000012795 verification Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 230000006854 communication Effects 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000010367 cloning Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3644—Software debugging by instrumenting at runtime
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/546—Message passing systems or structures, e.g. queues
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Debugging And Monitoring (AREA)
Abstract
本发明公开了一种页面数据传递方法、装置、系统及介质，方法包括：响应于对目标界面上已编辑页面的调试操作，在目标界面上嵌入预设子页面以展示已编辑页面的模拟运行效果；当预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，第一消息事件中包括待发送的运行数据；调用预设监听函数对第一消息事件进行监听，当监听到第一消息事件时，在目标观察页面更新第一消息事件中的运行数据。通过在调试已编辑页面的过程中，当运行数据发生变化时主动向目标观察页面发送直接包含了运行数据的消息事件，使得目标观察页面能实时监听并更新运行数据的变化，有效提高了应用程序调试时数据监听的效率与实时性。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种页面数据传递方法、装置、系统及介质。
背景技术
目前，当在APP(application，应用程序)编辑器中编辑了相应的APP用户界面后，往往需要模拟APP用户界面在相应平台上的运行效果，并根据模拟运行过程中的数据变化来进行功能调试。
现有的模拟运行数据获取方案，通常是采用函数document.getElementById('domId')来获取模拟运行时用户界面上的显示数据，若需要实时展示数据状态则需要加上定时器，进而不停的获取DOM(document object model，文档对象模型)元素的值。
即现有方案在对APP模拟运行的数据进行监听时，需要不停的进行DOM元素的查询与显示，性能消耗大且效率低，并且由于DOM元素更新显示内容比较耗时，监听数据时的更新也相应变慢，影响了调试时数据传递的实时性。
因此，现有技术还有待于改进和发展。
发明内容
鉴于上述现有技术的不足，本发明的目的在于提供一种页面数据传递方法、装置、系统及介质，旨在解决现有技术中应用程序调试时数据监听效率和实时性较差的问题。
本发明的技术方案如下：
一种页面数据传递方法，包括：
响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果；
当所述预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据；
调用预设监听函数对所述第一消息事件进行监听，当监听到所述第一消息事件时，在所述目标观察页面更新所述第一消息事件中的运行数据。
在一个实施例中，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果之前，还包括：
当所述已编辑页面的编辑数据发生变化时，调用预设消息发送函数向目标观察页面发送第二消息事件，所述第二消息事件中包括待发送的编辑数据；
调用预设监听函数对所述第二消息事件进行监听，当监听到所述第二消息事件时，在所述目标观察页面更新所述第二消息事件中的编辑数据。
在一个实施例中，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果之前，还包括：
响应于对目标界面上预设组件库和预设积木库的页面编辑操作，在所述目标界面上展示相应的已编辑页面。
在一个实施例中，所述页面数据传递方法还包括：
响应于对所述目标观察页面的数据编辑操作，调整所述目标观察页面中已接收数据的属性。
在一个实施例中，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果，包括：
响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入与所述调试操作中目标终端对应的Iframe子页面；
在所述Iframe子页面上展示所述已编辑页面在所述目标终端上的运行状态。
在一个实施例中，所述调用预设消息发送函数向目标观察页面发送第一消息事件，具体包括：
调用PostMessage函数向目标观察页面发送第一消息事件。
在一个实施例中，所述调用预设监听函数对所述第一消息事件进行监听，具体包括：
调用addEventListener函数对所述第一消息事件进行监听。
一种页面数据传递装置，包括：
调试模块，用于响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果；
第一消息发送模块，用于当所述预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据；
第一消息监听模块，用于调用预设监听函数对所述第一消息事件进行监听，当监听到所述第一消息事件时，在所述目标观察页面更新所述第一消息事件中的运行数据。
一种页面数据传递系统，所述系统包括至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述页面数据传递方法。
本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的页面数据传递方法。
有益效果：本发明公开了一种页面数据传递方法、装置、系统及介质，相比于现有技术，通过在调试已编辑页面的过程中，当运行数据发生变化时主动向目标观察页面发送直接包含了运行数据的消息事件，使得目标观察页面能实时监听并更新运行数据的变化，有效提高了应用程序调试时数据监听的效率与实时性。
附图说明
下面将结合附图及实施例对本发明作进一步说明，附图中：
图1为本发明实施例提供的页面数据传递方法的一个流程图；
图2为本发明实施例提供的页面数据传递方法中一个目标界面的示意图；
图3为本发明实施例提供的页面数据传递方法中一个预设子界面的示意图；
图4为本发明实施例提供的页面数据传递方法的另一个流程图；
图5为本发明实施例提供的页面数据传递方法中另一个目标界面的示意图；
图6为本发明实施例提供的页面数据传递方法中APP编辑器的一个页面结构框图；
图7为本发明实施例提供的页面数据传递装置的功能模块示意图；
图8为本发明实施例提供的页面数据传递系统的硬件结构示意图。
具体实施方式
为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。以下结合附图对本发明实施例进行介绍。
请参阅图1，图1为本发明提供的页面数据传递方法一个实施例的流程图。本实施例提供的页面数据传递方法适用于APP(application，应用程序)调试运行时数据监听传递的情况，具体应用于开发调试设备，该开发调试设备可以通过软件和/或硬件的方式实现APP的开发构建与调试等，可选应用于包括开发调试设备、网络和服务器构成的系统，其中网络为用于在开发调试设备和服务器之间提供通信链路的介质，其可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等；开发调试设备上的操作系统可以包括手持设备操作系统(iPhone operating system，iOS系统)、安卓系统、微软操作系统或其他操作系统，所述开发调试设备通过网络连接到服务器以实现交互，从而进行接收或发送数据等操作，具体可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、便携式计算机和台式服务器等等。
如图1所示，该方法具体包括如下步骤：
S101、响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果；
本实施例中，通过预先安装在PC端或移动终端上的APP编辑器进行APP编辑与调试操作，或者也可以通过网页浏览器跳转至指定链接后载入APP编辑器进行APP编辑与调试操作，本实施例以在网页浏览器使用APP编辑器为例进行介绍，实现基于web(world wideweb，全球广域网)的APP编辑与调试。
当用户跳转至指定链接后将加载APP编辑器，在所述APP编辑器中具有一个目标界面，可由用户在所述目标界面上进行APP用户界面的页面编辑操作，包括用户界面上UI(user interface，用户界面)组件的设计布局、样式调整以及UI组件的逻辑代码编辑等，本实施例中可以采用图形化编程的方式对UI组件的运行逻辑进行描述，有效提高了APP编辑的效率与便捷程度，进而在所述目标界面上得到具有相应逻辑功能的已编辑页面，即所述已编辑页面是具有相应交互功能的用户界面，当需要对所述已编辑页面进行功能调试时，可由用户对所述已编辑页面输入相应的调试操作，例如点击预设的调试按钮等，在所述目标界面上嵌入一预设子页面来模拟运行所述已编辑页面并展示模拟运行效果，实现高效便捷的页面运行效果预览。
进一步地，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果，包括：
响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入与所述调试操作中目标终端对应的Iframe子页面；
在所述Iframe子页面上展示所述已编辑页面在所述目标终端上的运行状态。
本实施例中，在触发所述已编辑页面的调试时，如图2和图3所示，当生成了所述已编辑页面后可进一步输入调试操作，例如可点击如图2中所述的“运行”按钮，同时，所述调试操作还进一步包括了目标终端，所述目标终端包括智能手机、平板电脑、便携式计算机等等，即在触发调试操作时可选择不同的目标终端，进而模拟所述已编辑页面在不同的目标终端上的界面效果。
具体将在所述目标界面上嵌入与所述目标终端对应的Iframe子页面，Iframe是一种HTML(hyper text markup language，超文本标记语言)标签，其作用是文档中的文档，或者浮动的框架(FRAME)，Iframe元素会创建包含另外一个文档的内联框架，如图3所示，当前调试操作中包括的目标终端为智能手机，当用户点击“运行”按钮后，则在目标界面上嵌入Iframe子页面并按智能手机的外观属性对该Iframe子页面进行渲染，并在所述Iframe子页面上展示所述已编辑页面在所述目标终端上的运行状态，从而通过所述Iframe子页面可以在APP编辑器中模拟已编辑页面在智能手机上的运行效果，实现对APP用户界面的直观高效的调试处理。
可以理解的是，Iframe子页面仅为一种可行的嵌入页面显示方式，还可采用其它的模拟运行显示方式，例如通过在目标界面上创建DIV(division，划分)容器来显示模拟运行效果，同样可实现已编辑页面的调试运行效果展示，本实施例对此不作限定
S102、当所述预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据；
当在预设子页面中模拟运行并展示所述已编辑页面的运行效果时，若所述预设子页面的运行数随着代码运行或者根据用户输入而发生变化时，则主动调用预设消息发送函数向目标观察页面发送第一消息事件，即所述目标界面还包括有目标观察页面(如图3所示的右侧区域，可以理解的是，目标观察页面的位置在屏幕的显示区域内即可，具体位置不做限定，如可以在左侧区域)，通过所述目标观察页面来展示所述预设子页面中的运行数据的实时变化，与现有方案中需不停的对预设子页面中的显示内容进行获取不同，本实施例中当模拟运行的预设子页面发生了数据变化时，主动调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据，即最新的实时运行数据，使得能及时且高效的将数据变化以消息事件的方式传递给目标观察页面，避免了大量无效数据查询，有效提高了应用程序调试时页面数据传递的效率。
具体地，调用PostMessage函数向目标观察页面发送第一消息事件，其中PostMessage函数是Windows API(application programming interface，应用程序接口)中的一个函数，用于将一个消息放入(寄送)到与指定窗口创建的线程相联系的消息队列里，不等待线程处理消息就返回，是异步消息模式，在HTML5中新增了PostMessage方法，PostMessage可以安全地实现跨源通信。本实施例中在预设子页面的运行数据发生变化时，主动调用PostMessage函数，将所述待发送的运行数据作为第一消息事件中的message参数，所述message参数代表将要发送到其它窗口的数据，将会被结构化克隆算法序列化即可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化，节约数据传递的处理过程；并且将所述目标观察页面的地址作为第一消息事件中的targetOrigin参数，所述targetOrigin参数用于指定哪些目标窗口能接收到该消息事件，其值可以是字符串”“(表示无限制)或者一个URL(uniform resource locator，统一资源定位器)，URL中包括了协议、主机地址和端口，在发送消息事件时，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送，确保消息事件传递的安全性，避免数据泄露等情况。
可以理解的是，PostMessage函数仅为一种可行的消息事件发送函数，在其它实施例中，还可采用其它的跨域消息发送方式，例如通过WebSocket协议进行消息事件的发送，同样可实现跨域消息的发送，本实施例对此不作限定。
S103、调用预设监听函数对所述第一消息事件进行监听，当监听到所述第一消息事件时，在所述目标观察页面更新所述第一消息事件中的运行数据。
当预设子页面在运行数据发生变化时调用预设消息发送函数向所述目标观察页面发送第一消息事件，所述目标观察页面则通过调用预设监听函数来对所述第一消息事件进行监听，当监听到所述第一消息事件时，则接收所述第一消息事件并解析得到所述第一消息事件中包含的运行数据，解析得到预设子页面传递过来的运行数据后，将其在所述目标观察页面同步更新并显示，实现高效且实时的数据监听过程。即本实施例中目标观察页面无需针对预设子页面中的原生的DOM元素不停的进行查询与更新，仅需调用预设监听函数捕获预设子页面发送的第一消息事件即可实现页面之间的高效数据传递过程，有效性提高了应用程序调试时数据监听的效率与实时性。
具体地，调用addEventListener函数对所述第一消息事件进行监听，其中addEventListener函数是一个可侦听事件并对事件进行相应处理的函数，通过将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行，EventTarget(事件目标)可以是一个文档上的元素Element，Document和Window或者任何其他支持事件的对象，通过调用addEventListener函数实现高效实时的数据监听。
可选地，本实施例中在调用了addEventListener函数监听到所述第一消息事件后，进一步对所述第一消息事件的来源属性进行验证，即在发送所述第一消息事件时通过message参数中的origin属性配置消息事件的来源属性，在接收消息时则对该来源属性进行验证，确认所述第一消息事件的来源属性是否为预设子页面，若是则验证成功，否则验证失败，在来源属性验证成功时则接收所述第一消息事件中的运行数据，将接收到的运行数据在所述目标观察页面上同步更新显示，确保数据来源的可靠性与安全性。
可以理解的是，addEventListener函数仅为一种可行的消息监听函数，在其它实施例中，还可采用其它的跨域消息监听与处理方式，例如通过WebSocket协议对消息事件的监听与数据接收，同样可实现跨域消息的接收处理，本实施例对此不作限定。
如图4所示，所述步骤S101之前，还可以包括：
S104、当所述已编辑页面的编辑数据发生变化时，调用预设消息发送函数向目标观察页面发送第二消息事件，所述第二消息事件中包括待发送的编辑数据；
S105、调用预设监听函数对所述第二消息事件进行监听，当监听到所述第二消息事件时，在所述目标观察页面更新所述第二消息事件中的编辑数据。
本实施例中，在对所述已编辑页面进行模拟调试之前，若所述已编辑页面的编辑数据例如与UI组件对应的变量、列表等数据根据用户的页面编辑操作发生变化时，同样主动调用预设消息发送函数向目标观察页面发送第二消息事件，所述第二消息事件中包括待发送的编辑数据，即最新的页面编辑数据，使得能及时且高效的将页面编辑的数据变化以消息事件的方式传递给目标观察页面，所述目标观察页面则通过调用预设监听函数来对所述第二消息事件进行监听，当监听到所述第二消息事件时，则接收所述第二消息事件并解析得到所述第二消息事件中包含的编辑数据，解析得到已编辑页面传递过来的编辑数据后，将其在所述目标观察页面同步更新并显示，即本实施例中不仅能针对页面调试中的数据变化进行及时传递，在页面编辑过程中同样实现了实时高效的数据传递与更新，为应用程序的编辑与调试提供了更加可靠及时的数据同步更新，为应用程序的开发与功能调试提供便利。
类似地，同样通过调用PostMessage函数向目标观察页面发送第二消息事件，并且通过调用addEventListener函数对所述第而消息事件进行监听，本实施例中在已编辑页面的编辑数据发生变化时，主动调用PostMessage函数，将所述待发送的编辑数据作为第二消息事件中的message参数，并且将所述目标观察页面的地址作为第二消息事件中的targetOrigin参数，所述targetOrigin参数用于指定哪些目标窗口能接收到该消息事件，其值可以是字符串”“(表示无限制)或者一个URL(uniform resource locator，统一资源定位器)，其包括了协议、主机地址和端口，在发送消息事件时，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送，确保消息事件传递的安全性，避免数据泄露等情况。
并且，本实施例中在调用了addEventListener函数监听到所述第二消息事件后，进一步对所述第二消息事件的来源属性进行验证，即在发送所述第二消息事件时通过message参数中的origin属性配置消息事件的来源属性，在接收消息时则对该来源属性进行验证，确认所述第二消息事件的来源属性是否为已编辑页面，若是则验证成功，否则验证失败，在来源属性验证成功时则接收所述第一消息事件中的运行数据，将接收到的运行数据在所述目标观察页面上同步更新显示，确保数据来源的可靠性与安全性。
所述页面数据传递方法还包括：
响应于对所述目标观察页面的数据编辑操作，调整所述目标观察页面中已接收数据的属性。
本实施例中，针对所述目标观察页面已接收并同步更新显示的数据，可由用户进一步输入相应的数据编辑操作，例如添加、移除、置顶、颜色设置、字体设置等等操作，来调整所述目标观察页面中已接收数据的属性，具体可对接收到的实时的运行数据或者实时的编辑数据进行属性调整，例如将某些重要的数据置顶显示，或者将某些无用的数据移除等等，使得所述目标观察页面能更加适应实际的数据监听需要，避免出现例如数据繁杂难定位、数据过多占用页面空间等等问题。
所述步骤S101之前，还可以包括：
响应于对目标界面上预设组件库和预设积木库的页面编辑操作，在所述目标界面上展示相应的已编辑页面。
本实施例中，通过图形化编程的方式编辑生成相应的用户界面，具体所述目标界面上包括了组件库触发区域和积木块触发区域，所述组件库触发区域是用于触发显示预设组件库的控制区域，所述积木库触发区域是用于触发显示预设积木库的控制区域，即所述目标界面上的预设组件库或预设积木库可以处于隐藏状态，通过点击所述组件库触发区域或积木库触发区域来显示所述预设组件库或预设积木库，实现简洁且利用率高的目标界面，当然，所述预设组件库或预设积木库也可以直接处于显示状态，便于用户直接进行组件页面编辑操作，本实施例中对此不作限定。本实施例中可以由用户对所述预设组件库和预设积木库输入相应的页面编辑操作，以选择相应的UI组件并为已选择的UI组件编辑相应的积木代码块，从而通过图形化编程的方式直观便捷的在所述目标界面上生成并展示相应的已编辑页面。
具体地，所述响应于对目标界面上预设组件库和预设积木库的页面编辑操作，在所述目标界面上展示相应的已编辑页面，包括：
响应于对目标界面上预设组件库的第一页面编辑操作，在所述目标界面的可视化编辑区域编辑相应的UI组件；
响应于对所述目标界面上预设积木库的第二页面编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块；
根据所述UI组件以及与所述UI组件对应的积木代码块生成所述已编辑页面。
本实施例中，所述目标界面上还相应包括了可视化编辑区域和可视化编程区域，所述可视化编辑区域用于根据输入的第一页面编辑操作来展示相应的UI组件，如图2所示，具体在触发显示了位于目标界面左侧的预设组件库后，可以由用户在预设组件库中输入第一页面编辑操作选择相应的UI组件并拖入位于预设组件库右侧的可视化编辑区域中，所述预设组件库中保存有多种类型的UI组件，例如文本组件、按钮组件、输入框组件、图片框组件、单选框组件、复选框组件、网页浏览框组件、开关组件、滑动条组件等等，用户在所述预设组件库中灵活选择不同的UI组件在所述可视化编辑区域进行展示时，可进一步调整已选择的UI组件的组合顺序、位置、显示样式等等配置属性，进而得到具有相应配置属性的UI组件，实现灵活便捷的APP界面设计。
所述可视化编程区域用于根据输入的第二页面编辑操作来展示与所述UI组件对应的积木代码块，具体所述积木代码块是指可视化编程中用来代替代码片段的块状结构，每个积木代码块中均封装有触发相应事件或者实现相应功能的代码，通过对积木代码块进行可视化的页面编辑操作，即可实现便捷高效的编程过程。如图2所示，当在目标页面的可视化编辑区域编辑了若干个UI组件后，可触发显示位于目标界面中部的预设积木库，之后可以由用户在预设积木库中输入第二页面编辑操作选择相应的积木代码块并拖入位于预设积木库右侧的可视化编程区域中，通过所述积木代码块来对当前可视化编辑区域内的UI组件进行逻辑描述，根据所述UI组件以及与所述UI组件对应的积木代码块生成所述已编辑页面，也就是说，所述已编辑页面中的UI组件将按照所述积木代码块执行时的逻辑来触发相应事件或者实现相应的功能，使得所述UI组件由静态转为动态，实现APP界面灵活丰富的交互功能。
具体所述预设积木库中包括了不同类型的积木模板，具体包括事件积木块和功能积木块，其中所述事件积木块用于描述当发生预设事件时进行触发，例如事件积木库可以有多种，包括但不限于当角色被点击时、当开始被点击时、当屏幕被点击时等等，所述功能积木块是指除了事件积木块以外，可以执行目标角色的某些功能，例如移动、等待、颜色设置、运算功能、传感功能、变量功能、列表功能、函数功能、通讯功能等等的积木代码块，被添加至所述可视化编程区域内的积木代码块，均以可视化编辑区域内的UI组件作为运行对象，并且可由用户进一步输入拼接操作来调整所述积木代码块的拼接顺序，进而调整相应的逻辑顺序，即本实施例在实现图形化界面编辑的基础上进一步通过图形化编程，以简单便捷的积木代码块拼接的方式来描述APP界面上各个UI组件的运行逻辑，有效提高了页面调试或者编辑过程中的可视化程度。
为更好地理解本发明提供的页面数据传递方法的实现过程，以下结合图2至图6，举具体的应用实施例对页面数据传递的过程进行详细描述：
当用户跳转至指定链接后将加载APP编辑器，例如AppCraft编辑器或者其它具有APP编辑与调试功能的编辑器，在所述APP编辑器中具有一个目标界面，具体如图6所示，所述目标界面包括了编程页面、模拟APP运行页面以及数据观察页面，其中编程页面进一步包括了预设组件库的显示区域、可视化编辑区域、预设积木库的显示区域和可视化编程区域，即所述编程页面上直接显示了所述预设组件库和预设积木库，用户在预设组件库中输入第一页面编辑操作选择相应的UI组件并拖入位于预设组件库右侧的可视化编辑区域中，如图2所示，可拖入多种不同类型的UI组件并进一步调整多个UI组件的组合顺序、位置、显示样式等等。之后将当前已编辑的UI组件作为目标角色，在目标界面的可视化编程区域内进行积木编程，用户在所述预设积木库中对相应的积木模板进行选中操作，根据被选中的积木模板在所述可视化编程区域内添加与所述目标角色对应的积木代码块，被添加至所述可视化编程区域内的积木代码块，均以所述目标角色作为运行对象，并且可由用户进一步输入拼接操作来调整所述积木代码块的拼接顺序，进而调整相应的逻辑顺序，如图2所示，为UI组件中的按钮组件“红色得分”配置的积木代码块为一个事件积木块“当按钮被点击时”和一个变量积木块，具体为当“红色得分”按钮被点击时，将变量“红方”增加“1”，也就是说，当用户点击已编辑页面上的红色得分按钮后，则对应的红方变量将增加1，进而实现计分交互功能。
在编程页面通过图形化编程的方式生成已编辑页面时，若编辑数据发生了变化，例如以变量积木块和列表积木块为例，用户可以新增变量、编辑变量名称、删除变量及设置变量默认初始值，列表栏目可以新增列表、编辑列表名称、删除列表及设置列表默认初始值等等，此时调用PostMessage函数传递第二消息事件给数据观察页面，数据观察页面在通过addEventListener函数监听到所述第二消息事件时，则将发生变化的编辑数据实时展示在所述数据观察页面内，如图5所示，实现页面编辑过程中的实时数据传递。
而当点击“运行”按钮模拟所述已编辑页面在智能手机中的运行效果时，如图3所示，将在所述目标界面上嵌入一Iframe子页面，可选地，在已编辑页面的位置处进行嵌入，便于展示页面编辑状态与运行状态之间的切换，在调试运行过程中，因为积木运行或者用户输入的点击等操作，Iframe子页面上的运行数据例如变量、列表等数据可能发生变化，例如当用户点击“红色得分”按钮则变量“红方”增加“1”，当运行数据发生变化时，调用PostMessage函数传递第一消息事件给数据观察页面，数据观察页面在通过addEventListener函数监听到所述第一消息事件时，解析第一消息事件中传递的例如屏幕、变量、列表及数据状态等运行数据，实时更新所述数据观察页面内的运行数据的值，如图5所示，实现页面调试过程中高效且实时的数据传递。
由以上方法实施例可知，本发明提供的页面数据传递方法通过在调试已编辑页面的过程中，当运行数据发生变化时主动向目标观察页面发送直接包含了运行数据的消息事件，使得目标观察页面能实时监听并更新运行数据的变化，有效提高了应用程序调试时数据监听的效率与实时性。
需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。
本发明另一实施例提供一种页面数据传递装置，如图7所示，装置700包括：
调试模块701，用于响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果；
第一消息发送模块702，用于当所述预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据；
第一消息监听模块703，用于调用预设监听函数对所述第一消息事件进行监听，当监听到所述第一消息事件时，在所述目标观察页面更新所述第一消息事件中的运行数据。
所述调试模块701、第一消息发送模块702和第一消息监听模块703依次连接，本发明所称的模块是指能够完成特定功能的一系列计算机程序指令段，比程序更适合于描述所述页面数据传递的执行过程，各模块的具体实施方式请参考上述对应的方法实施例，此处不再赘述。
进一步地，所述页面数据传递装置还包括：
第二消息发送模块，用于当所述已编辑页面的编辑数据发生变化时，调用预设消息发送函数向目标观察页面发送第二消息事件，所述第二消息事件中包括待发送的编辑数据；
第二消息监听模块，用于调用预设监听函数对所述第二消息事件进行监听，当监听到所述第二消息事件时，在所述目标观察页面更新所述第二消息事件中的编辑数据。
进一步地，所述页面数据传递装置还包括：
数据编辑模块，用于响应于对所述目标观察页面的数据编辑操作，调整所述目标观察页面中已接收数据的属性。
进一步地，所述页面数据传递装置还包括：
页面编辑模块，用于响应于对目标界面上预设组件库和预设积木库的页面编辑操作，在所述目标界面上展示相应的已编辑页面。
进一步地，所述调试模块701包括：
嵌入单元，用于响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入与所述调试操作中目标终端对应的Iframe子页面；
运行单元，用于在所述Iframe子页面上展示所述已编辑页面在所述目标终端上的运行状态。
进一步地，所述第一消息发送模块702具体用于：
调用PostMessage函数向目标观察页面发送第一消息事件。
进一步地，所述第一消息监听模块703具体用于：
调用addEventListener函数对所述第一消息事件进行监听。
本发明另一实施例提供一种页面数据传递系统，如图8所示，系统800包括：
一个或多个处理器801以及存储器802，图8中以一个处理器801为例进行介绍，处理器801和存储器802可以通过总线或者其他方式连接，图8中以通过总线连接为例。
处理器801用于完成系统800的各种控制逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器801还可以是任何传统处理器、微处理器或状态机。处理器801也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP和/或任何其它这种配置。
存储器802作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的页面数据传递方法对应的程序指令。处理器801通过运行存储在存储器802中的非易失性软件程序、指令以及单元，从而执行系统800的各种功能应用以及数据处理，即实现上述方法实施例中的页面数据传递方法。
存储器802可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据系统800使用所创建的数据等。此外，存储器802可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器802可选包括相对于处理器801远程设置的存储器，这些远程存储器可以通过网络连接至系统800。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
一个或者多个单元存储在存储器802中，当被一个或者多个处理器801执行时，执行上述任意方法实施例中的页面数据传递方法，例如，执行以上描述的图1中的方法步骤S101至步骤S103。
本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S101至步骤S103。
作为示例，非易失性存储介质能够包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦ROM(EEPROM)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(RAM)。通过说明而非限制，RAM可以以诸如同步RAM(SRAM)、动态RAM、(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、Synchlink DRAM(SLDRAM)以及直接Rambus(兰巴斯)RAM(DRRAM)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。
综上所述，本发明公开的一种页面数据传递方法、装置、系统及介质中，方法通过响应于对目标界面上已编辑页面的调试操作，在目标界面上嵌入预设子页面以展示已编辑页面的模拟运行效果；当预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，第一消息事件中包括待发送的运行数据；调用预设监听函数对第一消息事件进行监听，当监听到第一消息事件时，在目标观察页面更新第一消息事件中的运行数据。通过在调试已编辑页面的过程中，当运行数据发生变化时主动向目标观察页面发送直接包含了运行数据的消息事件，使得目标观察页面能实时监听并更新运行数据的变化，有效提高了应用程序调试时数据监听的效率与实时性。
当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的计算机程序可存储于一非易失性计算机可读取的存储介质中，该计算机程序在执行时可包括如上述各方法实施例的流程。其中所述的存储介质可为存储器、磁碟、软盘、闪存、光存储器等。
应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。
Claims (10)
1.一种页面数据传递方法，其特征在于，包括：
响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果；
当所述预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据；
调用预设监听函数对所述第一消息事件进行监听，当监听到所述第一消息事件时，在所述目标观察页面更新所述第一消息事件中的运行数据。
2.根据权利要求1所述的页面数据传递方法，其特征在于，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果之前，所述方法还包括：
当所述已编辑页面的编辑数据发生变化时，调用预设消息发送函数向目标观察页面发送第二消息事件，所述第二消息事件中包括待发送的编辑数据；
调用预设监听函数对所述第二消息事件进行监听，当监听到所述第二消息事件时，在所述目标观察页面更新所述第二消息事件中的编辑数据。
3.根据权利要求1或2所述的页面数据传递方法，其特征在于，所述方法还包括：
响应于对所述目标观察页面的数据编辑操作，调整所述目标观察页面中已接收数据的属性。
4.根据权利要求1或2所述的页面数据传递方法，其特征在于，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果之前，所述方法还包括：
响应于对目标界面上预设组件库和预设积木库的页面编辑操作，在所述目标界面上展示相应的已编辑页面。
5.根据权利要求1所述的页面数据传递方法，其特征在于，所述响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果，包括：
响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入与所述调试操作中目标终端对应的Iframe子页面；
在所述Iframe子页面上展示所述已编辑页面在所述目标终端上的运行状态。
6.根据权利要求1-5任意一项所述的页面数据传递方法，其特征在于，所述调用预设消息发送函数向目标观察页面发送第一消息事件，具体包括：
调用PostMessage函数向目标观察页面发送第一消息事件。
7.根据权利要求1-5任意一项所述的页面数据传递方法，其特征在于，所述调用预设监听函数对所述第一消息事件进行监听，具体包括：
调用addEventListener函数对所述第一消息事件进行监听。
8.一种页面数据传递装置，其特征在于，所述装置包括：
调试模块，用于响应于对目标界面上已编辑页面的调试操作，在所述目标界面上嵌入预设子页面以展示所述已编辑页面的模拟运行效果；
第一消息发送模块，用于当所述预设子页面的运行数据发生变化时，调用预设消息发送函数向目标观察页面发送第一消息事件，所述第一消息事件中包括待发送的运行数据；
第一消息监听模块，用于调用预设监听函数对所述第一消息事件进行监听，当监听到所述第一消息事件时，在所述目标观察页面更新所述第一消息事件中的运行数据。
9.一种页面数据传递系统，其特征在于，所述系统包括至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7任一项所述的页面数据传递方法。
10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的页面数据传递方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110763865.3A CN114116443A (zh) | 2021-07-06 | 2021-07-06 | 一种页面数据传递方法、装置、系统及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110763865.3A CN114116443A (zh) | 2021-07-06 | 2021-07-06 | 一种页面数据传递方法、装置、系统及介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114116443A true CN114116443A (zh) | 2022-03-01 |
Family
ID=80359420
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110763865.3A Pending CN114116443A (zh) | 2021-07-06 | 2021-07-06 | 一种页面数据传递方法、装置、系统及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114116443A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114895901A (zh) * | 2022-03-28 | 2022-08-12 | 北京金堤科技有限公司 | 一种页面处理方法、装置、存储介质和电子设备 |
| CN115729207A (zh) * | 2022-11-10 | 2023-03-03 | 浙江大唐乌沙山发电有限责任公司 | 调试信息的展示方法及装置、非易失性存储介质、处理器 |
| CN117421251A (zh) * | 2023-12-18 | 2024-01-19 | 武汉天喻信息产业股份有限公司 | 一种嵌入式终端的用户界面的调试方法和系统 |
-
2021
- 2021-07-06 CN CN202110763865.3A patent/CN114116443A/zh active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114895901A (zh) * | 2022-03-28 | 2022-08-12 | 北京金堤科技有限公司 | 一种页面处理方法、装置、存储介质和电子设备 |
| CN115729207A (zh) * | 2022-11-10 | 2023-03-03 | 浙江大唐乌沙山发电有限责任公司 | 调试信息的展示方法及装置、非易失性存储介质、处理器 |
| CN117421251A (zh) * | 2023-12-18 | 2024-01-19 | 武汉天喻信息产业股份有限公司 | 一种嵌入式终端的用户界面的调试方法和系统 |
| CN117421251B (zh) * | 2023-12-18 | 2024-03-19 | 武汉天喻信息产业股份有限公司 | 一种嵌入式终端的用户界面的调试方法和系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11347826B2 (en) | Systems and methods for hosted applications | |
| CN114116443A (zh) | 一种页面数据传递方法、装置、系统及介质 | |
| TWI690812B (zh) | 頁面元件動態佈局方法、裝置及客戶端 | |
| US11087074B2 (en) | Hybrid web publishing system | |
| CN105955888B (zh) | 一种页面调试预览方法及系统 | |
| CN112068824B (zh) | 一种网页开发预览方法、装置及电子设备 | |
| US8245125B1 (en) | Hybrid rendering for webpages | |
| CN108287836B (zh) | 一种资源缓存方法及装置 | |
| CN106874519B (zh) | 页面展现方法和装置 | |
| CN107943997B (zh) | 一种基于谷歌浏览器的远程网站取证方法、终端设备及存储介质 | |
| CN110674619B (zh) | 一种在线文档编辑方法、装置、设备及计算机存储介质 | |
| CN109558323B (zh) | 用于调试页面的系统、方法和装置 | |
| US9678814B2 (en) | Implementing a java method | |
| WO2016005884A2 (en) | Javascript-based, client-side template driver system | |
| CN113076165A (zh) | 一种页面校验方法和装置 | |
| CN110554950A (zh) | 一种界面调试方法、装置及存储介质 | |
| CN113778405A (zh) | 一种跨平台app构建方法、装置、系统及介质 | |
| CN111783019A (zh) | 浏览器子页面创建方法、装置、计算机设备和存储介质 | |
| CN109582580B (zh) | 用于调试页面的系统、方法和装置 | |
| CN108829828B (zh) | 一种网页显示方法、装置、电子设备及可读存储介质 | |
| CN108228139B (zh) | 基于html5浏览器框架的单片机开发系统及装置 | |
| US10261979B2 (en) | Method and apparatus for rendering a screen-representation of an electronic document | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| CN112287261A (zh) | 资源加载方法和电子设备 | |
| US10331774B2 (en) | System and methods for designing artifacts associated with a webpage |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |