CN115268733A - H5页面交互和编辑的方法与设备、计算机可读介质 - Google Patents
H5页面交互和编辑的方法与设备、计算机可读介质 Download PDFInfo
- Publication number
- CN115268733A CN115268733A CN202210908129.7A CN202210908129A CN115268733A CN 115268733 A CN115268733 A CN 115268733A CN 202210908129 A CN202210908129 A CN 202210908129A CN 115268733 A CN115268733 A CN 115268733A
- Authority
- CN
- China
- Prior art keywords
- target
- behavior
- page
- component
- event
- 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
- 230000003993 interaction Effects 0.000 title claims abstract description 69
- 238000000034 method Methods 0.000 title claims abstract description 67
- 230000006399 behavior Effects 0.000 claims abstract description 160
- 230000002452 interceptive effect Effects 0.000 claims abstract description 29
- 230000004044 response Effects 0.000 claims description 69
- 238000004590 computer program Methods 0.000 claims description 17
- 230000014509 gene expression Effects 0.000 claims description 12
- 230000001960 triggered effect Effects 0.000 claims description 11
- 230000009191 jumping Effects 0.000 claims description 3
- 230000000875 corresponding effect Effects 0.000 description 35
- 230000006870 function Effects 0.000 description 8
- 238000012545 processing Methods 0.000 description 6
- 230000009471 action Effects 0.000 description 5
- 230000008859 change Effects 0.000 description 5
- 238000003860 storage Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000012544 monitoring process Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000001276 controlling effect Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000008846 dynamic interplay Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000002360 preparation method Methods 0.000 description 1
- 230000007723 transport mechanism Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了一种第互联网超文本标记语言H5页面交互的方法，其包括：接收对H5页面的目标元素的目标交互操作；与所述目标交互操作绑定的目标组件执行对应的目标组件行为。本公开还提供了一种H5页面交互的设备、H5页面编辑的方法与设备、计算机可读介质。
Description
技术领域
本公开涉及互联网技术领域，特别涉及H5页面交互和编辑的方法与设备、计算机可读介质。
背景技术
H5(HTML5，第五代互联网超文本标记语言)页面是基于HTML5语言的页面，其被广泛用做广告、邀请函等。
一些相关技术中的H5页面仅具有页面静态展示功能，而没有实现动态交互逻辑的能力，例如，H5页面无法将表单的数据向服务器发送，不能获取页面内组件的数据，不能控制页面内展示内容的变化等。
发明内容
本公开提供一种H5页面交互和编辑的方法与设备、计算机可读介质。
第一方面，本公开实施例提供一种H5页面交互的方法，其包括：
接收对H5页面的目标元素的目标交互操作；
与所述目标交互操作绑定的目标组件执行对应的目标组件行为。
在一些实施例中，所述目标组件行为包括以下至少一项：
路由跳转、指令执行、请求发送、事件触发。
在一些实施例中，所述目标组件行为包括事件触发；在所述与所述目标交互操作绑定的目标组件执行对应的目标组件行为之后，还包括：
所述目标组件将触发的事件上报事件总线。
在一些实施例中，本公开实施例的H5页面交互的方法还包括：
响应组件监听所述事件总线，当监听到订阅的事件时，执行与订阅的事件对应的响应组件行为。
在一些实施例中，所述响应组件行为包括显示行为。
在一些实施例中，所述与所述目标交互操作绑定的目标组件执行对应的目标组件行为包括：
将对应所述目标组件行为的目标行为代码挂载到所述目标组件。
第二方面，本公开实施例提供一种H5页面编辑的方法，其包括：
接收对H5页面的目标元素的交互选择指令和行为选择指令；所述交互选择指令包括目标交互操作，所述行为选择指令包括目标组件行为；
将与所述目标组件行为对应的目标组件与所述目标交互操作绑定。
在一些实施例中，所述目标组件行为包括事件触发；本公开实施例的H5页面编辑的方法还包括：
构建事件总线；所述事件总线用于接收触发的事件，组件用于监听所述总线。
在一些实施例中，本公开实施例的H5页面编辑的方法还包括：
接收对响应组件的事件响应指令；所述事件响应指令包括事件和响应组件行为；
使所述响应组件行为对应的响应组件订阅所述事件；所述响应组件用于在监听到订阅的事件时执行所述响应组件行为。
在一些实施例中，所述接收对H5页面的目标元素的行为选择指令包括：接收对应目标组件行为的目标行为代码；
所述将与所述目标组件行为对应的目标组件与所述目标交互操作绑定包括：将所述目标行为代码挂载到所述目标组件。
在一些实施例中，所述接收对H5页面的目标元素的交互选择指令和行为选择指令包括：
接收对预置的所述目标交互操作和所述目标组件行为的选择。
在一些实施例中，本公开实施例的H5页面编辑的方法还包括：
通过模板表达式定义动态参数。
第三方面，本公开实施例提供一种H5页面交互的设备，其包括：
一个或多个处理器；
存储器，其上存储有一个或多个计算机程序：
一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互；
当所述一个或多个计算机程序被所述一个或多个处理器执行时，能实现本公开实施例的任意一种H5页面交互的方法。
第四方面，本公开实施例提供一种H5页面编辑的设备，其包括：
一个或多个处理器；
存储器，其上存储有一个或多个计算机程序：
一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互；
当所述一个或多个计算机程序被所述一个或多个处理器执行时，能实现本公开实施例的任意一种H5页面编辑的方法。
第五方面，本公开实施例提供一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现：
本公开实施例的任意一种H5页面交互的方法，或实现本公开实施例的任意一种H5页面编辑的方法。
附图说明
附图用来提供对本公开的进一步理解，并且构成说明书的一部分，与详细实施例一起用于解释本公开，并不构成对本公开的限制。通过参考附图对详细实施例进行描述，以上和其它特征和优点对本领域技术人员将变得更加显而易见，在附图中：
图1为本公开实施例提供的一种H5页面交互的方法的流程图；
图2为本公开实施例提供的另一种H5页面交互的方法的流程图
图3为本公开实施例提供的一种H5页面编辑的方法的流程图；
图4为本公开实施例提供的另一种H5页面编辑的方法的流程图；
图5为本公开实施例得到的一种H5页面的编辑过程的逻辑示意图；
图6为本公开实施例得到的一种H5页面的构架示意图；
图7为本公开实施例提供的一种H5页面交互的设备的组成框图；
图8为本公开实施例提供的一种H5页面编辑的设备的组成框图；
图9为本公开实施例提供的一种计算机可读介质的组成框图。
具体实施方式
为使本领域的技术人员更好地理解本公开的技术方案，下面结合附图对本公开提供的H5页面交互和编辑的方法与设备、计算机可读介质进行详细描述。
在下文中将参考附图更充分地描述本公开，但是所示的实施例可以以不同形式来体现，且不应当被解释为限于本公开阐述的实施例。反之，提供这些实施例的目的在于使本公开透彻和完整，并将使本领域技术人员充分理解本公开的范围。
本公开可借助本公开的理想示意图而参考平面图和/或截面图进行描述。因此，可根据制造技术和/或容限来修改示例图示。
在不冲突的情况下，本公开各实施例及实施例中的各特征可相互组合。
本公开所使用的术语仅用于描述特定实施例，且不意欲限制本公开。如本公开所使用的术语“和/或”包括一个或多个相关列举条目的任何和所有组合。如本公开所使用的单数形式“一个”和“该”也意欲包括复数形式，除非上下文另外清楚指出。如本公开所使用的术语“包括”、“由……制成”，指定存在所述特征、整体、步骤、操作、元件和/或组件，但不排除存在或添加一个或多个其它特征、整体、步骤、操作、元件、组件和/或其群组。
除非另外限定，否则本公开所用的所有术语(包括技术和科学术语)的含义与本领域普通技术人员通常理解的含义相同。还将理解，诸如那些在常用字典中限定的那些术语应当被解释为具有与其在相关技术以及本公开的背景下的含义一致的含义，且将不解释为具有理想化或过度形式上的含义，除非本公开明确如此限定。
本公开不限于附图中所示的实施例，而是包括基于制造工艺而形成的配置的修改。因此，附图中例示的区具有示意性属性，并且图中所示区的形状例示了元件的区的具体形状，但并不是旨在限制性的。
第一方面，本公开实施例提供一种H5页面交互的方法。
本公开实施例的方法由加载H5(HTML5，第五代互联网超文本标记语言)页面的设备(如终端)执行，或也可视为由H5页面执行；从而，用户可通过对设备上显示的H5页面进行操作实现一些功能，也就是实现与H5页面的交互。
参照图1，本公开实施例的H5页面交互的方法包括：
S101、接收对H5页面的目标元素的目标交互操作。
当用户通过鼠标或触摸屏等，对设备上显示的H5页面中的某个元素(如某个图标)进行操作(如点击、双击、拖动等)时，H5页面(或者说设备)会接收到针对目标元素的目标交互操作。
S102、与目标交互操作绑定的目标组件执行对应的目标组件行为。
对目标元素的目标交互操作，是预先与一定的目标组件行为(如输入密码)绑定的，故H5页面接收到目标交互操作后，与目标组件行为对应的目标组件(如密码组件)即会执行以上的目标组件行为(如准备接收密码)，从而实现H5页面的交互。
应当理解，目标组件行为还可有一些相关参数，而目标组件行具体可根据这些参数执行。
应当理解，H5页面中可同时有多个元素，其中可以只有部分元素为目标元素，即只有部分元素可进行交互；也可以是H5页面中所有的元素均为目标元素，即所有元素均可进行交互。
应当理解，针对不同目标元素的相同目标交互操作，应视为不同的目标交互操作，其可绑定不同的目标组件行为(如对A元素的单击和对B元素的单击可引起不同行为)；当然，若针对不同目标元素的相同目标交互操作绑定不同的目标组件行为，也是可行的(如对A元素的单击和对B元素的单击都可引起同一行为)。
应当理解，对每个目标元素的每个目标交互操作，可只有一个绑定的目标组件行为(即对目标元素的每个操作只能引起一个行为)，也可有多个绑定的目标组件行为(即对目标元素的每个操作可同时引起多个行为)。
应当理解，对每个目标元素，其可以只有一个目标交互操作(即目标元素可只对一种操作产生反应)，也可有多个不同的目标交互操作(即目标元素可对多种不同的操作产生反应)；而且，每个目标元素的多种不同的目标交互操作可绑定相同的目标组件行为(即对目标元素的多种不同的操作可引起相同行为)，也可绑定不同的目标组件行为(即对目标元素的多种不同的操作可行为不同的行为)。
本公开实施例中，针对目标元素的目标交互操作是与目标组件行为预先绑定的，故通过对目标元素进行目标交互操作，可以引发目标组件执行相应的目标组件行为，也就是对H5页面中元素的操作可以引起H5页面的反馈，从而可实现通过H5页面进行交互。
在一些实施例中，目标组件行为包括以下至少一项：
路由跳转、指令执行、请求发送、事件触发。
作为本公开实施例的一种方式，示例性的，目标组件行为可包括路由跳转(即H5页面跳转至其它路由)，指令执行(即H5页面向外部的其它主体发出特定的控制指令，如向终端发出指令要求终端进行振动等操作)，请求发送(即H5页面向服务器发送异步请求，如通过HTTP向服务器发送搜索请求并获取相应的结果数据)、事件触发(即H5页面触发进行一定的事件，如触发输入密码的事件)。
应当理解，目标组件行为可以是H5页面的任何组件能进行的任何行为，而不限于以上的具体例子。
在一些实施例中，参照图2，目标组件行为包括事件触发；在与目标交互操作绑定的目标组件执行对应的目标组件行为(S102)之后，还包括：
S103、目标组件将触发的事件上报事件总线。
作为本公开实施例的一种方式，当目标组件行为包括事件触发时，在触发事件之后，目标组件还可将事件上报给预设的事件总线(即上报总线某事件已经发生)，从而可让其它组件通过事件总线获知事件的发生，在全局范围内实现，实现组件之间的相互控制、参数传递，也就是实现组件间的联动。
在一些实施例中，参照图2，本公开实施例的H5页面交互的方法还包括：
S104、响应组件监听事件总线，当监听到订阅的事件时，执行与订阅的事件对应的响应组件行为。
作为本公开实施例的一种方式，部分组件(响应组件)可能需要在发生一定的事件后进行响应，故其可监听事件总线中的数据，并在监听到自身预先订阅的事件已经发生时，执行与订阅的事件对应的响应组件行为，实现组件的联动。
应当理解，响应组件应当是持续对事件总线进行监听的，并在任何监听到相应事件的情况下作出响应；因此，以上S103步骤和S104步骤的编号和描述顺序，并不表示响应组件是在事件已经上报事件总线之后才开始对事件总线进行监听。
应当理解，可以同时存在多个响应组件对事件总线进行监听，它们订阅的事件可相同或不同；即，可以有多个响应组件订阅一个事件(如一个事件可引起多个响应组件的联动)，也可以有一个响应组件订阅多个事件(如多个事件均可引起一个响应组件的联动)。
应当理解，如果不存在任何响应组件，也是可行的。
在一些实施例中，响应组件行为包括显示行为。
作为本公开实施例的一种方式，由响应组件对事件进行响应而发生的响应组件行为，具体可以是能影响显示的内容的显示行为；例如，显示行为可包括但不限于展示数据、显示新内容、隐藏已显示的内容、改变显示样式(如显示高亮、闪烁等效果等)、改变显示大小(如进行缩放等)。
应当理解，响应组件行为可以是H5页面的任何组件能进行的任何行为，而不限于以上的具体例子。
在一些实施例中，与目标交互操作绑定的目标组件执行对应的目标组件行为(S102)包括：
S1021、将对应目标组件行为的目标行为代码挂载到目标组件。
作为本公开实施例的一种方式，用户还可提前输入针对扩展的目标组件行为(扩展行为)的代码(目标行为代码)，从而H5页面可接收该目标行为代码，并将其挂载到目标组件，以实现目标组件与目标组件行为的对应。
例如，可将需要扩展的行为编写成一段代码，并记录到文本文件中，从而后续可选择之前编写的这段代码，实现逻辑挂载。
第二方面，本公开实施例提供一种H5页面编辑的方法。
本公开实施例的方法由编辑H5页面的设备执行，或也可视为由“H5页面编辑器(设计器)”执行；从而，用户可通过对设备进行操作(或者说使用“H5页面编辑器)，构建得到所需的、具有交互能力的H5页面。
参照图3，本公开实施例的H5页面编辑的方法包括：
S201、接收对H5页面的目标元素的交互选择指令和行为选择指令。
其中，交互选择指令包括目标交互操作，行为选择指令包括目标组件行为。
用户可对H5页面编辑器进行操作，为H5页面中的目标元素选定目标交互操作和目标组件行为，即，选定目标元素在受到目标交互操作时，应当引发的目标组件行为。
S202、将与目标组件行为对应的目标组件与目标交互操作绑定。
由此，H5页面编辑器可在接收到用户的选择指令(交互选择指令和行为选择指令)后，根据选择指令，将目标元素的目标交互操作与目标组件行为绑定；从而在后续用户对H5页面的目标元素的进行目标交互操作时，可引起目标组件执行该目标组件行为。
应当理解，用户给出以上交互选择指令、行为选择指令等具体方式是多样的。例如，可以是在用户选定H5页面上的目标元素后，即给出弹窗，从而用户可在弹窗的下拉菜单中选择与该目标元素相关的目标交互操作和目标组件行为；或者，也可以是通过输入代码等其它的方式实现交互选择指令、行为选择指令的输入。
应当理解，目标组件行为需要一些相关参数，而这些相关参数也可在行为选择指令中一并输入。
应当理解，本公开实施例的H5页面编辑的方法中，还可包括编辑H5页面的显示内容、元素等的步骤，或者说H5页面编辑器还应具有编辑H5页面的显示内容、元素等功能，此不再详细描述。
在一些实施例中，参照图4，目标组件行为包括事件触发；本公开实施例的H5页面编辑的方法还包括：
S200、构建事件总线。
其中，事件总线用于接收触发的事件，组件用于监听总线。
作为本公开实施例的一种方式，若在H5网页中需要不同组件通过事件实现联动，则可预先构建事件总线。例如，可在编辑H5网页的其它内容之前，首先构建事件总线。
在一些实施例中，参照图4，本公开实施例的H5页面编辑的方法还包括：
S203、接收对响应组件的事件响应指令。
其中，事件响应指令包括事件和响应组件行为。
S204、使响应组件行为对应的响应组件订阅事件。
其中，响应组件用于在监听到订阅的事件时执行响应组件行为。
H5页面编辑器接收用户对相互关联的事件和响应组件行为的选择(事件响应指令)，并根据事件响应指令使相应的响应组件订阅相应的事件，从而可实现组件之间的相互控制、参数传递，也就是在后续实现组件的联动。
在一些实施例中，接收对H5页面的目标元素的交互选择指令和行为选择指令(S201)包括：
S2011、接收对预置的目标交互操作和目标组件行为的选择。
作为本公开实施例的一种方式，可以是在编辑器中“预置”多种候选的交互操作和组件行为，从而在编辑H5页面时，只要直接从中选择(如通过下拉菜单选择)出相应的目标交互操作和目标组件行为即可。
应当理解，本公开实施例中的其它操作，例如构建总线等，也可通过在编辑器(设计器)中选择预置的指令完成。
由此，本公开实施例可通过对编辑器的简单操作，即制备出具有交互能力的H5页面，相对于一些相关技术中通过输入代码编辑H5页面的方式，本公开实施例的方式可大大减少工作量，同时大幅降低对用户专业水平的要求。
在一些实施例中，接收对H5页面的目标元素的行为选择指令(S201)包括：
S2012、接收对应目标组件行为的目标行为代码。
将与目标组件行为对应的目标组件与目标交互操作绑定(S202)包括：
S2021、将目标行为代码挂载到目标组件。
作为本公开实施例的另一种方式，除了选择预置的目标交互操作与目标组件行为相互关联外，还可“自定义”目标组件行，即输入代表应进行的目标组件行为(扩展行为)的目标行为代码，并将目标行为代码挂载到目标组件；从而，H5网页运行时目标行为代码可动态编译并混入到对应的目标行为组件中，通过onListener监听器挂载到目标行为组件的触发方式上。
由此，本公开实施例编辑的H5页面的扩展性好，其中组件与行为执行可任意组合，从而其可实现更丰富的交互内容、交互逻辑行为。
在一些实施例中，本公开实施例的H5页面编辑的方法还包括：通过模板表达式定义动态参数。
本公开实施例中，还需要定义很多参数，而这些参数可为由模板表达式定义的动态参数，即参数也可以是动态的。
例如，通过模板表达式定义动态参数，从而运行时可使用表达式换算出上下文中所需的变量，得到需要的动态参数。
示例性的，作为本公开实施例的一种具体方式，下面对本公开实施例的编辑H5页面和与H5页面进行交互的过程进行详细描述。
参照图5，本公开实施例的主要流程可如下：
A01、构建全局的事件总线，提供基础联动能力。
例如，通过前端框架VUE提供全局的事件总线能力。
在应用程序启动时默认启动全局的事件总线，即Var EventBus＝new Vue()。
A02、为元素添加触发组件行为的交互操作。
例如，可在H5页面编辑器中选择一个元素(目标元素)。
之后，选择新增行为，从下拉菜单中具体选择单击、双击等作为触发组件行为的交互操作(目标交互操作)，并具体选择路由跳转、指令执行、请求发送、事件触发等预置的组件行为(目标组件行为)。
例如，组件行为具体可以是可以是触发重置密码(resetPassword)的事件。
同时，还可填入组件行为对应参数。例如，当组件行为是事件触发时，则可填入对应的事件名和事件参数等。
例如，以上重置密码的事件的名称可为“user.resetPassword”。
之后，进行动态参数绑定，将组件绑定到选择的组件行为(如与组件行为的名称绑定)，并进行参数设置。
其中，对于预置的组件行为，其义参数类型和内容值也可以是静态的不变化的预定值，具体可包括参数的数据类型、数量、值等。
其中，参数也可以是动态的，例如，通过模板表达式定义动态参数，运行时使用表达式换算出上下文中所需的变量，从而得到需要的动态参数。
例如，H5页面上下文对象是页面缓存对象(pageContext)，而需要传递的参数是用户标识(userId)，则可以使用模板表达式{{pageContext.userId}}作为该这个参数的定义。
由此，在实际运行时，可使用模板字符串模板编译这个模板表达式：
Const userId＝_.template(`{{pageContext.userId}}`,pageContext)；
从而，使得实际的userId参数是动态的，会随着pageContext上下文中的内容一起变化。
其中，用户还可自定义组件行为，也就是添加“扩展行为”。
例如，用户在选择元素后，还可以点击添加新的行为，并输入要添加的组件行为的名称，设置参数配置，同时输入、编辑相应的行为代码(以下称代码块)。
其中，代码块可动态存储。例如，小型代码块可自动嵌入全局DSL中，而较大代码块可通过文件方式存储在服务器端。
由此，在H5网页运行时，代码块将动态编译并混入到对应的组件中，组件通过onListener监听器挂载该代码块对应的行为到组件的触发上，扩展行为的挂载完成。
例如，扩展行为是一段javascript代码逻辑，前端编程框架具备将这一段代码逻辑混入到执行函数中的能力，从而可以实现行为的自定义。
具体的，可以将需要扩展的行为编写成一段代码，并记录到文本文件中，而在设计时指定目标元素，故后续可选择之前编写的这段代码，实现逻辑挂载。
在程序运行时，程序框架将代码文件中的代码读取出来，进行字符串转义，形成逻辑代码，混入到目标元素行为处理函数中，当对目标元素进行目标交互操作时就可以执行响应扩展的行为。
A03、设置响应组件订阅的事件，并设置响应组件行为。
例如，可设置响应组件默认监听页面数据变化($SetPageData)，从而当任何页面内数据发生变化时，响应组件进行响应并被触发。
例如，可默认数据将使用vuex保存到页面缓存对象(pageContext)中，由此，在页面设置时会预置默认数据，通过监听数据变化可以完成各类响应组件行为。
例如，响应组件行为可为显示表达式。例如为{{isShowElement}}，将按照页面内缓存的数据，编译计算出结果来决定组件是否进行显示。
例如，值表达式可形如{{page.element.Count}}，并可将计算出实际数据结果显示到对应组件中。
例如，响应组件可使用EventBus.$on(‘user.resetPassword’,(params)＝>{//dosomething})方式完成事件订阅。
其中，响应组件也可绑定其它的响应组件行为，如组件实时监听状态数据，控制自身的显示行为，包括控制展示数据、是否显示、显示样式等。
其中，还可实现多个不同响应组件均进行响应，因为页面缓存对象(pageContext)对于整个H5页面的所有组件是共享的。
其中，H5页面内的多个组件可以订阅相同的事件，从而当事件触发时，订阅相同事件的多个组件将同时响应事件。
例如，H5页面中有两个组件，组件1用于显示当前设备的状态为开机或关机，组件2用于显示当前设备的名称，而两个组件绑定的数据都是当前设备(currentDevice)。
因此，当pageContext.currentDevice中的当前设备由A变成B时，则两个组件会同时响应数据的变化，组件1的设备状态会变化，组件2显示的当前设备也会变成B，即多个组件都会自动响应数据的变化，完成自身数据绑定的逻辑。
其中，响应组件行为也可以是用户自定义的，如用户可在组件行为面板中填入事件名，并勾选对应处理行为来完成事件响应。
参照图6，本公开实施例的方法编辑得到的H5页面中，时间总线可传输触发的时间、订阅的时间、取消的订阅等。
而在数据驱动层面可包括逻辑控制数据、页面加载数据、组件式样数据等数据，而目标组件进行目标组件行为时可更新数据，而响应数据的变化可传递给各响应组件(图6中多个响应组件的框体表示不同的响应组件)。
A04、H5页面运行过程中，若用户对元素执行单击、双击等被选定的交互操作，则可触发相应的组件执行对应的组件行为。
例如，当用户点击当前的元素时，可执行重置密码事件EventBus.$emit(‘user.resetPassword’,{‘pwd’:’passsword’})的触发。其中，事件名称可与需要触发的事件的名称保持一致，响应方法的第一个参数就是事件参数，事件的处理函数决定这个组件接下来的交互行为。
A05、响应组件监听事件总线中数据的变化，从而在事件触发后，响应事件而作出响应行为。
例如，响应组件可以是控制显示隐藏、改变显示的大小样式以及展示数据等。
第三方面，参照图7，本公开实施例提供一种H5页面交互的设备，其包括：
一个或多个处理器；
存储器，其上存储有一个或多个计算机程序：
一个或多个I/O接口，连接在处理器与存储器之间，配置为实现处理器与存储器的信息交互；
当一个或多个计算机程序被一个或多个处理器执行时，能实现本公开实施例的任意一种H5页面交互的方法。
第四方面，参照图8，本公开实施例提供一种H5页面编辑的设备，其包括：
一个或多个处理器；
存储器，其上存储有一个或多个计算机程序：
一个或多个I/O接口，连接在处理器与存储器之间，配置为实现处理器与存储器的信息交互；
当一个或多个计算机程序被一个或多个处理器执行时，能实现本公开实施例的任意一种H5页面编辑的方法。
第五方面，参照图9，本公开实施例提供一种计算机可读介质，其上存储有计算机程序，计算机程序被处理器执行时实现：
本公开实施例的任意一种H5页面交互的方法，或实现本公开实施例的任意一种H5页面编辑的方法。
本公开实施例中，处理器为具有数据处理能力的器件，其包括但不限于中央处理器(CPU)等；存储器为具有数据存储能力的器件，其包括但不限于随机存取存储器(RAM，更具体如SDRAM、DDR等)、只读存储器(ROM)、带电可擦可编程只读存储器(EEPROM)、闪存(FLASH)；I/O接口(读写接口)连接在处理器与存储器间，能实现存储器与处理器的信息交互，其包括但不限于事件总线(Bus)等。
本领域普通技术人员可以理解，上文中所公开的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。
在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。
某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器(CPU)、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机可读介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机可读介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其它数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机可读介质包括但不限于随机存取存储器(RAM，更具体如SDRAM、DDR等)、只读存储器(ROM)、带电可擦可编程只读存储器(EEPROM)、闪存(FLASH)或其它磁盘存储器；只读光盘(CD-ROM)、数字多功能盘(DVD)或其它光盘存储器；磁盒、磁带、磁盘存储或其它磁存储器；可以用于存储期望的信息并且可以被计算机访问的任何其它的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其它传输机制之类的调制数据信号中的其它数据，并且可包括任何信息递送介质。
本公开已经公开了示例实施例，并且虽然采用了具体术语，但它们仅用于并仅应当被解释为一般说明性含义，并且不用于限制的目的。在一些实例中，对本领域技术人员显而易见的是，除非另外明确指出，否则可单独使用与特定实施例相结合描述的特征、特性和/或元素，或可与其它实施例相结合描述的特征、特性和/或元件组合使用。因此，本领域技术人员将理解，在不脱离由所附的权利要求阐明的本公开的范围的情况下，可进行各种形式和细节上的改变。
Claims (15)
1.一种第五代互联网超文本标记语言H5页面交互的方法，其包括：
接收对H5页面的目标元素的目标交互操作；
与所述目标交互操作绑定的目标组件执行对应的目标组件行为。
2.根据权利要求1所述的方法，其中，所述目标组件行为包括以下至少一项：
路由跳转、指令执行、请求发送、事件触发。
3.根据权利要求1所述的方法，其中，所述目标组件行为包括事件触发；在所述与所述目标交互操作绑定的目标组件执行对应的目标组件行为之后，还包括：
所述目标组件将触发的事件上报事件总线。
4.根据权利要求3所述的方法，其中，还包括：
响应组件监听所述事件总线，当监听到订阅的事件时，执行与订阅的事件对应的响应组件行为。
5.根据权利要求4所述的方法，其中，
所述响应组件行为包括显示行为。
6.根据权利要求1所述的方法，其中，所述与所述目标交互操作绑定的目标组件执行对应的目标组件行为包括：
将对应所述目标组件行为的目标行为代码挂载到所述目标组件。
7.一种H5页面编辑的方法，其包括：
接收对H5页面的目标元素的交互选择指令和行为选择指令；所述交互选择指令包括目标交互操作，所述行为选择指令包括目标组件行为；
将与所述目标组件行为对应的目标组件与所述目标交互操作绑定。
8.根据权利要求7所述的方法，其中，所述目标组件行为包括事件触发；所述方法还包括：
构建事件总线；所述事件总线用于接收触发的事件，组件用于监听所述总线。
9.根据权利要求8所述的方法，其中，还包括：
接收对响应组件的事件响应指令；所述事件响应指令包括事件和响应组件行为；
使所述响应组件行为对应的响应组件订阅所述事件；所述响应组件用于在监听到订阅的事件时执行所述响应组件行为。
10.根据权利要求7所述的方法，其中，
所述接收对H5页面的目标元素的行为选择指令包括：接收对应目标组件行为的目标行为代码；
所述将与所述目标组件行为对应的目标组件与所述目标交互操作绑定包括：将所述目标行为代码挂载到所述目标组件。
11.根据权利要求7所述的方法，其中，所述接收对H5页面的目标元素的交互选择指令和行为选择指令包括：
接收对预置的所述目标交互操作和所述目标组件行为的选择。
12.根据权利要求7所述的方法，其中，还包括：
通过模板表达式定义动态参数。
13.一种H5页面交互的设备，其包括：
一个或多个处理器；
存储器，其上存储有一个或多个计算机程序：
一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互；
当所述一个或多个计算机程序被所述一个或多个处理器执行时，能实现权利要求1至6中任意一项所述的H5页面交互的方法。
14.一种H5页面编辑的设备，其包括：
一个或多个处理器；
存储器，其上存储有一个或多个计算机程序：
一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互；
当所述一个或多个计算机程序被所述一个或多个处理器执行时，能实现权利要求7至12中任意一项所述的H5页面编辑的方法。
15.一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现：
权利要求1至6中任意一项所述的H5页面交互的方法，或实现权利要求7至12中任意一项所述的H5页面编辑的方法。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210908129.7A CN115268733A (zh) | 2022-07-29 | 2022-07-29 | H5页面交互和编辑的方法与设备、计算机可读介质 |
| PCT/CN2023/105847 WO2024022063A1 (zh) | 2022-07-29 | 2023-07-05 | H5页面交互和编辑的方法与设备、计算机可读介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210908129.7A CN115268733A (zh) | 2022-07-29 | 2022-07-29 | H5页面交互和编辑的方法与设备、计算机可读介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115268733A true CN115268733A (zh) | 2022-11-01 |
Family
ID=83771363
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210908129.7A Pending CN115268733A (zh) | 2022-07-29 | 2022-07-29 | H5页面交互和编辑的方法与设备、计算机可读介质 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN115268733A (zh) |
| WO (1) | WO2024022063A1 (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116610880A (zh) * | 2023-07-14 | 2023-08-18 | 网易（杭州）网络有限公司 | 数据可视化的实现方法、装置、电子设备和存储介质 |
| WO2024022063A1 (zh) * | 2022-07-29 | 2024-02-01 | 京东方科技集团股份有限公司 | H5页面交互和编辑的方法与设备、计算机可读介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106201501A (zh) * | 2016-07-06 | 2016-12-07 | 全程网络科技（上海）有限公司 | 一种对移动端表单界面的可配置化构建方法及系统 |
| CN107038076A (zh) * | 2016-10-25 | 2017-08-11 | 努比亚技术有限公司 | 组件系统及组件交互方法 |
| CN108764889A (zh) * | 2018-05-03 | 2018-11-06 | 杭州乐湃网络科技有限公司 | 自动售卖机的商品或服务交易方法 |
| CN109766096A (zh) * | 2018-12-15 | 2019-05-17 | 深圳壹账通智能科技有限公司 | 前端组件元素生成系统、方法、计算机设备及存储介质 |
| CN114089982A (zh) * | 2020-11-03 | 2022-02-25 | 西安京迅递供应链科技有限公司 | 前端页面生成方法、装置、设备和介质 |
| CN114327432A (zh) * | 2021-12-27 | 2022-04-12 | 未来电视有限公司 | 一种应用生成方法、装置、电子设备及存储介质 |
| US11321422B1 (en) * | 2021-03-09 | 2022-05-03 | Salesforce.Com, Inc. | User-configurable aggregate web components |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103064868A (zh) * | 2012-07-20 | 2013-04-24 | 北京飞漫软件技术有限公司 | 一种在html5网页中添加收藏/自定义收藏网址的方法 |
| CN108255470A (zh) * | 2017-12-12 | 2018-07-06 | 广东广业开元科技有限公司 | 一种基于html5创建可语音输入人工智能记账系统的方法 |
| US10929208B1 (en) * | 2018-05-09 | 2021-02-23 | Accusoft Corporation | Methods and apparatus for copying a selected browser region to a clipboard as an image |
| CN115268733A (zh) * | 2022-07-29 | 2022-11-01 | 京东方科技集团股份有限公司 | H5页面交互和编辑的方法与设备、计算机可读介质 |
-
2022
- 2022-07-29 CN CN202210908129.7A patent/CN115268733A/zh active Pending
-
2023
- 2023-07-05 WO PCT/CN2023/105847 patent/WO2024022063A1/zh unknown
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106201501A (zh) * | 2016-07-06 | 2016-12-07 | 全程网络科技（上海）有限公司 | 一种对移动端表单界面的可配置化构建方法及系统 |
| CN107038076A (zh) * | 2016-10-25 | 2017-08-11 | 努比亚技术有限公司 | 组件系统及组件交互方法 |
| CN108764889A (zh) * | 2018-05-03 | 2018-11-06 | 杭州乐湃网络科技有限公司 | 自动售卖机的商品或服务交易方法 |
| CN109766096A (zh) * | 2018-12-15 | 2019-05-17 | 深圳壹账通智能科技有限公司 | 前端组件元素生成系统、方法、计算机设备及存储介质 |
| CN114089982A (zh) * | 2020-11-03 | 2022-02-25 | 西安京迅递供应链科技有限公司 | 前端页面生成方法、装置、设备和介质 |
| US11321422B1 (en) * | 2021-03-09 | 2022-05-03 | Salesforce.Com, Inc. | User-configurable aggregate web components |
| CN114327432A (zh) * | 2021-12-27 | 2022-04-12 | 未来电视有限公司 | 一种应用生成方法、装置、电子设备及存储介质 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2024022063A1 (zh) * | 2022-07-29 | 2024-02-01 | 京东方科技集团股份有限公司 | H5页面交互和编辑的方法与设备、计算机可读介质 |
| CN116610880A (zh) * | 2023-07-14 | 2023-08-18 | 网易（杭州）网络有限公司 | 数据可视化的实现方法、装置、电子设备和存储介质 |
| CN116610880B (zh) * | 2023-07-14 | 2023-11-03 | 网易（杭州）网络有限公司 | 数据可视化的实现方法、装置、电子设备和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2024022063A1 (zh) | 2024-02-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN115268733A (zh) | H5页面交互和编辑的方法与设备、计算机可读介质 | |
| US9792354B2 (en) | Context aware user interface parts | |
| CN111104635B (zh) | 一种表格网页的生成方法和装置 | |
| US20090235186A1 (en) | Limited-scope rendering | |
| CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
| CN110020912B (zh) | 页面展示方法、装置及设备 | |
| US20210192106A1 (en) | Micro frontends with model-based state | |
| CN112306587A (zh) | 页面的显示处理方法、装置、及终端设备 | |
| CN111796820A (zh) | 基于集成化组件构建前端页面的方法、装置及电子设备 | |
| CN105095374A (zh) | 移动终端新闻浏览的方法及装置 | |
| CN112783783A (zh) | 网页埋点方法、装置、设备及可读存储介质 | |
| CN113010395A (zh) | 数据采集方法、装置、设备、介质和程序产品 | |
| CN113934913A (zh) | 数据抓取方法、装置、存储介质及电子设备 | |
| CN110795353A (zh) | 快应用的调试方法、装置、设备及存储介质 | |
| CN113672405A (zh) | 数据交互系统和基于数据交互系统的页面展示方法 | |
| CN108319474B (zh) | 一种页面信息生成方法、装置和设备 | |
| CN113792208B (zh) | 基于网页的图片交互方法、装置、设备、介质及程序产品 | |
| CN114385124A (zh) | 基于Vue框架的独立页面的跳转方法、装置及设备 | |
| WO2024066825A1 (zh) | 页面项目开发方法、装置、设备、介质及产品 | |
| CN111158685A (zh) | 静态页面的更新方法、装置、电子设备及存储介质 | |
| CN108037914B (zh) | 一种安卓原生系统结合js开发的方法及装置 | |
| CN115658063A (zh) | 页面信息生成方法、装置、设备及存储介质 | |
| CN111767111B (zh) | 页面数据处理方法及装置、电子设备和存储介质 | |
| KR100948472B1 (ko) | 데이터 언어에서 변수들의 자동 업데이팅 | |
| CN114217715A (zh) | 富媒体播放页面控制方法、装置、电子设备及存储介质 |
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 |