CN107608675B - 基于虚拟文档对象模型的跨平台前端开发系统及方法 - Google Patents
基于虚拟文档对象模型的跨平台前端开发系统及方法 Download PDFInfo
- Publication number
- CN107608675B CN107608675B CN201710891537.5A CN201710891537A CN107608675B CN 107608675 B CN107608675 B CN 107608675B CN 201710891537 A CN201710891537 A CN 201710891537A CN 107608675 B CN107608675 B CN 107608675B
- Authority
- CN
- China
- Prior art keywords
- platform
- virtual
- native
- dom
- animation
- 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.)
- Active
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种基于虚拟文档对象模型的跨平台前端开发系统及方法，系统包括：Dom生成器、布局控制器、交互适配器和动画控制器；针对任一原生平台：Dom生成器通过解析输入的XML生成Virtual Dom树，并通过在Virtual Dom树节点中封装该原生平台的视图控件，生成该原生平台的Real Dom树；布局控制器基于预设的界面布局逻辑计算界面布局结果并同步到该原生平台的视图控件中；交互适配器识别该原生平台底层输入事件，基于预先设置的手势控制逻辑将原生平台底层输入事件转换为触摸事件并在Virtual Dom树中分发；动画控制器基于预先设置的动画控制逻辑通过驱动基于Virtual Dom的动画的每一帧来设置Virtual Dom树节点的属性。本发明具备彻底的跨平台前端开发特性。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种基于虚拟文档对象模型的跨平台前端开发系统及方法。
背景技术
现有的针对前端跨平台开发的解决方案主要分为纯webview的版本和原生化混合开发的版本。其中纯webview的版本典型有apache cordova、jquery mobile等，原生化混合开发的版本有Facebook、Reactive Native等。
基于纯webview的apache cordova框架，由于底层实现基于webview，因此其应用本质上仍然是网页，存在性能和体验上的不足。cordova只是通过为webview增加bridge的方式桥接了一些和原生设备交互的调用接口，屏蔽了iOS和android在设备调用接口方面的差异，由于cordova并没有在界面，布局和动画上做更多实现，因此并不是一个完备的跨平台开发框架。
基于原生化混合开发的Reactive Native框架，由于基于原生的渲染容器实现，因此具备更加流畅的交互体验，相比cordova有更好的性能。Reacive Native的缺点在于它的Virtual Dom在android和iOS上的抽象并不一致，这是因为它仅仅是简单的将两个平台各自的控件做了简单的映射变成Virtual Dom，并没有彻底屏蔽平台相关的差异，这就导致了开发人员不得不针对两个平台各自开发一份代码，虽然开发的方法很相似，但却无法实现真正意义的跨平台开发。
可见，cordova的缺点在于本质上网页、性能不足。而Reactive Native的缺点在于没有实现完全一致的Virtual Dom，没有真正实现跨平台开发。
鉴于此，如何实现跨平台前端开发成为目前需要解决的技术问题。
发明内容
为解决上述的技术问题，本发明实施例提供一种基于虚拟文档对象模型的跨平台前端开发系统及方法，用于实现跨平台前端开发。
第一方面，本发明实施例提供一种基于虚拟文档对象模型的跨平台前端开发系统，包括：Dom生成器、布局控制器、交互适配器和动画控制器；其中，针对任一原生平台：
所述Dom生成器，用于通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；
所述布局控制器，用于基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；
所述交互适配器，用于识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；
所述动画控制器，用于基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；
其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
可选地，所述多个不同原生平台，包括：iOS平台、android平台、html5平台和除了所述iOS平台、android平台和html5平台之外的其他平台。
可选地，所述多个不同原生平台底层的输入事件包括以下的一种或多种事件：
触摸屏的触屏事件、遥控器的指令输入事件、鼠标键盘的指令输入事件、和/或触控板的触控事件。
可选地，所述触屏事件中包括：单或多点的手指状态和位置信息。
第二方面，本发明实施例提供一种基于虚拟文档对象模型的跨平台前端开发方法，利用上述系统，包括：
针对任一原生平台：Dom生成器通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；
布局控制器基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；
交互适配器识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；
动画控制器基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；
其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
可选地，所述多个不同原生平台，包括：iOS平台、android平台、html5平台和除了所述iOS平台、android平台和html5平台之外的其他平台。
可选地，所述多个不同原生平台底层的输入事件包括以下的一种或多种事件：
触摸屏的触屏事件、遥控器的指令输入事件、鼠标键盘的指令输入事件、和/或触控板的触控事件。
可选地，所述触屏事件中包括：单或多点的手指状态和位置信息。
第三方面，本发明实施例提供一种电子设备，包括：处理器、存储器、总线及存储在存储器上并可在处理器上运行的计算机程序；
其中，所述处理器，存储器通过所述总线完成相互间的通信；
所述处理器执行所述计算机程序时实现上述方法。
第四方面，本发明实施例提供一种非暂态计算机可读存储介质，所述存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述方法。
由上述技术方案可知，本发明实施例的基于虚拟文档对象模型的跨平台前端开发系统及方法，其中系统包括：Dom生成器、布局控制器、交互适配器和动画控制器；其中，针对任一原生平台：Dom生成器，用于通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；布局控制器，用于基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；交互适配器，用于识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；动画控制器，用于基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。由此，能够实现跨平台前端开发，可将平台的差异性彻底的屏蔽在了各个环节的内部处理上，使得开发人员可以利用上述系统及方法只做一次代码开发，就能不做任何修改的打包成iOS、android和html5等平台的应用程序，从而相比Reactive Native具备更彻底的跨平台开发特性，并且因为底层采用原生实现，在各个平台都能拥有最佳的交互体验，相比cordova具备更好的性能。
附图说明
图1为本发明一实施例提供的一种基于虚拟文档对象模型的跨平台前端开发系统的结构示意图；
图2为本发明一实施例提供的一种基于虚拟文档对象模型的跨平台前端开发方法的流程示意图；
图3为本发明实施例提供的一种电子设备的实体结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他的实施例，都属于本发明保护的范围。
图1示出了本发明一实施例提供的一种基于虚拟文档对象模型的跨平台前端开发系统的结构示意图。如图1所示，本实施例的基于虚拟文档对象模型的跨平台前端开发系统，包括：Dom生成器1、布局控制器2、交互适配器3和动画控制器4；其中，针对任一原生平台：
所述Dom(文档对象模型)生成器1，用于通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；
所述布局控制器2，用于基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；
所述交互适配器3，用于识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；
所述动画控制器4，用于基于预先设置的动画控制逻辑，通过驱动基于VirtualDom的动画的每一帧来设置所述Virtual Dom树的节点的属性；
其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
在具体应用中，本实施例所述多个不同原生平台，可以包括：iOS平台、android平台、html5平台和除了所述iOS平台、android平台和html5平台之外的其他平台，本实施例并不对其进行限制。
其中，所述多个不同原生平台底层的输入事件可以包括以下的一种或多种事件：
触摸屏的触屏事件、遥控器的指令输入事件、鼠标键盘的指令输入事件、和/或触控板的触控事件等，本实施例并不对其进行限制，可根据实际情况来确定。
其中，所述触屏事件中可以包括：单或多点的手指状态和位置信息等，本实施例并不对其进行限制。
可以理解的是，本实施例可预先建立所述虚拟文档对象模型Virtual Dom，使所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑。
可以理解的是，本实施例所述真实文档对象模型Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现，不同平台是不一样的，由于平台的差异性，每个平台提供的基础的界面控件都有各自的特点，api(应用程序编程接口)及功能都有差异，本实施例基于各个原生平台的Real Dom，抽象了统一虚拟文档模型Virtual Dom来实现跨平台开发的目的。
可以理解的是，本实施例中的基于预先设置的界面布局逻辑计算界面布局结果的方法是基于所述Virtual Dom，可以实现多个不同原生平台一致的布局机制。
可以理解的是，本系统预先封装了基本的动画驱动api，进而所述动画控制可基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述VirtualDom树的节点的属性，可以实现各种丰富的自定义动画，可实现统一的动画控制机制。
可以理解的是，本系统对于多个不同原生平台如iOS平台、android、html5、电视等等，它们的区别在于Virtual Dom的节点中封装的底层原生控件不同，但是Virtual Dom节点本身对外提供的方法和调用方式是完全一致的。另外，本系统对于输入设备的适配也有区别，例如在电视上可以适配遥控器的输入，在pc可以适配鼠标键盘、触控板输入，而在移动设备上可以适配触屏事件等，本实施例并不对其进行限制。
本发明实施例的基于虚拟文档对象模型的跨平台前端开发系统，能够实现彻底的跨平台前端开发，通过利用预先建立的完全一致的虚拟文档对象模型Virtual Dom，可将平台的差异性彻底的屏蔽在了各个环节的内部处理上，对开发者所暴露的是完全相同的开发api，使得开发人员可以利用本实施例所述系统做一次代码开发，就能不做任何修改的打包成iOS、android和html5等平台的应用程序，达到一次开发同时发布多个平台应用的效果，从而相比Reactive Native具备更彻底的跨平台开发特性，并且因为底层采用原生实现，在各个平台都能拥有最佳的交互体验，相比cordova具备更好的性能。
图2示出了本发明一实施例提供的一种基于虚拟文档对象模型的跨平台前端开发方法的流程示意图。本实施例所述方法利用上述系统实施例所述的基于虚拟文档对象模型的跨平台前端开发系统，如图2所示，本实施例的基于虚拟文档对象模型的跨平台前端开发方法，包括下述步骤201-204：
201、针对任一原生平台：Dom生成器通过解析输入的XML(可扩展的标识语言)生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树。
可以理解的是，所述Dom生成器通过解析输入的XML生成虚拟文档对象模型Virtual Dom树时，每一个Virtual Dom树的节点内部都会对应生成所述原生平台的视图控件与之对应。
202、布局控制器基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中。
可以理解的是，本实施例中的基于预先设置的界面布局逻辑计算界面布局结果的方法是基于所述Virtual Dom，可以实现多个不同原生平台一致的布局机制。
203、交互适配器识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑，将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述VirtualDom树中进行分发。
在具体应用中，对于所述触摸事件，开发者可以根据实际情况具体设置手势处理方法。
204、动画控制器基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性(即基本属性值)。
其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
在具体应用中，本实施例所述多个不同原生平台，可以包括：iOS平台、android平台、html5平台和除了所述iOS平台、android平台和html5平台之外的其他平台，本实施例并不对其进行限制。
其中，所述多个不同原生平台底层的输入事件可以包括以下的一种或多种事件：
触摸屏的触屏事件、遥控器的指令输入事件、鼠标键盘的指令输入事件、和/或触控板的触控事件等，本实施例并不对其进行限制，可根据实际情况来确定。
其中，所述触屏事件中可以包括：单或多点的手指状态和位置信息等，本实施例并不对其进行限制。
可以理解的是，本实施例可预先建立所述虚拟文档对象模型Virtual Dom，使所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑。
可以理解的是，本实施例所述真实文档对象模型Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现，不同平台是不一样的，由于平台的差异性，每个平台提供的基础的界面控件都有各自的特点，api及功能都有差异，本实施例基于各个原生平台的Real Dom，抽象了统一虚拟文档模型Virtual Dom来实现跨平台开发的目的。
可以理解的是，所述基于虚拟文档对象模型的跨平台前端开发系统预先封装了基本的动画驱动api，进而所述动画控制可基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性，可以实现各种丰富的自定义动画，可实现统一的动画控制机制。
可以理解的是，所述基于虚拟文档对象模型的跨平台前端开发系统对于多个不同原生平台如iOS平台、android、html5、电视等等，它们的区别在于Virtual Dom的节点中封装的底层原生控件不同，但是Virtual Dom节点本身对外提供的方法和调用方式是完全一致的。另外，本系统对于输入设备的适配也有区别，例如在电视上可以适配遥控器的输入，在pc可以适配鼠标键盘、触控板输入，而在移动设备上可以适配触屏事件等，本实施例并不对其进行限制。
本发明实施例的基于虚拟文档对象模型的跨平台前端开发方法，利用上述系统实施例所述的基于虚拟文档对象模型的跨平台前端开发系统，能够实现彻底的跨平台前端开发，通过利用预先建立的完全一致的虚拟文档对象模型Virtual Dom，可将平台的差异性彻底的屏蔽在了各个环节的内部处理上，对开发者所暴露的是完全相同的开发api，使得开发人员可以只做一次代码开发，就能不做任何修改的打包成iOS、android和html5等平台的应用程序，达到一次开发同时发布多个平台应用的效果，从而相比Reactive Native具备更彻底的跨平台开发特性，并且因为底层采用原生实现，在各个平台都能拥有最佳的交互体验，相比cordova具备更好的性能。
图3示出了本发明实施例提供的一种电子设备的实体结构示意图，如图3所示，该电子设备可以包括：处理器11、存储器12、总线13及存储在存储器12上并可在处理器11上运行的计算机程序；
其中，所述处理器11，存储器12通过所述总线13完成相互间的通信；
所述处理器11执行所述计算机程序时实现上述各方法实施例所提供的方法，例如包括：针对任一原生平台：Dom生成器通过解析输入的XML生成虚拟文档对象模型VirtualDom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；布局控制器基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；交互适配器识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；动画控制器基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
本发明实施例提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例所提供的方法，例如包括：针对任一原生平台：Dom生成器通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；布局控制器基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；交互适配器识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；动画控制器基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
本领域内的技术人员应明白，本申请的实施例可提供为方法、装置、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、装置、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置/系统。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。术语“上”、“下”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
本发明的说明书中，说明了大量具体细节。然而能够理解的是，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本发明公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释呈反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。本发明并不局限于任何单一的方面，也不局限于任何单一的实施例，也不局限于这些方面和/或实施例的任意组合和/或置换。而且，可以单独使用本发明的每个方面和/或实施例或者与一个或更多其他方面和/或其实施例结合使用。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
Claims (10)
1.一种基于虚拟文档对象模型的跨平台前端开发系统，其特征在于，包括：Dom生成器、布局控制器、交互适配器和动画控制器；其中，针对任一原生平台：
所述Dom生成器，用于通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；
所述布局控制器，用于基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；
所述交互适配器，用于识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述VirtualDom树中进行分发；
所述动画控制器，用于基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；
其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
2.根据权利要求1所述的系统，其特征在于，所述多个不同原生平台，至少包括：iOS平台、android平台和html5平台。
3.根据权利要求1所述的系统，其特征在于，所述多个不同原生平台底层的输入事件包括以下的一种或多种事件：
触摸屏的触屏事件、遥控器的指令输入事件、鼠标键盘的指令输入事件、和/或触控板的触控事件。
4.根据权利要求3所述的系统，其特征在于，所述触屏事件中包括：单或多点的手指状态和位置信息。
5.一种基于虚拟文档对象模型的跨平台前端开发方法，利用权利要求1-4中任一项所述的系统，其特征在于，包括：
针对任一原生平台：Dom生成器通过解析输入的XML生成虚拟文档对象模型VirtualDom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；
布局控制器基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；
交互适配器识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；
动画控制器基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；
其中，多个不同原生平台均利用相同的Virtual Dom，所述Virtual Dom包含统一界面对象模型，并基于界面对象预先设置多个不同原生平台统一的界面布局逻辑、手势控制逻辑和动画控制逻辑，所述Real Dom是多个不同原生平台上对应所述Virtual Dom的真实实现。
6.根据权利要求5所述的方法，其特征在于，所述多个不同原生平台，至少包括：iOS平台、android平台和html5平台。
7.根据权利要求5所述的方法，其特征在于，所述多个不同原生平台底层的输入事件包括以下的一种或多种事件：
触摸屏的触屏事件、遥控器的指令输入事件、鼠标键盘的指令输入事件、和/或触控板的触控事件。
8.根据权利要求7所述的方法，其特征在于，所述触屏事件中包括：单或多点的手指状态和位置信息。
9.一种电子设备，其特征在于，包括：处理器、存储器、总线及存储在存储器上并可在处理器上运行的计算机程序；
其中，所述处理器，存储器通过所述总线完成相互间的通信；
所述处理器执行所述计算机程序时实现如权利要求5-8中任一项所述的方法。
10.一种非暂态计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，该计算机程序被处理器执行时实现如权利要求5-8中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710891537.5A CN107608675B (zh) | 2017-09-27 | 2017-09-27 | 基于虚拟文档对象模型的跨平台前端开发系统及方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710891537.5A CN107608675B (zh) | 2017-09-27 | 2017-09-27 | 基于虚拟文档对象模型的跨平台前端开发系统及方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107608675A CN107608675A (zh) | 2018-01-19 |
| CN107608675B true CN107608675B (zh) | 2020-05-01 |
Family
ID=61058954
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710891537.5A Active CN107608675B (zh) | 2017-09-27 | 2017-09-27 | 基于虚拟文档对象模型的跨平台前端开发系统及方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107608675B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110309454B (zh) * | 2018-03-06 | 2023-07-11 | 腾讯科技（深圳）有限公司 | 一种界面显示方法、装置、设备及存储介质 |
| CN108958954B (zh) * | 2018-07-05 | 2021-05-25 | 北京微播视界科技有限公司 | 模块间的消息传递方法、装置、电子设备和计算机可读介质 |
| CN109814866B (zh) * | 2019-01-31 | 2022-02-08 | 天津字节跳动科技有限公司 | 页面应用转化为原生应用的处理方法和装置 |
| CN111309424B (zh) * | 2020-02-12 | 2023-09-22 | 中国平安人寿保险股份有限公司 | 一种页面还原方法及相关设备 |
| CN111966334B (zh) * | 2020-08-17 | 2023-06-27 | 支付宝(杭州)信息技术有限公司 | 一种业务处理方法、装置及设备 |
| CN112800736B (zh) * | 2021-02-04 | 2022-04-08 | 杉数科技(北京)有限公司 | 生成单元格编辑组件的方法、装置、介质及计算机设备 |
| US11487931B1 (en) | 2021-10-18 | 2022-11-01 | International Business Machines Corporation | Replaying a webpage based on virtual document object model |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20090078698A (ko) * | 2008-01-15 | 2009-07-20 | 포항공과대학교 산학협력단 | 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스화면 편집 방법 및 장치 |
| CN102904925A (zh) * | 2012-08-29 | 2013-01-30 | 四川长虹电器股份有限公司 | 一种基于三屏互动的跨平台widget中间件系统 |
| CN104407863A (zh) * | 2014-11-21 | 2015-03-11 | 用友软件股份有限公司 | 抽象控件模型编程装置和方法 |
| CN104572042A (zh) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | 移动终端设备的跨平台中间件装置及其实现方法 |
-
2017
- 2017-09-27 CN CN201710891537.5A patent/CN107608675B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20090078698A (ko) * | 2008-01-15 | 2009-07-20 | 포항공과대학교 산학협력단 | 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스화면 편집 방법 및 장치 |
| CN102904925A (zh) * | 2012-08-29 | 2013-01-30 | 四川长虹电器股份有限公司 | 一种基于三屏互动的跨平台widget中间件系统 |
| CN104572042A (zh) * | 2013-10-15 | 2015-04-29 | 航天信息股份有限公司 | 移动终端设备的跨平台中间件装置及其实现方法 |
| CN104407863A (zh) * | 2014-11-21 | 2015-03-11 | 用友软件股份有限公司 | 抽象控件模型编程装置和方法 |
Non-Patent Citations (1)
| Title |
|---|
| 基于Android的PhoneGap平台研究及其跨移动平台媒体框架的扩展;李宝韩;《硕士学位论文》;20120501;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107608675A (zh) | 2018-01-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107608675B (zh) | 基于虚拟文档对象模型的跨平台前端开发系统及方法 | |
| US20140173454A1 (en) | Method and system for designing, deploying and executing transactional multi-platform mobile applications | |
| EP3053029A1 (en) | Context aware user interface parts | |
| CN110580174B (zh) | 应用组件生成方法、服务器及终端 | |
| US20160253256A1 (en) | Code usage map | |
| CN101408843B (zh) | 一种生成程序菜单的方法及其装置 | |
| Pérez et al. | Facing interaction-rich rias: The orchestration model | |
| Colombo-Mendoza et al. | Alexandria: A visual tool for generating multi-device rich internet applications. | |
| KR20150098818A (ko) | 애플리케이션 개발 환경 제공 방법 | |
| CN105404499B (zh) | 基于sap平台的数据展示方法及系统 | |
| CN116204175A (zh) | Ui模型驱动的前端无代码开发框架、方法、介质及设备 | |
| KR20150097181A (ko) | 애플리케이션 개발 환경 제공 시스템 | |
| Beer et al. | Flexible and reliable software architecture for industrial user interfaces | |
| KR20150097201A (ko) | 애플리케이션 개발 환경 제공 시스템 | |
| CN117972256A (zh) | 联动表单生成方法、装置、电子设备及介质 | |
| Gamonal Capdevila | Reengineering a Content Manager for Humanoid Robots with Web Technology | |
| Vosloo | Web-based development: Putting practice into theory | |
| KR20150099180A (ko) | 애플리케이션 개발 환경 제공 프로그램을 기록한 컴퓨터로 판독 가능한 기록매체 | |
| KR20150098837A (ko) | 애플리케이션 개발 환경 제공 프로그램을 기록한 컴퓨터로 판독 가능한 기록매체 | |
| KR20150099179A (ko) | 애플리케이션 개발 환경 제공 프로그램을 기록한 컴퓨터로 판독 가능한 기록매체 | |
| KR20150099174A (ko) | 애플리케이션 개발 환경 제공 장치 | |
| KR20150099213A (ko) | 애플리케이션 개발 환경 제공 장치 | |
| KR20150098816A (ko) | 애플리케이션 개발 환경 제공 방법 | |
| KR20150099209A (ko) | 애플리케이션 개발 환경 제공 장치 | |
| KR20150099211A (ko) | 애플리케이션 개발 환경 제공 장치 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20211230 Address after: 065201 No. 83, Yifeng street, Yanjiao Development Zone, Sanhe City, Langfang City, Hebei Province Patentee after: Hebei Dinglian Technology Co.,Ltd. Address before: Room 301, Beiyou science and technology building, No. 10, Xitucheng Road, Haidian District, Beijing 100876 Patentee before: MICROSCENE (BEIJING) TECHNOLOGY CO.,LTD. |
|
| TR01 | Transfer of patent right |