CN117195239A - 微应用资源包生成方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及前端开发技术领域，特别是涉及一种微应用资源包生成方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括：接收微应用项目的开发请求；基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分为文件后缀名称为携带有区别标识的组件文件、样式文件、对象文件以及配置文件；获取前述四个文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对四个文件进行代码编写，调用目标编译器对前述四个文件的后缀识别成功后，编译代码编写后的前述四个文件生成目标vue文件；基于目标vue文件生成微应用资源包。采用本方法提高了微应用资源包的安全可靠性。

Description

微应用资源包生成方法、装置、计算机设备和存储介质

技术领域

本申请涉及前端开发技术领域，特别是涉及一种微应用资源包生成方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

随着前端开发的发展，出现了渐进式框架(Vue框架)，它是基于标准的HTML、CSS和javascript构建并提供了一套声明式、组件化的编程模型。是目前生产环境中使用最广泛的JavaScript框架之一，因其上手难度低，社区群体庞大，易于维护、易于拓展。

进而引出目前的微应用资源包生成方法是直接基于HTML、CSS和javascript生成的。

然而，目前的微应用资源包生成方式，存在源代码容易泄露，安全性差的问题。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高安全性的微应用资源包生成方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种微应用资源包生成方法，包括：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

在其中一个实施例中，代码框架包括组件声明文件，代码框架中的对象文件注册有与原生进行交互的应用程序接口以及声明的组件；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，包括：

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法；

基于模板语法和调用方法调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

在其中一个实施例中，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件，包括：

将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中；

将配置文件通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在其中一个实施例中，将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中，包括：

将组件文件放入目标vue文件的template文件中；

将样式文件放入目标vue文件的style文件中；

将对象文件放入目标vue文件的script文件中。

在其中一个实施例中，基于目标vue文件生成微应用资源包，包括：

通过打包工具对目标vue文件进行混淆加密，生成目标文件；

基于目标文件生成微应用资源包。

在其中一个实施例中，基于目标vue文件生成微应用资源包之后，还包括：

通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

第二方面，本申请还提供了一种微应用资源包生成装置，包括：

接收模块，用于接收微应用项目的开发请求；

获取模块，用于基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

编写模块，用于获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写；模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

编译模块，用于调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

生成模块，用于基于目标vue文件生成微应用资源包。

第三方面，本申请还提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

第四方面，本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

第五方面，本申请还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

上述微应用资源包生成方法、装置、计算机设备、存储介质和计算机程序产品，首先通过基于微应用项目开发请求，获取微应用项目的代码框架，代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；然后获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写；再调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；最后基于目标vue文件生成微应用资源包，即使源码泄露，也无法直接对源码进行编译，必须通过专有的代码编辑器方可正常编译打包，另外通过对组件文件、样式文件、对象文件以及配置文件的后缀名称变更为携带有基于微应用项目的区别标识的文件后缀，识别区别标识并成功后才能对文件进行编译，进一步要通过专有的代码编辑器方能编译，能够保证微应用资源包的安全性。

附图说明

为了更清楚地说明本申请实施例或相关技术中的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为一个实施例中微应用资源包生成方法的应用环境图；

图2为一个实施例中微应用资源包生成方法的流程示意图；

图3为一个实施例中编译生成目标vue文件的流程示意图；

图4为一个实施例中将文件转换至目标vue文件中的流程示意图；

图5为一个实施例中vue文件拆分的流程示意图；

图6为一个实施例中微应用资源包生成装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

VueJS是一套构建数据驱动的web界面的渐进式框架。基于标准的HTML、CSS和javascript构建并提供了一套声明式、组件化的编程模型。它是目前生产环境中使用最广泛的JavaScript框架之一，因其上手难度低，社区群体庞大，易于维护和拓展。

代码编辑器用于程序开发者使用的编写计算机程序的文本编辑器。

本申请实施例提供的微应用资源包生成方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上。服务器接收微应用项目的开发请求；基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；基于目标vue文件生成微应用资源包。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个示例性的实施例中，如图2所示，提供了一种微应用资源包生成方法，代码编辑器位于图1中的服务器，以该方法应用于代码编辑器为例进行说明，包括以下步骤S202至步骤S210。其中：

步骤S202，接收微应用项目的开发请求。

