CN113064593A - 移动app动态化的方法、装置、计算机设备及存储介质 - Google Patents

移动app动态化的方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN113064593A
CN113064593A CN202110389727.3A CN202110389727A CN113064593A CN 113064593 A CN113064593 A CN 113064593A CN 202110389727 A CN202110389727 A CN 202110389727A CN 113064593 A CN113064593 A CN 113064593A
Authority
CN
China
Prior art keywords
module
mapping
dart
framework
vuejs
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.)
Granted
Application number
CN202110389727.3A
Other languages
English (en)
Other versions
CN113064593B (zh
Inventor
吴雪含
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Huoli Tianhui Technology Co ltd
Original Assignee
Shenzhen Huoli Tianhui Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shenzhen Huoli Tianhui Technology Co ltd filed Critical Shenzhen Huoli Tianhui Technology Co ltd
Priority to CN202110389727.3A priority Critical patent/CN113064593B/zh
Publication of CN113064593A publication Critical patent/CN113064593A/zh
Application granted granted Critical
Publication of CN113064593B publication Critical patent/CN113064593B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation 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)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种移动APP动态化的方法、装置、计算机设备及存储介质,所述方法包括前端框架部分和Flutter框架部分;其中,前端框架部分包括:建立JS框架层;构建加载器,加载器用于生成在JS框架层中运行的JS脚本文件;Flutter框架部分包括:实现JS和Dart的双向通信;针对Dart代码中使用了注解的类和类方法,生成字符串与类、字符串与类方法的映射表;构建Dart页面布局管理器、构建映射组件和映射模块;当移动APP加载JS框架层时,对JS脚本文件中每一个运行实例进行管理,以实现动态化。本发明的技术方案在实现移动APP动态化的同时,还可以实现数据动态绑定,更丰富的指令,适用更广的业务需求。

Description

