CN113778405A - 一种跨平台app构建方法、装置、系统及介质 - Google Patents
一种跨平台app构建方法、装置、系统及介质 Download PDFInfo
- Publication number
- CN113778405A CN113778405A CN202110763862.XA CN202110763862A CN113778405A CN 113778405 A CN113778405 A CN 113778405A CN 202110763862 A CN202110763862 A CN 202110763862A CN 113778405 A CN113778405 A CN 113778405A
- Authority
- CN
- China
- Prior art keywords
- component
- building block
- interface
- description file
- preset
- 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
- 238000010276 construction Methods 0.000 title claims abstract description 44
- 230000000007 visual effect Effects 0.000 claims abstract description 56
- 238000011161 development Methods 0.000 claims abstract description 31
- 238000000034 method Methods 0.000 claims abstract description 25
- 238000004806 packaging method and process Methods 0.000 claims abstract description 14
- 230000003068 static effect Effects 0.000 claims description 14
- 230000004044 response Effects 0.000 claims description 10
- 230000000694 effects Effects 0.000 claims description 8
- 238000006243 chemical reaction Methods 0.000 claims description 7
- 230000006870 function Effects 0.000 description 19
- 230000008569 process Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 3
- 230000006854 communication Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000002452 interceptive effect Effects 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
- 230000001960 triggered effect Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000008846 dynamic interplay Effects 0.000 description 1
- 239000000463 material Substances 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
- 238000012545 processing Methods 0.000 description 1
- 239000007787 solid Substances 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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- 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/36—Software reuse
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种跨平台APP构建方法、装置、系统及介质，方法包括：响应于对预设组件库的第一编辑操作，在可视化编辑区域编辑相应的UI组件；响应于对预设积木库的第二编辑操作，在可视化编程区域编辑与UI组件对应的积木代码块；根据UI组件以及与UI组件对应的积木代码块生成预设格式的界面描述文件；获取用于解析界面描述文件的解析器，通过预设的跨平台开发框架将解析器与界面描述文件打包后生成目标APP。本发明实施例将UI组件与对应的积木代码块转换为预设格式的界面描述文件，通过跨平台开发框架将解析器与界面描述文件一同打包得到跨平台的目标APP，使得在不同平台均可使用同一个解析器进行组件与代码逻辑的解析，有效提高跨平台APP的构建一致性。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种跨平台APP构建方法、装置、系统及介质。
背景技术
目前，用户终端的类型越来越多，包括个人计算机、手机、平板、智能电视等等，不同的用户终端可能搭载不同的操作系统，若每个应用的开发均针对不同的操作系统单独进行，会耗费大量人力物力，因此目前跨平台应用的开发越来越受重视。
现有的跨平台应用开发中，当在APP(application，应用程序)编辑器中编辑了相应的UI(user interface，用户界面)组件后，在运行时根据移动平台的不同，往往需要使用原生方案再一次实现全部或者部分UI组件，由于不同平台实现的UI组件的样式与逻辑可能不一致，因此会导致跨平台应用开发的一致性较差的问题。
因此，现有技术还有待于改进和发展。
发明内容
鉴于上述现有技术的不足，本发明的目的在于提供一种跨平台APP构建方法、装置、系统及介质，旨在解决现有技术中跨平台APP的构建一致性较差的问题。
本发明的技术方案如下：
一种跨平台APP构建方法，包括：
响应于对目标界面上预设组件库的第一编辑操作，在所述目标界面的可视化编辑区域编辑具有相应配置属性的UI组件；
响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块；
根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息；
获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP。
在一个实施例中，所述获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP之后，还包括：
当在终端上运行所述目标APP时，获取所述解析器对所述界面描述文件的解析结果；
根据所述解析结果在所述终端上生成相应的前端页面。
在一个实施例中，所述根据所述解析结果在所述终端上生成相应的前端页面，包括：
根据对所述UI组件配置信息的解析结果在所述终端上生成相应的静态UI界面；
根据所述积木解析信息调用相应的预设接口，通过所述预设接口为所述静态UI界面添加具有对应代码逻辑的动态效果后生成所述前端页面。
在一个实施例中，所述根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息，包括：
获取所述UI组件的配置属性，根据所述UI组件的配置属性生成预设格式的UI组件配置信息；
对与所述UI组件对应的积木代码块进行代码解析，生成相应的JS代码作为所述积木解析信息；
根据所述UI组件配置信息和积木解析信息生成预设格式的界面描述文件。
在一个实施例中，所述响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块，包括：
获取所述可视化编辑区域内的UI组件作为目标角色；
响应于对所述目标界面上预设积木库中积木模板的选中操作，在所述目标界面的可视化编程区域添加与所述目标角色对应的积木代码块；
响应于对所述积木代码块的拼接操作，调整所述积木代码块的拼接顺序。
在一个实施例中，所述根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，具体包括：
根据所述UI组件以及与所述UI组件对应的积木代码块生成JSON格式的界面描述文件。
在一个实施例中，所述通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP，具体包括：
通过Cordova框架将所述解析器与所述界面描述文件打包后生成目标APP。
一种跨平台APP构建装置，包括：
组件编辑模块，用于响应于对目标界面上预设组件库的第一编辑操作，在所述目标界面的可视化编辑区域编辑具有相应配置属性的UI组件；
积木编辑模块，用于响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块；
转换模块，用于根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息；
生成模块，用于获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP。
一种跨平台APP构建系统，所述系统包括至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述跨平台APP构建方法。
本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的跨平台APP构建方法。
有益效果：本发明公开了一种跨平台APP构建方法、装置、系统及介质，相比于现有技术，通过将UI组件与对应的积木代码块转换为预设格式的界面描述文件，并通过跨平台开发框架将解析器与界面描述文件一同打包得到跨平台的目标APP，使得在不同平台均可使用同一个解析器进行组件与代码逻辑的解析，有效提高跨平台APP的构建一致性。
附图说明
下面将结合附图及实施例对本发明作进一步说明，附图中：
图1为本发明实施例提供的跨平台APP构建方法的一个流程图；
图2为本发明实施例提供的跨平台APP构建方法中一个目标界面的示意图；
图3为本发明实施例提供的跨平台APP构建方法中另一个目标界面的示意图；
图4为本发明实施例提供的跨平台APP构建方法中解析器的一个结构框图；
图5为本发明实施例提供的跨平台APP构建装置的功能模块示意图；
图6为本发明实施例提供的跨平台APP构建系统的硬件结构示意图。
具体实施方式
为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。以下结合附图对本发明实施例进行介绍。
请参阅图1，图1为本发明提供的跨平台APP构建方法一个实施例的流程图。本实施例提供的跨平台APP构建方法适用于构建可跨平台运行的APP(application，应用程序)的情况，具体应用于开发调试设备，该开发调试设备可以通过软件和/或硬件的方式实现APP的开发构建与调试等，优选应用于包括开发调试设备、网络和服务器构成的系统，其中网络为用于在开发调试设备和服务器之间提供通信链路的介质，其可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等；开发调试设备上的操作系统可以包括手持设备操作系统(iPhone operating system，iOS系统)、安卓系统、微软操作系统或其他操作系统，所述开发调试设备通过网络连接到服务器以实现交互，从而进行接收或发送数据等操作，具体可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、便携式计算机和台式服务器等等。
如图1所示，该方法具体包括如下步骤：
S101、响应于对目标界面上预设组件库的第一编辑操作，在所述目标界面的可视化编辑区域编辑具有相应配置属性的UI组件。
本实施例中，通过预先安装在PC端或移动终端上的可视化APP构建工具进行APP构建操作，或者也可以通过网页浏览器跳转至指定链接后载入可视化APP构建工具进行APP构建操作，本实施例以在网页浏览器使用可视化APP构建工具为例进行介绍，实现基于web(world wide web，全球广域网)的跨平台APP构建。
当用户跳转至指定链接后将加载可视化APP构建工具，在所述可视化APP构建工具中具有一个目标界面，所述目标界面上包括了组件库触发区域和可视化编辑区域，所述组件库触发区域是用于触发显示预设组件库的控制区域，即所述目标界面上的预设组件库可以处于隐藏状态，通过点击所述组件库触发区域来显示所述预设组件库实现简洁且利用率高的目标界面，当然，所述预设组件库也可以直接处于显示状态，便于用户直接进行组件编辑操作，本实施例中对此不作限定。可以理解的是，所述目标界面上组件库触发区域、预设组件库的显示区域以及可视化编辑区域之间的相对位置以及尺寸大小均可以根据具有应用场景灵活调整，本实施例对此不作限定。
所述可视化编辑区域用于根据输入的第一编辑操作来展示相应的UI(userinterface，用户界面)组件，如图2所示，具体在触发显示了位于目标界面左侧的预设组件库后，可以由用户在预设组件库中输入第一编辑操作选择相应的UI组件并拖入位于目标界面右侧的可视化编辑区域中，所述预设组件库中保存有多种类型的UI组件，例如文本组件、按钮组件、输入框组件、图片框组件、单选框组件、复选框组件、网页浏览框组件、开关组件、滑动条组件等等，用户在所述预设组件库中灵活选择不同的UI组件在所述可视化编辑区域进行展示时，可进一步调整已选择的UI组件的组合顺序、位置、显示样式等等配置属性，进而得到具有相应配置属性的UI组件，实现灵活便捷的APP界面设计。
S102、响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块。
本实施例中，所述目标界面上还进一步包括了积木库触发区域和可视化编程区域，所述积木库触发区域是用于触发显示预设积木库的控制区域，即所述目标界面上的预设积木库可以处于隐藏状态，通过点击所述积木库触发区域来显示所述预设积木库实现简洁且利用率高的目标界面，当然，所述预设积木库也可以直接处于显示状态，便于用户直接进行积木编程操作，本实施例中对此不作限定。可以理解的是，所述目标界面上积木库触发区域、预设积木库的显示区域以及可视化编程区域之间的相对位置以及尺寸大小均可以根据具有应用场景灵活调整，本实施例对此不作限定。
所述可视化编程区域用于根据输入的第二编辑操作来展示与所述UI组件对应的积木代码块，具体所述积木代码块是指可视化编程中用来代替代码片段的块状结构，每个积木代码块中均封装有触发相应事件或者实现相应功能的代码，通过对积木代码块进行可视化的编辑操作，即可实现便捷高效的编程过程。如图3所示，当在目标页码的可视化编辑区域编辑了若干个UI组件后，可触发显示位于目标界面中部的预设积木库，之后可以由用户在预设积木库中输入第二编辑操作选择相应的积木代码块并拖入位于目标界面右侧的可视化编程区域中，通过所述积木代码块来对当前可视化编辑区域内的UI组件进行逻辑描述，也就是说，所述UI组件将按照所述积木代码块执行时的逻辑来触发相应事件或者实现相应的功能，使得所述UI组件由静态转为动态，实现APP界面灵活丰富的交互功能。
进一步地，所述应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块，包括：
获取所述可视化编辑区域内的UI组件作为目标角色；
响应于对所述目标界面上预设积木库中积木模板的选中操作，在所述目标界面的可视化编程区域添加与所述目标角色对应的积木代码块；
响应于对所述积木代码块的拼接操作，调整所述积木代码块的拼接顺序。
本实施例中，在具体编辑积木代码块时，先获取当前已编辑的UI组件作为目标角色，所述目标角色是运行所述积木代码块时该运行事件的对象，即对所述目标角色执行所述积木代码块所对应的事件、展示相应的执行结果，将已编辑的UI组件作为目标角色进行可视化编程操作，可以由用户在所述预设积木库中对相应的积木模板进行选中操作，根据被选中的积木模板在所述可视化编程区域内添加与所述目标角色对应的积木代码块，具体所述预设积木库中包括了不同类型的积木模板，具体包括事件积木块和功能积木块，其中所述事件积木块用于描述当发生预设事件时进行触发，例如事件积木库可以有多种，包括但不限于当角色被点击时、当开始被点击时、当屏幕被点击时等等，所述功能积木块是指除了事件积木块以外，可以执行目标角色的某些功能，例如移动、等待、颜色设置、运算功能、传感功能、列表功能、函数功能、通讯功能等等的积木代码块，被添加至所述可视化编程区域内的积木代码块，均以所述目标角色作为运行对象，并且可由用户进一步输入拼接操作来调整所述积木代码块的拼接顺序，进而调整相应的逻辑顺序，即本实施例在实现图形化界面编辑的基础上进一步通过图形化编程，以简单便捷的积木代码块拼接的方式来描述APP界面上各个UI组件的运行逻辑，有效提高了APP构建的效率以及可视化程度。
S103、根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息。
在编辑了UI组件实现APP的界面布局，且通过图形的积木代码块描述UI组件的运行逻辑后，通过组合所述UI组件以及对应的积木代码块生成预设格式的界面描述文件，具体是生成JSON(javascript object notation,JS对象简谱)格式的界面描述文件，也就是说，在完成了UI编辑与积木代码编辑后，将当前组合的UI组件的配置属性以及与所述UI组件对应的积木代码块转换为统一的JSON格式的界面描述文件，JSON是一种轻量级的数据交换格式，其采用完全独立于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得JSON成为理想的数据交换语言，更加易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率，通过通用代码格式的JSON界面描述文件来保存当前目标界面上的UI组件配置信息与积木解析信息，为跨平台APP提供统一的界面数据，避免出现不同平台UI组件不一致的情况。
进一步地，所述根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息，包括：
获取所述UI组件的配置属性，根据所述UI组件的配置属性生成预设格式的UI组件配置信息；
对与所述UI组件对应的积木代码块进行代码解析，生成相应的JS代码作为所述积木解析信息；
根据所述UI组件配置信息和积木解析信息生成预设格式的界面描述文件。
本实施例中，在生成所述界面描述文件时，先获取当前已编辑的所述UI组件的配置属性，具体所述配置属性包括各个UI组件的类型、组合顺序、位置、显示样式等等，将所述UI组件的配置属性转换为JSON格式后得到对应的UI组件配置信息，即所述UI组件配置信息是一个JSON格式的界面作品文件，描述了目标界面上各个UI组件的静态配置。并且对与所述UI组件对应的积木代码块进行代码解析，将积木代码块转换为Web方式可运行的JS(JavaScript，Java脚本)代码，JavaScript作为网页浏览器上的一种编程语言，将其作为积木代码块的解析转码语言可实现在网页浏览器上的代码运行，将转码后的JavaScript代码作为所述积木解析信息以用于描述UI组件的运行逻辑，能直接在网页上运行积木代码块实现各个UI组件的动态交互，无需用户下载客户端，更加便捷高效，因此组合所述UI组件配置信息和积木解析信息后即可生成JSON格式的界面描述文件，实现简单便捷的纯Web方式的UI组件编辑与代码运行。
S104、获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP。
在生成了预设格式的界面描述文件来作为统一的跨平台APP界面数据后，需组合UI组件和积木代码块的功能来构建出可运行所述界面描述文件的Web应用程序，具体通过获取预先构建的解析器来实现，即所述解析器为可运行所述界面描述文件的Web应用程序，如图4所示，所述解析器中内置有与预设组件库相对应的UI组件，并且还为积木代码块提供了逻辑代码运行环境，将所述界面描述文件导入所述解析器后，所述解析器可通过对所述界面描述文件进行解析并以相应的逻辑运行，从而实现通过Web访问的Web应用程序，Web应用程序的好处是用户很容易访问应用程序，只需要有浏览器即可，不需要再安装其他软件。
本实施例中，在基于Web实现了目标APP的UI组件编辑、代码逻辑编辑以及解析运行后，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP，具体是通过Cordova框架将所述解析器与所述界面描述文件打包后生成目标APP，其中，Cordova是使用HTML(hyper text markup language，超文本标记语言)，CSS(cascadingstyle sheets，层叠样式表)和JS(JavaScript，Java脚本)构建移动应用的平台，其支持多种操作系统，可以认为Cordova是一个容器，其中提供了一组与本地设备相关的API，用于将Web应用程序与本机移动功能连接，由于默认情况下，Web应用程序不能使用本机移动功能，而通过Cordova框架为Web应用程序和移动设备之间的连接提供了桥梁，通过使用Cordova框架，Web应用程序能够以JavaScript访问原生的本机移动功能，如摄像头、麦克风等，通过Cordova框架将解析器与界面描述文件一同打包得到跨平台的目标APP，使得在不同平台均可使用同一个解析器进行组件与代码逻辑的解析运行，有效提高跨平台APP的构建一致性。
可以理解的是，Cordova框架仅为一种可行的跨平台开发框架，还可以为其他框架，如ionic框架，具体此处不做限定。
进一步地，所述步骤S104之后，还包括：
当在终端上运行所述目标APP时，获取所述解析器对所述界面描述文件的解析结果；
根据所述解析结果在所述终端上生成相应的前端页面。
本实施例中，在构建了可跨平台运行的目标APP后，当在搭载了跨平台开发框架所支持的操作系统的终端上运行所述目标APP时，所述解析器将对所述界面描述文件进行解析，进而根据解析结果在所述终端上生成相应的前端页面，此时在所述终端上生成的前端页面将具有与界面描述文件相应的UI组件配置以及交互运行逻辑，实现目标APP的跨移动平台运行。
具体地，所述根据所述解析结果在所述终端上生成相应的前端页面，包括：
根据对所述UI组件配置信息的解析结果在所述终端上生成相应的静态UI界面；
根据所述积木解析信息调用相应的预设接口，通过所述预设接口为所述静态UI界面添加具有对应代码逻辑的动态效果后生成所述前端页面。
本实施例中，在运行所述目标APP时，通过所述解析器对预设格式的界面描述文件进行解析，具体先根据其中的UI组件配置信息的解析结果在所述终端上生成相应的静态UI界面，此时的APP界面是静态的没有逻辑的，需要进一步通过所述积木解析信息，即积木代码块的解析结果进行逻辑描述，由于在生成所述界面描述文件时，已经将所述积木代码块转换为了Web方式可运行的JavaScript代码作为积木解析信息，因此可直接执行与所述积木代码块对应的JavaScript代码，在执行所述JavaScript代码时则进一步根据代码中包含的函数调用解析器中提供的预设API(application programming interface，应用程序接口)，通过调用相应的预设API为所述静态UI界面添加具有对应代码逻辑的动态效果，具体所述动态效果可以是文本组件的字体颜色变化、输入框组件的位置变化等，通过执行所述JavaScript代码以控制UI组件的运行逻辑，并通过预设API添加相应的动态效果后从而生成所述前端页面，在运行该跨平台的目标APP时，所述UI组件以及预设API均只需要实现一次，不需要为每个平台单独实现一套UI组件与运行逻辑，有效降低的开发成本且保证了组件的一致性。
为更好地理解本发明提供的跨平台APP构建方法的实现过程，以下结合图3和图4，举具体的应用实施例对跨平台APP构建的过程进行详细描述：
当用户跳转至指定链接后将加载可视化APP构建工具，在所述可视化APP构建工具中具有一个目标界面，所述目标界面上包括了预设组件库的显示区域、可视化编辑区域、预设积木库的显示区域和可视化编程区域，即所述目标界面上直接显示了所述预设组件库和预设积木库，用户在预设组件库中输入第一编辑操作选择相应的UI组件并拖入位于预设组件库右侧的可视化编辑区域中，如图3所示，可拖入多种不同类型的UI组件并进一步调整多个UI组件的组合顺序、位置、显示样式等等。之后将当前已编辑的UI组件作为目标角色，在目标界面右侧的可视化编程区域内进行积木编程，用户在所述预设积木库中对相应的积木模板进行选中操作，根据被选中的积木模板在所述可视化编程区域内添加与所述目标角色对应的积木代码块，被添加至所述可视化编程区域内的积木代码块，均以所述目标角色作为运行对象，并且可由用户进一步输入拼接操作来调整所述积木代码块的拼接顺序，进而调整相应的逻辑顺序，如图3所示，为UI组件中的按钮组件配置的积木代码块为一个事件积木块“当按钮被点击时”，为UI组件中的文本组件配置的积木代码块为一个功能积木块“设置文本的文本颜色为黑色”等等，进而为当前编辑的各个UI组件添加了动态的运行逻辑，使得后续APP在运行时，则按积木代码块的拼接逻辑执行相应的界面交互功能。
在编辑了UI组件实现APP的界面布局，且通过图形的积木代码块描述UI组件的运行逻辑后，通过组合所述UI组件以及对应的积木代码块生成JSON格式的界面描述文件，具体将获取到的所述UI组件的配置属性转换为JSON格式后得到对应的UI组件配置信息，并对与所述UI组件对应的积木代码块进行代码解析，将积木代码块转换为Web方式可运行的JS(JavaScript)代码，进而组合得到JSON格式的界面描述文件。
在生成了JSON格式的界面描述文件来作为统一的跨平台APP界面数据后，进一步构建可运行所述界面描述文件的Web应用程序即解析器，具体所述解析器中内置有与预设组件库相对应的UI组件，并且还为积木代码块提供了逻辑代码运行环境，将所述界面描述文件导入所述解析器后，所述解析器可通过对所述界面描述文件进行解析并以相应的逻辑运行，在基于Web实现了目标APP的UI组件编辑、代码逻辑编辑以及解析运行后，通过Cordova框架将所述解析器与所述界面描述文件打包后生成目标APP，通过Cordova框架将解析器与界面描述文件一同打包得到跨平台的目标APP，使得在不同平台均可使用同一个解析器进行组件与代码逻辑的解析运行，有效提高跨平台APP的构建一致性。
由以上方法实施例可知，本发明提供的跨平台APP构建方法通过将UI组件与对应的积木代码块转换为预设格式的界面描述文件，并通过跨平台开发框架将解析器与界面描述文件一同打包得到跨平台的目标APP，使得在不同平台均可使用同一个解析器进行组件与代码逻辑的解析，有效提高跨平台APP的构建一致性。
需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。
本发明另一实施例提供一种跨平台APP构建装置，如图5所示，装置500包括：
组件编辑模块501，用于响应于对目标界面上预设组件库的第一编辑操作，在所述目标界面的可视化编辑区域编辑具有相应配置属性的UI组件；
积木编辑模块502，用于响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块；
转换模块503，用于根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息；
生成模块504，用于获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP。
所述组件编辑模块501、积木编辑模块502、转换模块503和生成模块504依次连接，本发明所称的模块是指能够完成特定功能的一系列计算机程序指令段，比程序更适合于描述所述跨平台APP构建的执行过程，各模块的具体实施方式请参考上述对应的方法实施例，此处不再赘述。
进一步地，所述跨平台APP构建装置还包括：
获取模块，用于当在终端上运行所述目标APP时，获取所述解析器对所述界面描述文件的解析结果；
页面生成模块，用于根据所述解析结果在所述终端上生成相应的前端页面。
进一步地，所述页面生成模块包括：
静态界面生成单元，用于根据对所述UI组件配置信息的解析结果在所述终端上生成相应的静态UI界面；
动态逻辑生成单元，用于根据所述积木解析信息调用相应的预设接口，通过所述预设接口为所述静态UI界面添加具有对应代码逻辑的动态效果后生成所述前端页面。
进一步地，所述转换模块503包括：
转换单元，用于获取所述UI组件的配置属性，根据所述UI组件的配置属性生成预设格式的UI组件配置信息；
解析单元，用于对与所述UI组件对应的积木代码块进行代码解析，生成相应的JS代码作为所述积木解析信息；
文件生成单元，用于根据所述UI组件配置信息和积木解析信息生成预设格式的界面描述文件。
进一步地，所述积木编辑模块502包括：
角色获取单元，用于获取所述可视化编辑区域内的UI组件作为目标角色；
积木添加单元，用于响应于对所述目标界面上预设积木库中积木模板的选中操作，在所述目标界面的可视化编程区域添加与所述目标角色对应的积木代码块；
积木拼接单元，用于响应于对所述积木代码块的拼接操作，调整所述积木代码块的拼接顺序。
进一步地，所述转换模块503具体用于：
根据所述UI组件以及与所述UI组件对应的积木代码块生成JSON格式的界面描述文件。
进一步地，所述生成模块504具体用于：
通过Cordova框架将所述解析器与所述界面描述文件打包后生成目标APP。
本发明另一实施例提供一种跨平台APP构建系统，如图6所示，系统600包括：
一个或多个处理器601以及存储器602，图6中以一个处理器601为例进行介绍，处理器601和存储器602可以通过总线或者其他方式连接，图6中以通过总线连接为例。
处理器601用于完成系统600的各种控制逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器601还可以是任何传统处理器、微处理器或状态机。处理器601也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP和/或任何其它这种配置。
存储器602作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的跨平台APP构建方法对应的程序指令。处理器601通过运行存储在存储器602中的非易失性软件程序、指令以及单元，从而执行系统600的各种功能应用以及数据处理，即实现上述方法实施例中的跨平台APP构建方法。
存储器602可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据系统600使用所创建的数据等。此外，存储器602可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器602可选包括相对于处理器601远程设置的存储器，这些远程存储器可以通过网络连接至系统600。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
一个或者多个单元存储在存储器602中，当被一个或者多个处理器601执行时，执行上述任意方法实施例中的跨平台APP构建方法，例如，执行以上描述的图1中的方法步骤S101至步骤S104。
本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S101至步骤S104。
作为示例，非易失性存储介质能够包括只读存储器(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)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。
综上所述，本发明公开的一种跨平台APP构建方法、装置、系统及介质中，方法通过响应于对预设组件库的第一编辑操作，在可视化编辑区域编辑相应的UI组件；响应于对预设积木库的第二编辑操作，在可视化编程区域编辑与UI组件对应的积木代码块；根据UI组件以及与UI组件对应的积木代码块生成预设格式的界面描述文件；构建用于解析界面描述文件的解析器，通过预设的跨平台开发框架将解析器与界面描述文件打包后生成目标APP。本发明实施例将UI组件与对应的积木代码块转换为预设格式的界面描述文件，通过跨平台开发框架将解析器与界面描述文件一同打包得到跨平台的目标APP，使得在不同平台均可使用同一个解析器进行组件与代码逻辑的解析，有效提高跨平台APP的构建一致性。
当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的计算机程序可存储于一非易失性计算机可读取的存储介质中，该计算机程序在执行时可包括如上述各方法实施例的流程。其中所述的存储介质可为存储器、磁碟、软盘、闪存、光存储器等。
应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。
Claims (10)
1.一种跨平台应用程序APP构建方法，其特征在于，包括如下步骤：
响应于对目标界面上预设组件库的第一编辑操作，在所述目标界面的可视化编辑区域编辑具有相应配置属性的用户界面UI组件；
响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块；
根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息；
获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP。
2.根据权利要求1所述的跨平台APP构建方法，其特征在于，所述获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP之后，还包括：
当在终端上运行所述目标APP时，获取所述解析器对所述界面描述文件的解析结果；
根据所述解析结果在所述终端上生成相应的前端页面。
3.根据权利要求2所述的跨平台APP构建方法，其特征在于，所述根据所述解析结果在所述终端上生成相应的前端页面，包括：
根据对所述UI组件配置信息的解析结果在所述终端上生成相应的静态UI界面；
根据所述积木解析信息调用相应的预设接口，通过所述预设接口为所述静态UI界面添加具有对应代码逻辑的动态效果后生成所述前端页面。
4.根据权利要求1所述的跨平台APP构建方法，其特征在于，所述根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息，包括：
获取所述UI组件的配置属性，根据所述UI组件的配置属性生成预设格式的UI组件配置信息；
对与所述UI组件对应的积木代码块进行代码解析，生成相应的JS代码作为所述积木解析信息；
根据所述UI组件配置信息和积木解析信息生成预设格式的界面描述文件。
5.根据权利要求1所述的跨平台APP构建方法，其特征在于，所述响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块，包括：
获取所述可视化编辑区域内的UI组件作为目标角色；
响应于对所述目标界面上预设积木库中积木模板的选中操作，在所述目标界面的可视化编程区域添加与所述目标角色对应的积木代码块；
响应于对所述积木代码块的拼接操作，调整所述积木代码块的拼接顺序。
6.根据权利要求1-5任意一项所述的跨平台APP构建方法，其特征在于，所述根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，具体包括：
根据所述UI组件以及与所述UI组件对应的积木代码块生成JSON格式的界面描述文件。
7.根据权利要求1-5任意一项所述的跨平台APP构建方法，其特征在于，所述通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP，具体包括：
通过Cordova框架将所述解析器与所述界面描述文件打包后生成目标APP。
8.一种跨平台APP构建装置，其特征在于，所述装置包括：
组件编辑模块，用于响应于对目标界面上预设组件库的第一编辑操作，在所述目标界面的可视化编辑区域编辑具有相应配置属性的UI组件；
积木编辑模块，用于响应于对所述目标界面上预设积木库的第二编辑操作，在所述目标界面的可视化编程区域编辑与所述UI组件对应的积木代码块；
转换模块，用于根据所述UI组件的配置属性以及与所述UI组件对应的积木代码块生成预设格式的界面描述文件，所述界面描述文件包括UI组件配置信息与积木解析信息；
生成模块，用于获取用于解析所述界面描述文件的解析器，通过预设的跨平台开发框架将所述解析器与所述界面描述文件打包后生成目标APP。
9.一种跨平台APP构建系统，其特征在于，所述系统包括至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7任一项所述的跨平台APP构建方法。
10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的跨平台APP构建方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110763862.XA CN113778405A (zh) | 2021-07-06 | 2021-07-06 | 一种跨平台app构建方法、装置、系统及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110763862.XA CN113778405A (zh) | 2021-07-06 | 2021-07-06 | 一种跨平台app构建方法、装置、系统及介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113778405A true CN113778405A (zh) | 2021-12-10 |
Family
ID=78835878
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110763862.XA Pending CN113778405A (zh) | 2021-07-06 | 2021-07-06 | 一种跨平台app构建方法、装置、系统及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113778405A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116009850A (zh) * | 2023-03-28 | 2023-04-25 | 西安热工研究院有限公司 | 工业控制数据二次开发方法、系统、设备及介质 |
| CN117234470A (zh) * | 2023-10-08 | 2023-12-15 | 开物数智(安徽)智能科技有限公司 | 一种基于低代码平台的跨端表单开发系统及方法 |
-
2021
- 2021-07-06 CN CN202110763862.XA patent/CN113778405A/zh active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116009850A (zh) * | 2023-03-28 | 2023-04-25 | 西安热工研究院有限公司 | 工业控制数据二次开发方法、系统、设备及介质 |
| CN117234470A (zh) * | 2023-10-08 | 2023-12-15 | 开物数智(安徽)智能科技有限公司 | 一种基于低代码平台的跨端表单开发系统及方法 |
| CN117234470B (zh) * | 2023-10-08 | 2024-02-23 | 开物数智(安徽)智能科技有限公司 | 一种基于低代码平台的跨端表单开发系统及方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11188310B2 (en) | Automatically generating an interface description in an interface description language | |
| CN109117138B (zh) | 一种组态方法及装置、计算机可读存储介质 | |
| KR101416089B1 (ko) | 웹 어플리케이션 저작을 위한 통합 플랫폼 및 그 저작 방법 | |
| CN111158818A (zh) | 一种页面渲染方法和装置 | |
| US20170286068A1 (en) | Development support system | |
| CN107943997B (zh) | 一种基于谷歌浏览器的远程网站取证方法、终端设备及存储介质 | |
| CN112083920A (zh) | 一种前端页面设计方法、装置、存储介质及设备 | |
| KR101416104B1 (ko) | 하이브리드 웹 어플리케이션의 네이티브 기능을 수행하는 자바스크립트 코드의 동적 로딩 장치와 방법 | |
| KR101416100B1 (ko) | 하이브리드 웹 어플리케이션에서 자바스크립트 연동을 위한 인터페이스 | |
| CN110389755B (zh) | 代码处理方法及装置、电子设备和计算机可读存储介质 | |
| CN112882703B (zh) | 一种自定义图表插件在线设计方法及装置 | |
| US20230229406A1 (en) | Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product | |
| CN111176629A (zh) | 一种应用开发的方法和装置 | |
| CN113778405A (zh) | 一种跨平台app构建方法、装置、系统及介质 | |
| US20240160410A1 (en) | Application Development Platform, Micro-program Generation Method, and Device and Storage Medium | |
| WO2023082654A1 (zh) | 一种业务交互图生成方法、装置、设备及存储介质 | |
| CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
| US20130290934A1 (en) | Monitoring applications executing on a computer device using programmatic triggers | |
| CN114116443A (zh) | 一种页面数据传递方法、装置、系统及介质 | |
| CN111078217A (zh) | 脑图生成方法、装置和计算机可读存储介质 | |
| CN108287720B (zh) | 软件编译方法、装置、设备及存储介质 | |
| WO2024066825A1 (zh) | 页面项目开发方法、装置、设备、介质及产品 | |
| CN112015410A (zh) | 网页编辑方法、装置、系统以及计算机存储介质 | |
| CN111857782B (zh) | 界面更新方法、装置、计算机设备和存储介质 | |
| CN113849164A (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 |