其中，微应用是统一的类似小程序运行于移动客户端的前端应用，有单独的语法，数据结构和代码编辑方式，即兼容了JavaScript的基础开发语法。开发请求可以是通过携带用户需求标签的方式向服务器发送的请求。开发请求中可以包括语法、行为、路径等方面。

可选地，微应用项目开发者预先部署开发请求，并将微应用项目的开发请求发送至代码编辑器；代码编辑器收到微应用项目的开发请求，具体可以是代码构建操作请求；代码构建操作请求用于指示构建微应用的前端代码。

步骤S204，基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识。

其中，组件文件支持基础html语法以及封装后的组件，无需单独引入使用。样式文件支持基础的css以及less语法。对象文件js支持引入第三方插件或者并传入page对象配置文件通过传入一些页面常用的配置项，如标题、是否需要出现菜单头、标题栏字体颜色、是否需要显示关闭按钮、是否需要出现菜单按钮等。组件文件、样式文件、对象文件以及配置文件区别于普通的html、js、css，具有独特的语法和使用方式。Vue文件即为在Vue项目中被使用的文件，一般是以.Vue为后缀名。区别标识是基于微应用项目开发的专有的标识，例如将组件文件以.HTML为后缀名称的文件更改为.Ccbml；将样式文件以.css后缀名称的文件更改为.ccbss。

可选地，代码编辑器基于微应用项目的开发请求，将微应用项目文件导入代码编辑器中，对应VUE搭建前端开发框架的vue源码，获取到微应用项目的结构，以及微应用项目结构的代码框架，代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件。设置组件文件、样式文件、对象文件和配置文件的后缀是无法被浏览器以及普通代码编辑器解析的，例如将组件文件以.HTML为后缀名称的文件更改为.Ccbml；将样式文件以.css后缀名称的文件更改为.ccbss。

其中，代码框架中可以包括自定义组件文件夹components、页面文件夹pages、图片文件夹images等代码文件，其中页面文件夹中可以包括目录文件index和日志文件logs。组件文件、样式文件、对象文件以及配置文件存储在目录文件index下。

步骤S206，获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的。

其中，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM语法结构树上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。调用方法基于微应用项目开发的调用函数生成的。

可选地，代码编辑器可以获取到组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，并基于获取到的模板语法和调用方法对获取到的微应用项目的组件文件、样式文件、对象文件以及配置文件进行代码编写；包括组件以及组件与原生进行交互时对应的调用方法的编写，开发形成一套方法接口API以及UI组件系统。

步骤S208，调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件。

可选地，代码编辑器在编译之前，先识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，方可进行编辑；代码编辑器与服务端直接关联，通过解析转换工具扫描项目目录下所有文件，解析各个文件模块之间的依赖关系，包括解析组件文件、样式文件、对象文件以及配置文件之间的依赖关系；然后将可执行的对象文件解析为抽象语法树，再将抽象语法树中的指令和API调用对象解析为原生中特有的指令和API调用对象，然后分别输出微应用源码到指定的vue文件目录，再在解析完对象文件之后，将配置文件json通过对象的形式变量放入到指定的vue文件中，生成目标vue文件。

步骤S210，基于目标vue文件生成微应用资源包。

可选地，代码编辑器可以通过静态打包工具将生成的目标vue文件进行混淆打包，生成微应用资源包，打包过程全程加密。即使编译后的微应用资源包，其他开发者也无法直接使用，需要在客户端特定密钥进行解密，方可正常使用。源码的编译过程不向开发者透露，对于开发者而言，是属于加密编译的过程。

上述微应用资源包生成方法中，首先通过基于微应用项目开发请求，获取微应用项目的代码框架，代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；然后获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写；再调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；最后基于目标vue文件生成微应用资源包，即使源码泄露，也无法直接对源码进行编译，必须通过专有的代码编辑器方可正常编译打包，另外通过对组件文件、样式文件、对象文件以及配置文件的后缀名称变更为携带有基于微应用项目的区别标识的文件后缀，识别区别标识并成功后才能对文件进行编译，进一步要通过专有的代码编辑器方能编译，能够保证微应用资源包的安全性。

在一个示例性的实施例中，代码框架包括组件声明文件，代码框架中的对象文件注册有与原生进行交互的应用程序接口以及声明的组件。

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，包括：

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法；