移动APP动态化的方法、装置、计算机设备及存储介质
技术领域
本发明涉及信息处理领域,尤其涉及一种移动APP动态化的方法、装置、计算机设备及存储介质。
背景技术
随着移动互联网技术的发展,移动APP的动态化是当前流行的技术趋势。移动APP动态化是指移动应用程序发布后能实现动态化自我更新,以满足在线升级、问题修复、数据更新等多种现实需求。例如,当发布的Android/iOS APP遇到问题或者有新的更新需求,在APP动态化之前的方案是通过开发人员编写代码,重新上传新版本的App安装包到应用商城,再由用户下载实现更新。由于一般需要较长的应用商店审核时间及用户主动更新,不便于及时解决问题。
目前,通过Flutter(由Google的工程师团队所打造的用于创建高性能、跨平台的移动应用的开发框架)框架开发的Android/iOS App,主要通过Fair和MXFlutter框架实现APP的动态化。然而,两者均存在不足:在Fair框架中,只有定位是布局动态化的,而不支持动态下发逻辑运算,因此只能简单的更新页面布局。在MXFlutter框架中,MXFlutter严重依赖于Flutter的版本,存在兼容性的问题。此外,由于Flutter框架使用较小众的Dart语言,开发人员需要重新学习Dart语言,学习成本大,影响开发效率。
发明内容
本发明实施例提供一种移动APP动态化的方法、系统、计算机设备及存储介质,以解决上述现有技术中的不足,在实现移动APP动态化的同时,可以实现数据动态绑定,更丰富的指令,适用更广的业务需求。
一种移动APP动态化的方法,所述移动APP动态化的方法由VueJS前端框架部分和Flutter框架部分构成;
所述VueJS前端框架部分包括:
建立带有VueJS运行库的JS框架层,所述JS框架层包括渲染指令树、Vue多页面实例、桥接器,以及与浏览器所提供的文档对象模型的API功能相对应的接口;
通过VueJS框架构建加载器,所述加载器用于生成在所述JS框架层中运行的JS脚本文件,并将所述JS脚本文件部署到预设服务器上;
所述Flutter框架部分包括:
通过JSC虚拟机构建第一运行时,所述第一运行时用于实现JS和Dart的双向通信;
针对Dart代码中使用了注解的类和类方法,通过编译工具生成字符串与所述类、字符串与所述类方法的映射表;
构建Dart页面布局管理器,所述Dart页面布局管理器用于对页面进行增、删、改、查及动态布局;
构建映射组件和映射模块,并将所述映射组件和映射模块注入到所述JS框架层中供所述VueJS前端框架部分进行调用和使用;
当由所述Flutter框架开发的移动APP加载所述JS框架层时,通过创建第二运行时对所述JS脚本文件中每一个运行实例进行管理。
一种移动APP动态化的装置,其特征在于,所述移动APP动态化的装置由VueJS前端框架部分和Flutter框架部分构成;
所述VueJS前端框架部分包括:
JS框架层构建模块,用于建立带有VueJS运行库的JS框架层,所述JS框架层包括与浏览器所提供的文档对象模型的API功能相对应的接口、渲染指令树、Vue多页面实例以及桥接器;
加载器构建模块,用于通过VueJS框架构建加载器,所述加载器用于生成在所述JS框架层中运行的JS脚本文件,并将所述JS脚本文件部署到预设服务器上;
所述Flutter框架部分包括:
虚拟机构建模块,用于通过JSC虚拟机构建第一运行时,所述第一运行时用于实现JS和Dart的双向通信;
反射与注解模块,用于针对Dart代码中使用了注解的类和类方法,通过编译工具生成字符串与所述类、字符串与所述类方法的映射表;
页面布局管理模块,用于构建Dart页面布局管理器,所述Dart页面布局管理器用于对页面进行增、删、改、查及动态布局;
映射组件及模块构建模块,用于构建映射组件和映射模块,并将所述映射组件和映射模块注入到所述JS框架层中供所述VueJS前端框架部分进行调用和使用;
Vue实例动态化管理模块,用于当由所述Flutter框架开发的移动APP加载所述JS框架层时,通过创建第二运行时对所述JS脚本文件中每一个运行实例进行管理。
一种计算机设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述移动APP动态化的方法的步骤。
一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现上述移动APP动态化的方法的步骤。
上述移动APP动态化的方法、装置、计算机设备及存储介质,包括VueJS前端框架部分和Flutter框架部分;其中,对于VueJS前端框架部分,通过JavaScript实现带VueJS运行库的JS框架层,即中间层,对上提供了与浏览器提供的DOM(文档对象模型)API功能相对应的接口,实现与客户端浏览器的通信,对下连接JS(JavaScript)与Flutter的Dart层通信;通过VueJS框架所构建的加载器,用于生成JS脚本文件(即JSBundle),并通过部署在预设服务器上用于让客户端下载后根据JSBundle进行动态化更新。
对于Flutter框架部分,即在通过Flutter开发APP的过程中,在移动APP中预置JS和Dart的双向通信环境,以抹平远端服务器上JS与本地客户端运行环境的差异;通过反射技术对Dart代码中使用了注解的类和类方法进行映射、构建Dart页面布局管理器、映射组件和映射模块,便于当移动APP加载JS框架层时,对JS脚本文件中的每一具体运行实例进行动态化管理。
与传统Flutter开发模式相比,本技术方案具有如下特点:
1)发布后的移动APP不需要用户主动介入升级、更新等操作,也无需等待应用市场对上架APP进行审核,只需对预设服务器上的JSBundle文件进行随时修改、随时发布,移动APP将自动获取JSBundle文件并实现动态化;
2)本技术方案基于VueJS框架和JavaScript语言开发,不仅开发业务的页面布局业务逻辑的效率更高效,而且无需开发人员重新学习基于Dart语言的Flutter框架,开发人员上手更快,开发效率更高;
3)使用注解和反射实现动态创建Dart类实例和动态调用实例的方法,可以动态化的适应更复杂的移动APP;
4)使用Dart标准库FFI对JSC库的对外接口进行封装,省掉了传统Native层采用MethodChannel的通信方法,使得JS与Dart之间通信效率更高。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对本发明实施例的描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1是本发明一实施例中移动APP动态化的方法的一应用环境示意图;
图2是本发明一实施例中移动APP动态化的方法的流程图;
图3是本发明一实施例中移动APP动态化的方法的整体架构图;
图4是本发明一实施例中移动APP动态化的方法中页面动态渲染流程图;
图5是本发明一实施例中移动APP动态化的装置的示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明提供的移动APP动态化的方法,应用在如图1所示的应用环境中。其中,开发端是指开发人员所使用的计算机设备,VueJS(一套用于构建用户界面的渐进式框架,其核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合)前端框架部分均在开发端完成;服务端即提供Web服务的服务器,也即部署JS脚本文件的服务器;客户端是指装有移动APP的用户终端,包括智能手机、平板电脑等;Flutter框架部分是由开发人员在开发端通过Flutter框架实现,当由Flutter框架开发而成的移动APP(或称为Flutter客户端)发布之后,移动APP通过从服务端下载JS脚本文件(或称JSBundle文件)进行动态化更新。
在一实施例中,如图2所示,提供了一种移动APP动态化的方法,包括VueJS前端框架部分和Flutter框架部分,并具体包括如下步骤:
VueJS前端框架部分包括步骤:
S1:建立带有VueJS运行库的JS框架层,JS框架层包括渲染指令树、Vue多页面实例、桥接器,以及与浏览器所提供的文档对象模型的API功能相对应的接口。
JS框架层,或称JS-Framework层,相当于一中间层。由于前端框架VueJS在Flutter中和在浏览器中的执行过程不一样,没有浏览器提供的一个Web环境,所以需要实现一个JS-Framework层,起到承上启下的作用,对上向VueJS提供接口来实现前端框架的对接,并管理每一个Vue页面的运行实例,对下与Flutter通信,衔接Flutter层提供的能力传送给VueJS框架层。
具体地,通过JavaScript语实现JS-Framework层,并具体实现一套与浏览器提供的文档对象模型(DOM,Document Object Model)的API功能基本一致的接口,分别用于获取页面节点、监听客户端的任务、注册组件、注册模块、页面初始化、创建、刷新、销毁等。渲染指令树是用于动态渲染页面的命令;Vue多页面实例用于Vue实例的隔离和管理;桥接器(Bridge)用于该层内JS与Dart的通信。
S2:通过VueJS框架构建加载器,加载器用于生成在JS框架层中运行的JS脚本文件,并将JS脚本文件部署到预设服务器上。
加载器(loader)用于生成JS脚本文件(JSBundle文件),JS脚本文件部署到提供Web服务的服务器上之后供客户端下载。
优选地,加载器包括页面模板加载器(页面模板loader)和CSS加载器(CSSloader),页面模板加载器和CSS加载器通过打包编译,将Vue源代码编译成JS脚本文件。
举例来说,具体细节在于注册VueLoaderPlugin在插件中,会复制当前项目webpack(一种模块打包器)配置中的rules项,当资源路径包含query.lang时通过resourceQuery匹配相同的rules并执行对应loader时插入一个公共的loader,并在pitch阶段根据query.type插入对应的自定义loader,在加载*.vue时会调用vue-loader.vue文件被解析成一个descriptor对象,包含template、script、styles等属性对应各个标签,对于template中的每一个标签进行检查,其标签名是否是存在于Flutter中组件映射表中,在stylePostLoader中,通过PostCSS解析style标签内容,对Flutter中常用Widget的属性进行支持。
Flutter框架部分包括:
S3:通过JSC虚拟机构建第一运行时,第一运行时用于实现JS和Dart的双向通信。
JSC虚拟机即JavaScriptCoreRuntime,用于执行JavaScriptCore库。对于iOS系统,其内部已内置JavaScriptCore库;而对于Android系统,将开源JavaScriptCore库拷贝至Android工程即可。
优选地,通过JSC虚拟机构建第一运行时,包括步骤:
S31:使用Dart标准库FFI对JSC虚拟机中的JSC库的对外接口进行封装,构建实现JavaScript的第一运行时。
具体地,使用Dart语言封装JavaScriptCore库对外的接口类JSClass,JSContext,JSContextGroup,JSValue,JSString,JSObject等等。由于Dart语言通过FFI的lookup函数可以直接调用集成在native层的JavaScriptCore库的相关接口,取得其函数指针,因此,根据该原理创造了一个可以在Dart环境下直接执行JS脚本语言的环境,并且省掉了Natice层MethodChannel的通信方法,使得JS与Dart之间通信效率更高。
S4:针对Dart代码中使用了注解的类和类方法,通过编译工具生成字符串与类、字符串与类方法的映射表。
具体地,运用Dart的注解和反射机制来实现通过字符串动态创建Dart语言编写的类的实例和该实例的方法。通过使用自定义注解的方式,将所有Dart编写的代码中,凡是使用了注解的类和方法,通过编译工具生成一张字符串到类映射表,字符串到类方法,实例方法参数的映射表,从而间接的实现了反射原理,实现了可以通过字符串动态创建类和函数方法的调用。
其中,具体注解的细节举例如下:使用@Component注解来标示该类是一个组件,该组件可以通过字符串动态在上一步生成的组件映射表中找到该类,从而创建实例。使用@JSMethod注解来标示该方法可以通过字符串动态的在映射表中找到对应方法名,实现对该方法调用。使用@Module注解来标示该类是一个模块,该模块可以通过字符串动态在映射表中找到对应模块名,从而创建实例。
S5:构建Dart页面布局管理器,Dart页面布局管理器用于对页面进行增、删、改、查及动态布局。
具体地,实现一个Dart页面布局的管理器,该页面布局管理器提供对页面进行增删改查的接口。
其中,具体的细节举例如下:由于每一个页面都有唯一的页面id,该页面的结构为具有唯一根节树形结构,树的每一个字节点都是一个组件,该组件节点标示上一步中所描述的@Component注解,所以该节点可以动态创建。该组件节点定义成一个Node节点,该节点的数据结构为包含了一个所属页面的id,该元素在页面树中唯一ref,该元素的父节点,该元素的子节点,该元素的事件名(如果改元素可响应事件),该元素的样式属性。其中组件结构中id和ref的结合起来的唯一用来提供找到该组件元素,元素的样式属性用来定义一个组件的展示外观和显示内容。通过这些设计,实现了对页面树中的每个组件元素的增删改查。
S6:构建映射组件和映射模块,并将映射组件和映射模块注入到JS框架层中供VueJS前端框架部分进行调用和使用。
映射组件对应常用的Widget映射组件,映射模块对应常用的Module映射模块,将二者注入到JS-framework层中以供前端VueJS可以使用Flutter层的组件和调用用Flutter层的模块。
优选地,建映射组件包括布局组件、容器组件、元素展示组件;映射模块包括通信总线、页面动态导航器、本地存储器;将映射组件和映射模块注入到JS框架层中,包括步骤:
S61:通过注释映射组件和映射模块,在预设编译工具编译时生成组件管理映射表和模块管理映射表,并将组件管理映射表和模块管理映射表注入到JS框架层的运行时中。
具体地,映射组件主要实现Flutter系统内置的一些常用Widget,包括基本的布局组件Row,Column,Padding,Margin,Algin,Flexible,Stack等;容器组件Contaer,ListView,SingleChildScrollView等;元素展示组件Icon,Image,Text,Button等。每一个组件类都通过@Component和@JSMethod注解,在编译工具编译时生成类组件管理的映射表,并将映射表注入到JS-Framework的运行时中,于是在VueJS的模版DSL语言中可以使用这一系列组件。
模块主要实现通信总线EvenBus,页面动态导航的Navigate,和本地存储Storage等等。每一个模块类都通过@Module和@JSMethod注解,在编译工具编译时生成类模块管理的映射表,并将映射表注入到JS-Framework的运行时中,于是在VueJS的脚本语言中语言中可以使用这一系列模块的能力。
S7:当由Flutter框架开发的移动APP加载JS框架层时,通过创建第二运行时对JS脚本文件中每一个运行实例进行管理。
具体地,移动APP加载JS框架层后,实现一个JS运行时,用于管理业务JSBundle脚本语言运行实例;并提供一套自定义的接口,用于JSBundle业务层与Dart层通信。
具体细节在于,基于Dart层对JavaScriptCore库对外接口的类的封装,实现一个运行时。一个JS的运行时包含以下内容,一个JS运行的全局对象和上下文,当Dart中当虚拟机执行JS-Framework将保存该全局对象,在全局对象注册一个名为‘callNative’方法名与Dart指定函数进行绑定,于是建立了JS与Dart通信的通道。同时,在Dart层注入Console,setTimeout等方法全局对象,用于模拟VueJS在浏览器中的window环境。每一个业务页面JSBundle脚本语言的实例在全局对象中创建,并生成唯一id,由JS-Framework运行实例,Dart对每个业务页面JSBundle脚本语言的实例的调用都将通过上句中的唯一id寻找,从而实现对所有页面的动态化。
在本实施例中,通过上述步骤所实现的方案具备了从VueJS框架所编写代码运行到了Flutter中,从而实现了由Flutter框架所开发的移动APP的动态化。
进一步地,在一实施例中,VueJS前端框架部分还包括步骤:
S8:通过nodeJS实现WebSocket服务器,当JS脚本文件部署到预设服务器上时,WebSocket服务器通知移动APP进行刷新。
nodeJS是一个基于Chrome V8引擎的JavaScript运行环境,由其构建的WebSocket服务器通过Socket(套接字)与移动APP进行通信,可以起到及时提醒客户端更新JSBundle文件的作用,便于客户端及时更新。
关于移动APP动态化方法的整体框架图如图3所示。其中,业务前端对应VueJS前端框架部分,由VueJS开发的源代码通过Webpack打包生成JSBundle文件,并部署到服务器上。服务端对应预设服务器;Flutter客户端即对应移动APP;Flutter客户端中的Framework(Dart)为Flutter开发的APP所自带的功能层。
关于移动APP在动态化过程中进行页面渲染的流程如图4所示。其中,JSBundle从服务器下发到客户端后,先有虚拟机加载JS-Framework层,JS-Framework层再加载JSBundle文件,并对应每一个JSBundle运行实例(Vue实例,render函数、监听、执行、生成虚拟DOM、path函数);发送渲染指令至虚拟机,经JS-Dart桥接器并通过映射组件、映射模块实现动态渲染。
在一实施例中,提供一种移动APP动态化的装置,该移动APP动态化的装置与上述实施例中移动APP动态化的方法一一对应。如图5所示,包括VueJS前端框架部分100和Flutter框架部分200,
VueJS前端框架部分包括:
JS框架层构建模块101,用于建立带有VueJS运行库的JS框架层,JS框架层包括与浏览器所提供的文档对象模型的API功能相对应的接口、渲染指令树、Vue多页面实例以及桥接器;
加载器构建模块102,用于通过VueJS框架构建加载器,加载器用于生成在JS框架层中运行的JS脚本文件,并将JS脚本文件部署到预设服务器上;
Flutter框架部分包括:
虚拟机构建模块201,用于通过JSC虚拟机构建第一运行时,第一运行时用于实现JS和Dart的双向通信;
反射与注解模块202,用于针对Dart代码中使用了注解的类和类方法,通过编译工具生成字符串与类、字符串与类方法的映射表;
页面布局管理模块203,用于构建一Dart页面布局管理器,Dart页面布局管理器用于对页面进行增、删、改、查及动态布局;
映射组件及模块构建模块204,用于构建映射组件和映射模块,并将映射组件和映射模块注入到JS框架层中供VueJS前端框架部分进行调用和使用;
Vue实例动态化管理模块205,用于当由Flutter框架开发的移动APP加载JS框架层时,通过创建第二运行时对JS脚本文件中每一个运行实例进行管理。
进一步地,VueJS前端框架部分还包括:
更新提醒模块103,用于通过nodeJS实现一WebSocket服务器,当JS脚本文件部署到预设服务器上时,WebSocket服务器通知移动APP进行刷新。
进一步地,虚拟机构建模块201还包括:
执行环境模拟子模块2011,用于使用Dart标准库FFI对JSC虚拟机中的JSC库的对外接口进行封装,构建实现JavaScript的第一运行时。
在一个实施例中,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时实现上述实施例中移动APP动态化的方法的步骤,例如图2所示的步骤S1至步骤S7。或者,处理器执行计算机程序时实现上述实施例中移动APP动态化的装置的各模块/单元的功能,例如图5所示系统的功能。为避免重复,这里不再赘述。
在一实施例中,提供一计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现上述方法实施例中移动APP动态化的方法,或者,该计算机程序被处理器执行时实现上述系统实施例中移动APP动态化的装置中各模块/单元的功能。为避免重复,这里不再赘述。
以上所述实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围,均应包含在本发明的保护范围之内。

