移动端应用的组件化开发系统的制作方法

1.本公开的实施例涉及计算机技术领域，具体涉及移动开发领域，尤其涉及一种移动端应用的组件化开发系统。


背景技术：

2.目前，随着android端应用的组件化特性越来越受到开发者的青睐，越来越多的企业采用移动端应用的组件化架构。组件化最基本的思想追求高内聚、低耦合、灵活配置。组件化架构一般分为四层：壳层、业务组件层、基础业务层以及基础库层，其中还包括用于组件间通信的路由组建和用于全局数据管理的数据组件等。其中，壳层为基础组件和业务组件添加依赖配置、环境配置等；业务组件层基于具体的业务需求封装成对应的业务组件；基础组件层为应用添加基础能力依赖，例如包括通用基础组件、网络组件、路由组件、utils(工具类)，widgets(小部件)、质量监控组件、混合开发基础库等。
3.相关技术中，组件化架构需要不同类型的开发端(例如android端、ios端或h5端)分别遵守一套适配的机制去开发对应的组件，对于现代企业大前端的管理模式来说，整体效率较低。


技术实现要素：

4.本公开的实施例提出了移动端应用的组件化开发系统。
5.本公开的实施例提供了一种移动端应用的组件化开发系统，包括：前端操作平台、后端项目容器和云端服务器；前端操作平台包括控件操作单元、应用编排单元和工程配置单元，其中，控件操作单元被配置成：接收用户的控件操作指令；将控件操作指令发送至项目容器；根据控件操作指令生成待编排页面；应用编排单元被配置成：接收用户的页面编排指令并根据页面编排指令生成json文件以及json文件的资源码；将json文件的资源码发送至后端项目容器；将json文件发送至云端服务器；工程配置单元被配置成：接收用户的租户信息配置指令，并根据租户信息配置指令生成工程配置文件；将工程配置文件发送至后端项目容器；后端项目容器包括组件池、组件管理单元和git仓库，其中，组件池用于存储基础组件、预先基于业务需求封装成的业务组件、基础组件和业务组件的依赖配置以及预设的多端路由协议；组件管理单元被配置成：接收控件操作指令；从组件池中确定出控件操作指令指向的目标组件以及目标组件的依赖配置；对目标组件执行控件操作指令指示的动作；git仓库被配置成对json文件的资源码、目标组件、目标组件的依赖配置和工程配置文件进行编译打包，生成安装包；云端服务器被配置成：存储json文件，以及，响应于移动终端的json文件获取请求，将json文件发送至移动终端。
6.在一些实施例中，控件操作单元包括控件编辑子单元，被配置成接收用户的控件编辑指令，并将控件编辑指令发送至后端项目容器，控件编辑指令用于配置组件的信息；组件管理单元还被配置成：从组件池中确定出控件编辑指令指向的待编辑组件；根据控件编辑指令，配置待编辑组件的信息；基于待编辑组件的信息生成待编辑组件的控件资源码。
7.在一些实施例中，控件操作单元还包括控件管理子单元，被配置成：接收用户的控件管理指令，并将控件管理指令发送至后端项目容器，控件管理指令用于选取控件并将选取出的控件组成待编排页面；组件管理单元还被配置成：接收控件管理指令；从组件池中确定出控件管理指令指向的目标组件；基于控件管理指令和多端路由协议，建立各个目标组件之间的关联关系。
8.在一些实施例中，应用编排单元包括菜单添加子单元，被配置成：接收用户的菜单添加指令，并将菜单添加指令指向的菜单添加至菜单添加指令指向的待编排页面。
9.在一些实施例中，应用编排单元还包括页面控件添加子单元，被配置成接收用户的页面控件添加指令；将页面控件添加指令指向的页面控件添加至页面控件添加指令指向的待编排页面；将页面控件添加指令发送至后端项目容器；组件管理单元还被配置成：接收页面控件添加指令；从组件池中确定出页面控件添加指令指向的组件及其依赖配置，并将该组件确定为目标组件。
10.在一些实施例中，前端操作平台还包括授权配置单元，被配置成：接收用户的权限配置指令；根据权限配置指令确定租户的操作权限，并基于租户的操作权限生成权限配置信息；将权限配置信息发送至工程配置单元；工程配置单元还被配置成：将权限配置信息写入工程配置文件。
11.在一些实施例中，前端操作平台还包括容器监控单元，被配置成：监控目标应用的运行状态，目标应用为移动终端运行安装包后所安装的应用。
12.在一些实施例中，前端操作平台还包括工程构建单元，被配置成：根据移动终端的类型，确定各种类型的移动终端对应的json文件的下发路径，并将各种类型的移动终端对应的json文件的下发路径发送至云端服务器，以指示云端服务器按照移动终端的类型对应的json文件的下发路径发送json文件。
13.在一些实施例中，工程构建单元还被配置成：确定各种类型的移动终端对应的工程配置文件的下发路径，并将各种类型的移动终端对应的工程配置文件的下发路径发送至工程配置单元，以指示工程配置单元按照移动终端的类型对应的下发路径发送工程配置文件。
14.在一些实施例中，基础组件和业务组件的封装方式包括以下类型：原生容器；rn引擎；webview引擎。
15.本公开的实施例提供的移动端应用的组件化开发系统，用户可以通过前端操作平台操作预先封装好的控件、配置租户信息和编排页面，得到工程配置文件和json文件，一方面前端操作平台将操作指令、工程配置文件、json文件的资源码发送至后端项目容器，由后端项目容器执行对应的动作以及打包生成安装包；另一方面，前端操作平台将json文件发送至云端服务器，以便将json文件下发给不同类型的移动端。后端项目容器中存储有预先封装的基础组件、业务组件、依赖配置以及多端路由协议，适用于混开发场景，可以实现各种类型的开发环境下各个组件之间的路由通信，从而提高组件的管理和重复利用效率，以及提高移动端应用的组件化开发效率。
附图说明
16.通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本公开的其它
特征、目的和优点将会变得更明显：
17.图1是本公开的移动端应用的组件化开发系统的一个实施例的总体架构图；
18.图2是本公开的移动端应用的组件化开发系统的一个实施例中后端项目容器的架构示意图；
19.图3是图1所示的实施例中生成的安装包的运行场景示意图；
20.图4是本公开的移动端应用的组件化开发系统的一个实施例中前端操作平台的架构示意图。
具体实施方式
21.下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。
22.需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。
23.图1示出了可以应用本公开的实施例的移动端应用的组件化开发系统的总体架构图100。该架构100包括终端设备101、本地服务器102、云端服务器103、移动终端104、105，其中，前端操作平台106可以设置在终端设备101，后端项目容器可以设置在本地服务器102。
24.移动终端104可以采用android系统，移动终端105可以采用ios终端。
25.如图1所示，本公开的实施例提供了一种移动端应用的组件化开发系统，包括：前端操作平台、后端项目容器和云端服务器；前端操作平台包括控件操作单元、应用编排单元和工程配置单元，其中，控件操作单元被配置成：接收用户的控件操作指令；将控件操作指令发送至项目容器；根据控件操作指令生成待编排页面；应用编排单元被配置成：接收用户的页面编排指令并根据页面编排指令生成json文件以及json文件的资源码；将json文件的资源码发送至后端项目容器；将json文件发送至云端服务器；工程配置单元被配置成：接收用户的租户信息配置指令，并根据租户信息配置指令生成工程配置文件；将工程配置文件发送至后端项目容器；后端项目容器包括组件池、组件管理单元和git仓库，其中，组件池用于存储基础组件、预先基于业务需求封装成的业务组件、基础组件和业务组件的依赖配置以及预设的多端路由协议；组件管理单元被配置成：接收控件操作指令；从组件池中确定出控件操作指令指向的目标组件以及目标组件的依赖配置；对目标组件执行控件操作指令指示的动作；git仓库被配置成对json文件的资源码、目标组件、目标组件的依赖配置和工程配置文件进行编译打包，生成安装包；云端服务器被配置成：存储json文件，以及，响应于移动终端的json文件获取请求，将json文件发送至移动终端。
26.在本实施例中，前端操作平台用于接收用户的操作指令，并将操作指令传递至后端项目容器，以指示后端项目容器响应用户的操作指令。
27.作为示例，前端操作平台可以设置于电脑端，以可视化页面的形式呈现给用户(例如可以是开发人员)，该页面中例如可以包括各个类型的命令按键和操作窗口区域，用户可以在页面上点击对应的命令按键选择对应的操作指令，还可以通过拖拽的方式将所需控件添加到待编排页面中。前端操作平台。作为示例，控件操作单元可以包括多种类型的控件操作按键，分别对应于多个类型的空间操作指令，例如设置控件的名字或缩略图、确定控件的
业务配置、确定控件对应的移动终端的类型(例如可以是android或ios)，还可以接受用户的拖拽指令，用户可以将所需的控件直接拖拽至操作窗口形成待编排页面。应用编排单元可以根据接收到的用户指令对待编排页面进行编排，例如定义多个待编排页面的顺序、自定义菜单或根据需求配置业务组件，以及将完成的待编排页面编排成json文件。工程配置单元用于接收用户的租户信息配置指令，然后根据租户信息配置指令确定租户的信息，之后基于配置完成的租户信息生成工程配置工程文件，并将工程配置文件发送至后端项目容器。租户为移动端应用的消费方，例如可以是商品供应商或消费者，开发人员可以通过工程配置单元对不同类型的租户信息进行配置，例如确定租户的用户信息、类型标识或绑定商品供应商的店铺信息等。
28.进一步结合图2，图2示出了本公开的移动端应用的组件化开发系统的一个实施例中后端项目容器的架构示意图，在图2所示的架构300中，组件管理单元1073作为后端项目容器的通信接口，可以接收前端操作平台传递的操作指令或数据，并响应操作指令，其中预设有脚手架工程，以便于开发人员重复调用组件池中的基础组件、业务组件以及依赖配置。
29.可以理解的是，控件是组件的一种，通常指具有用户界面的组件，本公开的控件是指前端操作平台中可视的组件，与后端项目容器中的组件在本质上等价的。
30.组件池1071用于存储基础组件、业务组件、各个组件的依赖配置以及多端路由协议，其中，基础组件为预先根据基础功能封装得到的通用组件，可以为不同业务提供通用功能，例如可以包括基础类、交互类、工具类、数据类等等，具体可以包括扫码组件、拍照组件、定位组件、rn组件、webview组件等等。业务组件为开发人员根据具体的业务需求封装得到的专用组件，可以由开发人员独立开发和配置，以为相同或相似的业务提供自定义功能，例如可以包括登录组件、购物车组件、任务组件等等。
31.在本实施例的一些可选的实现方式中，开发人员可以采用多种类型的引擎(例如rn引擎、webview引擎、原生容器)，在原生能力js(javascript)库和各种依赖配置的基础上，封装得到各种类型的基础组件和业务组件。如此一来，使得后端项目容器可以适用于不同的开发环境，可以提高混合开发场景下的效率。
32.依赖配置为基础组件和业务组件所依赖的配置，例如可以包括环境配置、android或ios的application programming interface(应用程序接口，api)等。多端路由协议用于实现不同开发类型的组件之间的通信路由，例如可以是由android端开发的业务组件a与ios端开发的业务组件b或原生端基础组件之间的通信路由，如此可以适用于多端混合开发场景。
33.git仓库1072可以从组件池中选取待编排页面所需的目标组件及其依赖配置，然后将各个目标组件、json文件的资源码和工程配置文件一起编译打包，输出安装包。例如可以是apk(android application package，android应用程序包)，git仓库可以根据开发环境预设多个git分支，每个开发环境类型对应一个git分支，例如android对应的git分支用于输出android端的安装包；ios对应的git分支用于输出ios端的安装包。
34.云端服务器用于存储json文件，当移动端应用的安装包在租户的移动终端上运行时，可以向云端服务器发送获取json文件的请求，由云端服务器将json下发至该移动终端。
35.接下来参考图3，图3是图1所示的移动端应用的组件化开发系统的实施例中输出的安装包在移动终端的运行场景示意图。在图3所示的场景300中，当租户在移动终端运行
安装包时，安装包中预存的引导流程会引导租户按照图2所示的流程将移动端应用加载至移动终端。该流程包括：引导租户登录，以获取租户的信息；对比租户的信息与工程配置文件，确定该租户对应的json文件；从云端服务器获取json文件；解析json文件，得到页面信息、页面节点信息、路由信息和页面中的控件资源码，控件资源码用于标识安装包中预存的控件；根据解析出的页面信息，按照页面顺序依次构建fragment、tab填充、动态加载或卸载组件得到各个页面的框架；对各个页面进行数据填充，初始化组件数据并确定组件间的路由通信，即完成应用的加载过程。
36.本公开的实施例提供的移动端应用的组件化开发系统，用户可以通过前端操作平台操作预先封装好的控件、配置租户信息和编排页面，得到工程配置文件和json文件，一方面前端操作平台将操作指令、工程配置文件、json文件的资源码发送至后端项目容器，由后端项目容器执行对应的动作以及打包生成安装包；另一方面，前端操作平台将json文件发送至云端服务器，以便将json文件下发给不同类型的移动端。后端项目容器中存储有预先封装的基础组件、业务组件、依赖配置以及多端路由协议，适用于混开发场景，可以实现各种类型的开发环境下各个组件之间的路由通信，从而提高组件的管理和重复利用效率，以及提高移动端应用的组件化开发效率。
37.接下来参考图4，图4是本公开的移动端应用的组件化开发系统的一个实施例中前端操作平台的架构示意图，在图4所示的架构400中，控件操作单元1061包括控件编辑子单元，被配置成接收用户的控件编辑指令，并将控件编辑指令发送至后端项目容器，控件编辑指令用于配置组件的信息；组件管理单元还被配置成：从组件池中确定出控件编辑指令指向的待编辑组件；根据控件编辑指令，配置待编辑组件的信息；基于待编辑组件的信息生成待编辑组件的控件资源码。
38.作为示例，控件编辑子单元可以包括如下编辑命令按键：名称、缩略图；业务配置；资源码及类型；终端类型等，分别对应于各种控件编辑指令。用户可以通过点击命令按键的方式向前端操作平台下达空间编辑指令，然后由前端操作平台将控件编辑指令发送至后端项目容器中的组件管理单元。
39.进一步的，控件操作单元1061还包括控件管理子单元，被配置成：接收用户的控件管理指令，并将控件管理指令发送至后端项目容器，控件管理指令用于选取控件并将选取出的控件组成待编排页面；组件管理单元还被配置成：接收控件管理指令；从组件池中确定出控件管理指令指向的目标组件；基于控件管理指令和多端路由协议，建立各个目标组件之间的关联关系。
40.作为示例，控件管理子单元可以包括如下命令按键：个人中心、首页、返利销售，其中每个命令按键对应一个待编排页面的，例如，用户点击“个人中心”时，可以在前端操作平台的页面编排窗口中呈现“个人中心”的待编排页面，用户可在页面编排窗口中通过拖拽的形式添加控件、删除控件、移动控件的位置以及确定不同组件之间的跳转关系，以生成待编排页面。当用户完成待编排页面的操作之后，可以点击编排完成的命令按键，由控件管理子单元确定待编排页面包含的页面信息(例如可以是页面节点信息、页面的顺序)和控件信息(例如可以是控件的资源码、控件的位置、不同控件之间的跳转关系)，并发送至组件管理单元，由组件管理单元从组件池中确定出该待编排页面中所需的组件及其依赖配置，并确定各个组件之间的路由通信。
41.在本实施例的一些可选的实现方式中，应用编排单元1063包括菜单添加子单元，被配置成：接收用户的菜单添加指令，并将菜单添加指令指向的菜单添加至菜单添加指令指向的待编排页面。如此，用户可以通过菜单添加子单元在待编辑页面中添加菜单。
42.进一步的，应用编排单元1063还包括页面控件添加子单元，被配置成接收用户的页面控件添加指令；将页面控件添加指令指向的页面控件添加至页面控件添加指令指向的待编排页面；将页面控件添加指令发送至后端项目容器；组件管理单元还被配置成：接收页面控件添加指令；从组件池中确定出页面控件添加指令指向的组件及其依赖配置，并将该组件确定为目标组件。如此，用户可以通过页面控件添加指令在待编辑页面中添加页面控件。
43.本实施例的一些可选的实现方式中，前端操作平台106还包括授权配置单元1064，被配置成：接收用户的权限配置指令；根据权限配置指令确定租户的操作权限，并基于租户的操作权限生成权限配置信息；将权限配置信息发送至工程配置单元；工程配置单元还被配置成：将权限配置信息写入工程配置文件。如此，用户可以在开发阶段为不同类型的租户设置对应的权限。
44.作为示例，授权配置单元可以包括如下命令按键：工程授权、应用授权和控件授权，分别对应于工程、应用和控件级别的权限。开发人员可以通过工程授权案件为开发人员或租户开放工程级别的权限，还可以通过应用授权或控件授权为不同级别的租户开发不同的权限。
45.本实施例的一些可选的实现方式中，前端操作平台106还包括容器监控单元1066，被配置成：监控目标应用的运行状态，目标应用为移动终端运行安装包后所安装的应用。如此，开发人员可以用过前端开发平台实时监控目标应用的运行状态，例如可以包括运行的稳定性和运行质量等。
46.本实施例的一些可选的实现方式中，前端操作平台106还包括工程构建单元1065，被配置成：根据移动终端的类型，确定各种类型的移动终端对应的json文件的下发路径，并将各种类型的移动终端对应的json文件的下发路径发送至云端服务器，以指示云端服务器按照移动终端的类型对应的json文件的下发路径发送json文件。
47.在本实现方式中，移动终端的类型用于表征移动终端的系统类型或开发环境，例如可以包括android、ios或h5，每种类型的移动终端对应一个下发路径。如此，同一个json可以适用于不同类型的移动终端，有助于进一步提高混合开发的效率。
48.工程配置单元还被可以配置成：接收用户的工程配置指令；根据工程配置指令确定应用的名称、标识以及关联的租户数据。
49.进一步的，工程构建单元1065还被配置成：确定各种类型的移动终端对应的工程配置文件的下发路径，并将各种类型的移动终端对应的工程配置文件的下发路径发送至工程配置单元，以指示工程配置单元按照移动终端的类型对应的下发路径发送工程配置文件。如此，可以实现工程配置文件对不同类型的移动终端的适配性，有助于进一步提高混合开发的效率。
50.描述于本公开的实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中。
51.以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人
员应当理解，本公开的实施例中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开的实施例中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。