其中，模板语法是基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染。调用方法基于微应用项目开发的调用函数生成的。

可选地，代码编辑器获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用函数。

基于模板语法和调用方法调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

其中，声明文件是通过函数进行声明而形成的代码文件，声明时可以采用表达式声明，也可以采用定义式声明。一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。

可选地，代码编辑器获取的代码框架中是包含了声明文件，基于模板语法和调用方法将与原生进行交互的应用程序接口以及声明的组件注册在了对象文件中；此时可以将注册有与原生进行交互的应用程序接口以及声明的组件的对象文件作为入口文件；在主组件，也称根组件app.vue文件中引入该入口文件；在对组件文件、样式文件、对象文件以及配置文件进行编写的过程中可以调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。编写以及封装了一系列原生的功能组件(例如唤起蓝牙、打开相机、定位组件等等)，以提供给微应用调用使用。

本实施例中，通过代码框架中还声明了可用的组件以及预先引入了原生进行交互的应用程序接口以及声明的组件，能够达到调用组件时无需二次声明及引用，可直接调用已经定义好的组件，减少了操作，提高了代码运行的效率。

在一个示例性的实施例中，如图3所示，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件，包括步骤S302至步骤S304。

其中：

步骤S302，将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中。

可选地，代码编辑器将基于微应用项目自定的组件文件、样式文件、对象文件转换至目标vue文件的对应文件中。

步骤S304，将配置文件通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。

可选地，原生可以用于生成主页面，主页面包括页面菜单，页面菜单中的一菜单选项与微应用绑定；可以先显示原生主页面，当接收到对主页面的页面菜单中的菜单选项的操作时，调用原生的方法将配置文件的参数传入，调用对应的组件，在原生中加载微应用，以根据微应用的前端代码生成前端页面。

本实施例中，通过将组件文件、样式文件、对象文件转换至目标vue文件中，再将配置文件json通过对象的形式变量加入目标vue文件中，能够达到配合原生展示前端页面，可大大加快前端功能开发，并替换掉原生开发功能，增强安全性，迭代速度。

在一个示例性的实施例中，如图4所示，将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中，包括步骤S402至步骤S406。其中：

步骤S402，将组件文件放入目标vue文件的template文件中。

可选地，微应用开发者根据业务编写完对应的业务功能代码后，通过提供的代码编辑器编译功能进行编译，基于搭建前端开发框架的页面拆分和合并，代码编辑器会把组件文件ccbml、样式文件ccbss、对象文件js编译成一个完整的正常vue文件，把ccbml文件中文件放到目标vue文件的template部分。

步骤S404，将样式文件放入目标vue文件的style文件中。

可选地，微应用开发者根据业务编写完对应的业务功能代码后，通过提供的代码编辑器编译功能进行编译，此时代码编辑器会把组件文件ccbml、样式文件ccbss、对象文件js编译成一个完整的正常vue文件，把样式文件ccbss文件部分放入style部分中。

步骤S406，将对象文件放入目标vue文件的script文件中。

可选地，微应用开发者根据业务编写完对应的业务功能代码后，通过提供的代码编辑器编译功能进行编译，此时代码编辑器会把组件文件ccbml、样式文件ccbss、对象文件js编译成一个完整的正常vue文件，将js内容添加到目标vue中的script中并添加固定引入内容。

可选地，本实施例中，通过将组件文件、样式文件、对象文件放入目标vue文件的对应的子文件中，能够达到生成完整的目标vue文件。

在一个示例性的实施例中，基于目标vue文件生成微应用资源包，包括：

通过打包工具对目标vue文件进行混淆加密，生成目标文件。

可选地，通过打包工具对目标vue文件进行混淆加密，生成目标文件之前，代码编辑器会对代码编写后的代码文件进行解析转换；解析转换过程也是加密的过程。代码编辑器是与服务器直接关联，通过静态打包工具，例如webpack对目标vue文件进行混淆打包，并全程加密，生成目标文件。

基于目标文件生成微应用资源包。

可选地，代码编辑器基于加密打工完成的目标文件生成能通过可视化加载工具加载的h5微应用资源包。

本实施例中，通过打包工具对目标vue文件进行混淆加密，能够达到提高生成微应用资源包的安全性。

在一个示例性的实施例中，基于目标vue文件生成微应用资源包之后，还包括：