Claims (10)

1.一种移动APP动态化的方法,其特征在于,所述移动APP动态化的方法由VueJS前端框架部分和Flutter框架部分构成;
所述VueJS前端框架部分包括:
建立带有VueJS运行库的JS框架层,所述JS框架层包括渲染指令树、Vue多页面实例、桥接器,以及与浏览器所提供的文档对象模型的API功能相对应的接口;
通过VueJS框架构建加载器,所述加载器用于生成在所述JS框架层中运行的JS脚本文件,并将所述JS脚本文件部署到预设服务器上;
所述Flutter框架部分包括:
通过JSC虚拟机构建第一运行时,所述第一运行时用于实现JS和Dart的双向通信;
针对Dart代码中使用了注解的类和类方法,通过编译工具生成字符串与所述类、字符串与所述类方法的映射表;
构建Dart页面布局管理器,所述Dart页面布局管理器用于对页面进行增、删、改、查及动态布局;
构建映射组件和映射模块,并将所述映射组件和映射模块注入到所述JS框架层中供所述VueJS前端框架部分进行调用和使用;
当由所述Flutter框架开发的移动APP加载所述JS框架层时,通过创建第二运行时对所述JS脚本文件中每一个运行实例进行管理。
2.如权利要求1所述的移动APP动态化的方法,其特征在于,所述建映射组件包括布局组件、容器组件、元素展示组件;所述映射模块包括通信总线、页面动态导航器、本地存储器;所述将所述映射组件和映射模块注入到所述JS框架层中,包括:
通过注释所述映射组件和映射模块,在预设编译工具编译时生成组件管理映射表和模块管理映射表,并将所述组件管理映射表和模块管理映射表注入到所述JS框架层的运行时中。
3.如权利要求1所述的移动APP动态化的方法,其特征在于,所述加载器包括页面模板加载器和CSS加载器,所述页面模板加载器和CSS加载器通过打包编译,将Vue源代码编译成所述JS脚本文件。
4.如权利要求1所述的移动APP动态化的方法,其特征在于,所述VueJS前端框架部分还包括:
通过nodeJS实现WebSocket服务器,当所述JS脚本文件部署到预设服务器上时,所述WebSocket服务器通知移动APP进行刷新。
5.如权利要求1所述的移动APP动态化的方法,其特征在于,所述通过JSC虚拟机构建第一运行时,包括:
使用Dart标准库FFI对所述JSC虚拟机中的JSC库的对外接口进行封装,构建实现JavaScript的所述第一运行时。
6.一种移动APP动态化的装置,其特征在于,由VueJS前端框架部分和Flutter框架部分构成;
所述VueJS前端框架部分包括:
JS框架层构建模块,用于建立带有VueJS运行库的JS框架层,所述JS框架层包括渲染指令树、Vue多页面实例、桥接器,以及与浏览器所提供的文档对象模型的API功能相对应的接口;
加载器构建模块,用于通过VueJS框架构建加载器,所述加载器用于生成在所述JS框架层中运行的JS脚本文件,并将所述JS脚本文件部署到预设服务器上;
所述Flutter框架部分包括:
虚拟机构建模块,用于通过JSC虚拟机构建第一运行时,所述第一运行时用于实现JS和Dart的双向通信;
反射与注解模块,用于针对Dart代码中使用了注解的类和类方法,通过编译工具生成字符串与所述类、字符串与所述类方法的映射表;
页面布局管理模块,用于构建Dart页面布局管理器,所述Dart页面布局管理器用于对页面进行增、删、改、查及动态布局;
映射组件及模块构建模块,用于构建映射组件和映射模块,并将所述映射组件和映射模块注入到所述JS框架层中供所述VueJS前端框架部分进行调用和使用;
Vue实例动态化管理模块,用于当由所述Flutter框架开发的移动APP加载所述JS框架层时,通过创建第二运行时对所述JS脚本文件中每一个运行实例进行管理。
7.如权利要求6所述的移动APP动态化的装置,其特征在于,所述VueJS前端框架部分还包括:
更新提醒模块,用于通过nodeJS实现WebSocket服务器,当所述JS脚本文件部署到预设服务器上时,所述WebSocket服务器通知移动APP进行刷新。
8.如权利要求6所述的移动APP动态化的装置,其特征在于,所述虚拟机构建模块,还包括:
执行环境模拟子模块,用于使用Dart标准库FFI对所述JSC虚拟机中的JSC库的对外接口进行封装,构建实现JavaScript的所述第一运行时。
9.一种计算机设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述移动APP动态化的方法的步骤。
10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至5任一项所述移动APP动态化的方法的步骤。
CN202110389727.3A 2021-04-12 2021-04-12 移动app动态化的方法、装置、计算机设备及存储介质 Active CN113064593B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110389727.3A CN113064593B (zh) 2021-04-12 2021-04-12 移动app动态化的方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110389727.3A CN113064593B (zh) 2021-04-12 2021-04-12 移动app动态化的方法、装置、计算机设备及存储介质