通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

可选地，代码编辑器通过浏览器加载并渲染微应用资源包中的各组件，当原生触发调用某个功能，对应的组件接收到调用请求后并执行，将执行的结果数据返回给原生，以实现将配置文件的参数传入对原生菜单进行设置的效果。

本实施例中，通过浏览器加载并渲染微应用资源包，调用原生的方法将配置文件的参数传入对原生菜单进行设置，能够达到增强原生功能的效果。

在一个示例性的实施例中，如图5所示，微应用开发者发出微应用项目的开发请求；代码编辑器接收微应用项目的开发请求，基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件ccbml、样式文件ccbss、对象文件js以及配置文件json；代码框架包括组件声明文件，代码框架中的对象文件注册有与原生进行交互的应用程序接口api以及声明的ui组件；在代码编写过程中代码编辑器调用在对象文件中已经注册的与原生进行交互的应用程序接口api以及ui组件；将组件文件ccbml放入目标vue文件的template文件中；将样式文件ccbss放入目标vue文件的style文件中；将对象文件js放入目标vue文件的script文件中，最后将配置文件json通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。在对vue文件编译完成之后，代码编辑器通过打包工具webpack对目标vue文件进行混淆加密，生成目标文件；基于目标文件生成微应用h5资源包。通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的微应用资源包生成方法的微应用资源包生成装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个微应用资源包生成装置实施例中的具体限定可以参见上文中对于微应用资源包生成方法的限定，在此不再赘述。

在一个示例性的实施例中，如图6所示，提供了一种微应用资源包生成装置，包括：接收模块601、获取模块602、编写模块603、编译模块604和生成模块605，其中：

接收模块601，用于接收微应用项目的开发请求。

获取模块602，用于基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识。

编写模块603，用于获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写；模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的。

编译模块604，用于调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件。

生成模块605，用于基于目标vue文件生成微应用资源包。

在一个示例性的实施例中，代码框架包括组件声明文件，代码框架中的对象文件注册有与原生进行交互的应用程序接口以及声明的组件；获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，包括：

获取单元，用于获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法。

调用单元，用于基于模板语法和调用方法调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

在一个示例性的实施例中，编译模块604包括：

转换单元，用于将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中。

加载单元，用于将配置文件通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在一个示例性的实施例中，转换单元，包括：

第一转换子单元，用于将组件文件放入目标vue文件的template文件中。

第二转换子单元，用于将样式文件放入目标vue文件的style文件中。

第三转换子单元，用于将对象文件放入目标vue文件的script文件中。

在一个示例性的实施例中，生成模块605，包括：

打包单元，用于通过打包工具对目标vue文件进行混淆加密，生成目标文件。

生成单元，用于基于目标文件生成微应用资源包。

在一个示例性的实施例中，微应用资源包装置，还包括：

加载渲染模块，用于通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

上述微应用资源包生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个示例性的实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图7所示。该计算机设备包括处理器、存储器、输入/输出接口(Input/Output，简称I/O)和通信接口。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储微应用资源包代码数据。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种微应用资源包生成方法。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个示例性的实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法；基于模板语法和调用方法调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中；将配置文件通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将组件文件放入目标vue文件的template文件中；将样式文件放入目标vue文件的style文件中；将对象文件放入目标vue文件的script文件中。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

通过打包工具对目标vue文件进行混淆加密，生成目标文件；基于目标文件生成微应用资源包。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法；基于模板语法和调用方法调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中；将配置文件通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将组件文件放入目标vue文件的template文件中；将样式文件放入目标vue文件的style文件中；将对象文件放入目标vue文件的script文件中。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

通过打包工具对目标vue文件进行混淆加密，生成目标文件；基于目标文件生成微应用资源包。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

接收微应用项目的开发请求；

基于开发请求，获取微应用项目的代码框架；代码框架包括基于微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对组件文件、样式文件、对象文件以及配置文件进行代码编写，模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于目标vue文件生成微应用资源包。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法；基于模板语法和调用方法调用在对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将组件文件、样式文件、对象文件转换至目标vue文件的对应文件中；将配置文件通过对象的形式变量加入目标vue文件中，配置文件用于在目标vue文件加载时，调用原生的方法将配置文件的参数传入对原生菜单进行设置。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将组件文件放入目标vue文件的template文件中；将样式文件放入目标vue文件的style文件中；将对象文件放入目标vue文件的script文件中。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

通过打包工具对目标vue文件进行混淆加密，生成目标文件；基于目标文件生成微应用资源包。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

通过浏览器加载并渲染微应用资源包，并调用原生的方法将配置文件的参数传入对原生菜单进行设置。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种微应用资源包生成方法，其特征在于，所述方法包括：

接收微应用项目的开发请求；

基于所述开发请求，获取所述微应用项目的代码框架；所述代码框架包括基于所述微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于所述微应用项目的区别标识；

获取所述组件文件、样式文件、对象文件以及配置文件中与所述微应用项目开发对应的模板语法和调用方法，基于所述模板语法和所述调用方法对所述组件文件、样式文件、对象文件以及配置文件进行代码编写，所述模板语法基于超文本标记语言以及所述微应用项目开发的指令生成，用于声明式的将组件进行渲染；所述调用方法基于所述微应用项目开发的调用函数生成的；

调用目标编译器识别所述组件文件、样式文件、对象文件以及配置文件的后缀，且在所述后缀识别成功后，编译代码编写后的所述组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

基于所述目标vue文件生成微应用资源包。

2.根据权利要求1所述的方法，其特征在于，所述代码框架包括组件声明文件，所述代码框架中的所述对象文件注册有与原生进行交互的应用程序接口以及声明的组件；

所述获取所述组件文件、样式文件、对象文件以及配置文件中与所述微应用项目开发对应的模板语法和调用方法，基于所述模板语法和所述调用方法对所述组件文件、样式文件、对象文件以及配置文件进行代码编写，包括：

获取所述组件文件、样式文件、对象文件以及配置文件中与所述微应用项目开发对应的模板语法和调用方法；

基于所述模板语法和调用方法调用在所述对象文件中已经注册的与原生进行交互的应用程序接口以及组件。

3.根据权利要求1所述的方法，其特征在于，所述编译代码编写后的所述组件文件、样式文件、对象文件以及配置文件生成目标vue文件，包括：

将所述组件文件、样式文件、对象文件转换至目标vue文件的对应文件中；

将所述配置文件通过对象的形式变量加入目标vue文件中，所述配置文件用于在所述目标vue文件加载时，调用原生的方法将所述配置文件的参数传入对原生菜单进行设置。

4.根据权利要求3所述的方法，其特征在于，所述将所述组件文件、样式文件、对象文件转换至目标vue文件的对应文件中，包括：

将所述组件文件放入所述目标vue文件的template文件中；

将所述样式文件放入所述目标vue文件的style文件中；

将所述对象文件放入所述目标vue文件的script文件中。

5.根据权利要求1所述的方法，其特征在于，所述基于所述目标vue文件生成微应用资源包，包括：

通过打包工具对所述目标vue文件进行混淆加密，生成目标文件；

基于目标文件生成微应用资源包。

6.根据权利要求5所述的方法，其特征在于，所述基于所述目标vue文件生成微应用资源包之后，还包括：

通过浏览器加载并渲染所述微应用资源包，并调用原生的方法将所述配置文件的参数传入对原生菜单进行设置。

7.一种微应用资源包生成装置，其特征在于，所述装置包括：

接收模块，用于接收微应用项目的开发请求；

获取模块，用于基于所述开发请求，获取所述微应用项目的代码框架；所述代码框架包括基于所述微应用项目vue文件拆分的组件文件、样式文件、对象文件以及配置文件；其中，组件文件、样式文件、对象文件以及配置文件的后缀名称为携带有基于微应用项目的区别标识；

编写模块，用于获取组件文件、样式文件、对象文件以及配置文件中与微应用项目开发对应的模板语法和调用方法，基于模板语法和调用方法对所述组件文件、样式文件、对象文件以及配置文件进行代码编写；模板语法基于超文本标记语言以及微应用项目开发的指令生成，用于声明式的将组件进行渲染；调用方法基于微应用项目开发的调用函数生成的；

编译模块，用于调用目标编译器识别组件文件、样式文件、对象文件以及配置文件的后缀，且在后缀识别成功后，编译代码编写后的所述组件文件、样式文件、对象文件以及配置文件生成目标vue文件；

生成模块，用于基于所述目标vue文件生成微应用资源包。

8.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。