Publications (2)

Publication Number Publication Date
CN113064593A true CN113064593A (zh) 2021-07-02
CN113064593B CN113064593B (zh) 2022-04-12

Family

ID=76566412

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110389727.3A Active CN113064593B (zh) 2021-04-12 2021-04-12 移动app动态化的方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN113064593B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114003307A (zh) * 2021-10-28 2022-02-01 平安普惠企业管理有限公司 基于umd模式的动态组件加载注册方法、装置、设备及介质
CN114077456A (zh) * 2021-08-18 2022-02-22 五八有限公司 一种组件处理方法、装置、电子设备及存储介质
CN115618144A (zh) * 2022-12-20 2023-01-17 冠骋信息技术(苏州)有限公司 基于网页的动态布局方法、系统、设备及介质
CN115934076A (zh) * 2023-01-03 2023-04-07 北京百度网讯科技有限公司 跨平台客户端的微服务提供装置、方法和电子设备

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108008952A (zh) * 2017-11-30 2018-05-08 浙江执御信息技术有限公司 移动终端页面动态布局方法及系统
CN109582305A (zh) * 2017-09-29 2019-04-05 阿里巴巴集团控股有限公司 用于移动应用页面元素的编码方法、装置及电子设备
CN110286927A (zh) * 2019-06-24 2019-09-27 北京字节跳动网络技术有限公司 Flutter应用的热更新方法、装置及设备
CN111290737A (zh) * 2020-01-20 2020-06-16 北京字节跳动网络技术有限公司 用于应用程序开发的方法、装置及电子设备
CN111381852A (zh) * 2020-03-10 2020-07-07 江苏满运软件科技有限公司 基于Flutter的应用动态更新方法、装置、存储介质及电子设备
CN111857709A (zh) * 2020-06-12 2020-10-30 北京三快在线科技有限公司 React组件和Flutter组件的映射方法、装置、电子设备及存储介质
CN112306594A (zh) * 2020-04-16 2021-02-02 北京沃东天骏信息技术有限公司 一种基于移动端的渲染方法、装置及存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109582305A (zh) * 2017-09-29 2019-04-05 阿里巴巴集团控股有限公司 用于移动应用页面元素的编码方法、装置及电子设备
CN108008952A (zh) * 2017-11-30 2018-05-08 浙江执御信息技术有限公司 移动终端页面动态布局方法及系统
CN110286927A (zh) * 2019-06-24 2019-09-27 北京字节跳动网络技术有限公司 Flutter应用的热更新方法、装置及设备
CN111290737A (zh) * 2020-01-20 2020-06-16 北京字节跳动网络技术有限公司 用于应用程序开发的方法、装置及电子设备
CN111381852A (zh) * 2020-03-10 2020-07-07 江苏满运软件科技有限公司 基于Flutter的应用动态更新方法、装置、存储介质及电子设备
CN112306594A (zh) * 2020-04-16 2021-02-02 北京沃东天骏信息技术有限公司 一种基于移动端的渲染方法、装置及存储介质
CN111857709A (zh) * 2020-06-12 2020-10-30 北京三快在线科技有限公司 React组件和Flutter组件的映射方法、装置、电子设备及存储介质

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114077456A (zh) * 2021-08-18 2022-02-22 五八有限公司 一种组件处理方法、装置、电子设备及存储介质
CN114003307A (zh) * 2021-10-28 2022-02-01 平安普惠企业管理有限公司 基于umd模式的动态组件加载注册方法、装置、设备及介质
CN115618144A (zh) * 2022-12-20 2023-01-17 冠骋信息技术(苏州)有限公司 基于网页的动态布局方法、系统、设备及介质
CN115934076A (zh) * 2023-01-03 2023-04-07 北京百度网讯科技有限公司 跨平台客户端的微服务提供装置、方法和电子设备
CN115934076B (zh) * 2023-01-03 2024-01-02 北京百度网讯科技有限公司 跨平台客户端的微服务提供装置、方法和电子设备

Also Published As

Publication number Publication date
CN113064593B (zh) 2022-04-12

Similar Documents

Publication Publication Date Title
CN113064593B (zh) 移动app动态化的方法、装置、计算机设备及存储介质
Griffith Mobile App Development with Ionic, Revised Edition: Cross-Platform Apps with Ionic, Angular, and Cordova
US20190369969A1 (en) Dynamically adaptable tool for graphical development of user interfaces
US7076766B2 (en) Software application development methods and framework
Voelter et al. mbeddr: Instantiating a language workbench in the embedded software domain
WO2019237701A1 (zh) 跨语言编程
US20140237443A1 (en) System and method for supporting intelligent design pattern automation
AU2012203071A1 (en) Computer-implemented method, system and computer program product for displaying a user interface component
CN103279373A (zh) 浏览器外壳功能的更新方法及装置
US20190052542A1 (en) System and method for providing visualizations of computing infrastructure using a domain-specific language for cloud services infrastructure
Bolin Closure: The definitive guide: Google tools to add power to your JavaScript
WO2018184359A1 (zh) 支付终端应用仿真方法、移动终端和可读存储介质
KR20130017337A (ko) 하이브리드 앱 개발 플랫폼 구조 및 그 테스트 방법, 그리고 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록매체.
Price C# 10 and. NET 6–Modern Cross-Platform Development: Build apps, websites, and services with ASP. NET Core 6, Blazor, and EF Core 6 using Visual Studio 2022 and Visual Studio Code
CN112818176B (zh) 一种数据处理方法、装置、设备及存储介质
Roldán React Design Patterns and Best Practices: Design, build and deploy production-ready web applications using standard industry practices
CN114721647B (zh) 一种基于无代码应用开发的面向对象编程方法
Simonsen PetriCode: a tool for template-based code generation from CPN models
CN114253516A (zh) 一种数据填报系统ui开发方法、装置及存储介质
bin Uzayr Mastering Vue. js: A Beginner's Guide
JP4971096B2 (ja) コーディング支援装置
Trivedi User interface implementation of environmental data integration system with React
CN111694723B (zh) 产品在h5下运行时对节点及组件编辑的方法、存储介质
RU2799988C2 (ru) Система и способ динамической визуализации элементов программного обеспечения
Jugel et al. A case study on API generation

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