CN112235357B - 跨平台应用开发系统 - Google Patents

跨平台应用开发系统 Download PDF

Info

Publication number
CN112235357B
CN112235357B CN202011010930.7A CN202011010930A CN112235357B CN 112235357 B CN112235357 B CN 112235357B CN 202011010930 A CN202011010930 A CN 202011010930A CN 112235357 B CN112235357 B CN 112235357B
Authority
CN
China
Prior art keywords
request
module
mobile terminal
route
interceptor
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
Application number
CN202011010930.7A
Other languages
English (en)
Other versions
CN112235357A (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.)
CCB Finetech Co Ltd
Original Assignee
CCB Finetech 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 CCB Finetech Co Ltd filed Critical CCB Finetech Co Ltd
Priority to CN202011010930.7A priority Critical patent/CN112235357B/zh
Publication of CN112235357A publication Critical patent/CN112235357A/zh
Application granted granted Critical
Publication of CN112235357B publication Critical patent/CN112235357B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters 
    • 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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46—Multiprogramming arrangements
    • G06F9/54—Interprogram communication
    • G06F9/547—Remote procedure calls [RPC]; Web services
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/2866—Architectures; Arrangements
    • H04L67/30—Profiles
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/50—Network services
    • H04L67/51—Discovery or management thereof, e.g. service location protocol [SLP] or web services
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/50—Network services
    • H04L67/56—Provisioning of proxy services
    • H04L67/565—Conversion or adaptation of application format or content
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/50—Network services
    • H04L67/56—Provisioning of proxy services
    • H04L67/566—Grouping or aggregating service requests, e.g. for unified processing
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L2212/00—Encapsulation of packets

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种跨平台应用开发系统，涉及计算机技术领域。该系统的一具体实施方式包括：界面组件库，包括多种供用户选择且用于组装移动端应用的界面的组件；请求封装模块，用于提供封装的网络请求模板；路由管理模块，用于管理所述移动端应用中的多个模块之间的路由；状态管理模块，用于管理所述移动端应用中的多个模块的状态。该实施方式对技术人员要求低，学习曲线缓和，便于开发者利用该系统进行二次开发和扩展，有效降低了人力成本，提高了开发效率，技术人员只需要编写一套业务逻辑和用户交互逻辑代码就可以通过该跨平台应用开发系统开发跨平台移动端应用。

Description

跨平台应用开发系统
技术领域
本发明涉及计算机技术领域，尤其涉及一种跨平台应用开发系统。
背景技术
随着各行各业加紧推行“互联网+”和“移动优先”战略，移动端技术对于传统的熟悉PC端(计算机端)开发技术的企业来说是比较陌生的技术领域，但是迫于市场环境压力、客户资源竞争等因素推行移动端应用又势在必行，在这个过程中不可避免遇到各种技术问题：需要运用不同的技术栈，同时开发多套(至少两套)在业务逻辑上和用户界面交互上基本一致的代码，对开发人员要求高，技术跨度大、学习曲线陡峭，成本较高；移动设备系统版本(Android设备尤其突出)，设备配置等碎片化现象严重，开发人员往往需要花费大量的精力和时间进行适配工作，不同平台对于适配的要求也不尽相同，人力成本和代码维护成本较高。
发明内容
有鉴于此，本发明实施例提供一种跨平台应用开发系统，对技术人员要求低，学习曲线缓和，便于开发者利用该系统进行二次开发和扩展，有效降低了人力成本，提高了开发效率，技术人员只需要编写一套业务逻辑和用户交互逻辑代码就可以通过该跨平台应用开发系统开发跨平台移动端应用。
为实现上述目的，根据本发明实施例的一个方面，提供了一种跨平台应用开发系统，包括：
界面组件库，包括多种供用户选择且用于组装移动端应用的界面的组件；
请求封装模块，用于提供封装的网络请求模板；
路由管理模块，用于管理所述移动端应用中的多个模块之间的路由；
状态管理模块，用于管理所述移动端应用中的多个模块的状态。
可选地，所述系统还包括插件库，包括至少一个插件，所述插件通过封装原生特定功能模块获得。
可选地，所述系统还包括通信模块，用于提供Flutter与JsBridge的通信接口。
可选地，所述界面组件库还用于根据用户的配置信息，从多种组件中确定目标组件，并根据所述配置信息设置所述目标组件的样式。
可选地，所述配置信息包括组件名称和配置参数，所述配置参数包括以下一种或多种：颜色、尺寸和位置。
可选地，所述请求封装模块还用于：设置所述网络请求模板中请求地址、请求头、请求参数和请求方式的拼接方式，并按照所述拼接方式将所述请求地址、请求头、请求参数和请求方式进行拼接。
可选地，所述请求封装模块还用于封装拦截器。
可选地，所述拦截器包括请求拦截器和响应拦截器；
所述请求封装模块还用于封装所述请求拦截器和所述响应拦截器，以使封装后的请求拦截器在发送网络请求之前对所述网络请求进行预处理，以及使所述响应拦截器在所述网络请求失败时，执行异常处理方法。
可选地，所述请求封装模块还用于在所述网络请求失败时，拦截错误日志，并输出所述错误日志。
可选地，所述请求封装模块还用于封装表单的提交方式。
可选地，所述路由管理模块还用于管理所述移动端应用中的多个模块之间的路由映射、路由参数和跳转风格。
可选地，所述路由管理模块还用于：
创建路由注册类，以使所述移动端应用的各个模块通过所述路由注册类管理所述各个模块的路由映射；
创建路由参数类，以将所述移动端应用的各个模块的路由参数封装在所述路由参数类中；
在入口文件中对所述移动端应用所有模块的路由进行注册汇总；
通过MaterialApp的onGenerateRoute函数处理所述移动端应用各个模块的路由的跳转风格。
可选地，所述状态管理模块包括存储单元，用于存储所述移动端应用所有模块的状态数据。
可选地，所述存储单元包括第一存储子单元和第二存储子单元，其中，所述第一存储子单元用于存储所述移动端应用所有模块的状态信息和Reducer函数，所述第二存储子单元用于存储index.dart文件和所述移动端应用的各个模块之间共享的数据。
可选地，所述插件库包括以下一个或多个插件：获取设备信息、地图、视频、音频和蓝牙。
上述发明中的一个实施例具有如下优点或有益效果：通过界面组件库，包括多种供用户选择且用于组装移动端应用的界面的组件；请求封装模块，用于提供封装的网络请求模板；路由管理模块，用于管理所述移动端应用中的多个模块之间的路由；状态管理模块，用于管理所述移动端应用中的多个模块的状态的技术手段，所以本发明实施例提供一种跨平台应用开发系统对技术人员要求低，学习曲线缓和，便于开发者利用该系统进行二次开发和扩展，有效降低了人力成本，提高了开发效率，技术人员只需要编写一套业务逻辑和用户交互逻辑代码就可以通过该跨平台应用开发系统开发跨平台移动端应用。在利用本发明实施例的跨平台应用开发系统开发跨平台移动端应用时，设备接口和系统功能通过原生技术开发，通过Flutter Channel实现Flutter与Native的相互通信，并封装成FlutterPlugin供开发者使用，支持开发者按需定制。业务逻辑通过Flutter端实现，尽量避免原生技术生成用户交互界面。移动端开发做到按需定制开箱即用，技术门槛低，研发效率高。界面组件库提供丰富的Flutter UI组件库，开发者开箱即用，减低了代码的复杂度，可维护性高；请求封装模块提供统一封装的网络请求框架，对请求、数据处理、拦截器、异常处理等做了统一处理，提高开发效率；路由管理模块提供统一封装的路由管理方案，减少模块间的耦合度，提供多样的跳转风格；通信模块在Flutter与Native相互通信的基础上，增加了Flutter与Js间的相互通信，为Js提供了在Flutter端中调用原生的可能性，使得HybridApp开发模式的App仅修改JSBrid ge的接口即可借助Flutter调用原生功能。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是本发明实施例的跨平台应用开发系统的主要模块的示意图；
图2是本发明实施例的跨平台应用开发系统的主要模块的示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
目前，现有技术中存在的跨平台移动端开发模式主要有以下几类：
(1)React Native(RN)是Facebook公司发布的，使用React框架的跨平台开发原生移动应用的开源技术框架。RN将应用的JS代码(包括依赖的Framework)编译成一个JS脚本文件(在安卓平台上一般命名为index.android.bundle)。RN的整体框架目标就是为了解释运行这个JS脚本文件，如果是JS扩展的API，则直接通过JsBridge(JavaScript桥)调用native方法；如果是UI界面，则映射到virtual DOM这个虚拟的JS数据结构中，通过JsBridge传递到Native，然后根据数据属性设置各个对应的真实原生的View。这种方法在业务逻辑实现和用户交互层面远不如纯Web技术灵活，对于RN库不支持的控件，还需要借助Native技术进行开发。
(2)Hybrid即所谓的混合开发，开发和发布都比较方便，介于Native App、Web App之间。借助Webview实现业务代码跨端性能和体验介于Native App、Web App之间，需要原生配合完成混合。由于移动端设备性能的发展和Web技术的演进，其性能正在逐渐逼近原生技术。但是，混合开发的App首屏打开缓慢，动画效果不够流畅。Webview自身提供的功能不足，需要利用JSBridge与Native之间进行数据交互，从而将native的功能扩展给Webview使用。
为了解决上述至少一个技术问题，本发明实施例提供一种跨平台应用开发系统100。该跨平台应用开发系统100在Flutter的基础上，其中，Flutter是由Google(谷歌公司)的工程师团队打造，用于创建高性能、跨平台的移动应用。目前，Flutter处于比较新的阶段，企业内部开发中，快速转为Flutter开发学习成本极高，现有将Flutter作为一个模块添加到Native程序中，但由原来的Hybrid App(混合应用)开发转为Flutter开发则需全部开发人员学习Flutter。为了降低学习成本和人力成本，本发明实施例的跨平台应用开发系统对其进行了封装，支持开箱即用，学习曲线缓和，对开发人员要求低，有效地节约了人力成本。
如图1所示，该跨平台应用开发系统100包括界面组件库101、请求封装模块102、路由管理模块103和状态管理模块104。
其中，该跨平台应用开发系统100的界面组件库101包括多种供用户选择且用于组装移动端应用的界面的组件。在本实施例中界面组件库101中的组件风格统一，具备高标准性、组合性、重用性和可维护性。组件间相互独立，可以全局引用也可以单独引用。开发者仅需要对组件设置一些简单的配置，如颜色、尺寸、位置等参数，即可设置组件的样式。
在本实施例中，基于界面组件库进行开发，能够提高开发效率，能高效的帮助更新页面，同时降低代码的复杂度。
在实际使用时，开发者可以通过调用界面组件库的接口，通过该接口获取目标组件，然后对目标组件进行配置，以生成目标界面。
请求封装模块102用于提供封装的网络请求模板。开发人员在发起网络请求是可以直接套用该网络请求模板，避免代码的冗余且可统一处理。
现有的Flutter网络请求方式主要有三种:Dart原生的网络请求Http Client，第三方库HTTP请求以及第三方库Dio(Dio是一个强大的Dart Http请求库)。为了方便使用第三方库Dio，本实施例的请求封装模块在第三方库Dio的基础上对其进一步封装，将可复用的部分进行统一处理，避免重复造轮子。
具体的，该请求封装模块102用于：设置所述网络请求模板中请求地址、请求头、请求参数和请求方式的拼接方式，并按照所述拼接方式将所述请求地址、请求头、请求参数和请求方式进行拼接；对拦截器进行封装，以通过封装后的拦截器可以在网络请求发送之前，网络请求响应之后及网络请求失败时进行统一的预处理；对表单的提交方式进行封装。其中，拦截器动态拦截Action调用的对象，它提供了一种机制可以使开发者在一个Action执行的前后执行一段代码，也可以在一个Action执行前阻止其执行，同时也提供了一种可以提取Action中可重用部分代码的方式。拦截器用于在某个方法或者字段被访问之前，进行拦截然后再之前或者之后加入某些操作。
路由管理模块103用于管理所述移动端应用中的多个模块之间的路由。
路由管理是任何移动端项目都不可避免的一个问题，移动端项目的各个模块之间需要界面的相互跳转，单纯的输出(export)路由页面，会使模块间相互依赖，耦合度过高。而本实施例中的路由管理模块103将Flutter的路由封装进行了一定程度的封装，对路由映射、参数包装和跳转风格做了处理，便于开发者使用。
具体的，路由管理模块103用于管理所述移动端应用中的各个模块的路由映射、路由参数和跳转风格。
更具体的，路由管理模块103用于创建路由注册类APPRoute，以使所述移动端应用各个模块通过所述路由注册类管理所述各个模块的路由映射。在路由注册类APPRoute中封装了注册路由以及获取模块路由的方法。
路由管理模块103还用于创建路由参数类RouteArguments，以将所述移动端应用各个模块的路由参数封装在所述路由参数类中。
路由管理模块103还用于在入口文件main.dart中对所述移动端应用所有模块的路由进行注册汇总。
路由管理模块103还用于通过MaterialApp的onGenerateRoute函数处理所述移动端应用各个模块的路由的跳转风格。在本实施例中，路由管理模块103提供多种动态的跳转风格，例如左右滑动效果、翻转效果等。上述跳转风格可以通过路由参数配置。
状态管理模块104用于管理所述移动端应用中的多个模块的状态。
状态管理也是移动端项目开发中重要的一环，随着移动端应用的功能模块的累积，交互及数据源也增加，移动端应用程序中的状态也会越来越多。因此，该跨平台应用开发系统100通过状态管理模块104来管理移动端应用各个模块的状态。
在可选的实施例中，所述状态管理模块104包括存储单元，用于存储所述移动端应用所有模块的状态数据。所述存储单元包括第一存储子单元和第二存储子单元，其中，所述第一存储子单元用于存储所述移动端应用所有模块的状态信息和Reducer函数。
作为示例，状态管理模块104将移动端应用所有模块的状态数据存放在store目录下，store目录即为存储单元，store目录下又分为app和module两个子目录，app子目录即为第一存储子单元，module目录为第二存储子单元。
1.app子目录下管理移动端应用的所有模块的state(状态)及Reducer(Reducer是一个函数，是state的计算过程，接受action和当前state作为参数，返回一个新的state)。app子目录下包括APPState.dart及AppReducer.dart两个文件。其中AppState.dart中定义了一个AppState类来引入所有模块的state，用于访问模块的数据。AppReducer.dart中根据接收到的state和action执行对应模块的Reducer，最终形成新的一个AppState对象。如果actions是非本模块的，state保持不变，如果是当前模块的则执行对应Reducer函数，构成一个新的AppState对象。
2.module子目录中包含index.dart文件和模块之间需要共享的数据。index.dart是store的数据入口，提供一个创建store的方法，并在main.dart里调用。
本发明实施例的跨平台应用开发系统，通过界面组件库，包括多种供用户选择且用于组装移动端应用的界面的组件；请求封装模块，用于提供封装的网络请求模板；路由管理模块，用于管理所述移动端应用中的多个模块之间的路由；状态管理模块，用于管理所述移动端应用中的多个模块的状态的技术手段，所以本发明实施例提供一种跨平台应用开发系统对技术人员要求低，学习曲线缓和，便于开发者利用该系统进行二次开发和扩展，有效降低了人力成本，提高了开发效率，技术人员只需要编写一套业务逻辑和用户交互逻辑代码就可以通过该跨平台应用开发系统开发跨平台移动端应用。在利用本发明实施例的跨平台应用开发系统开发跨平台移动端应用时，设备接口和系统功能通过原生技术开发，通过Flutter Channel实现Flutter与Native的相互通信，并封装成Flutter Plugin供开发者使用，支持开发者按需定制。业务逻辑通过Flutter端实现，尽量避免原生技术生成用户交互界面。移动端开发做到按需定制开箱即用，技术门槛低，研发效率高。界面组件库提供丰富的Flutter UI组件库，开发者开箱即用，减低了代码的复杂度，可维护性高；请求封装模块提供统一封装的网络请求框架，对请求、数据处理、拦截器、异常处理等做了统一处理，提高开发效率；路由管理模块提供统一封装的路由管理方案，减少模块间的耦合度，提供多样的跳转风格。
图2是本发明另一实施例的跨平台应用开发系统200的主要模块的示意图，如图2所示，该跨平台应用开发系统200包括界面组件库201、请求封装模块202、路由管理模块203、状态管理模块204、插件库205和通信模块206。
其中，界面组件库201包括多种供用户选择且用于组装移动端应用的界面的组件。该界面组件库201还用于根据用户的配置信息，从多种组件中确定目标组件，并根据所述配置信息设置所述目标组件的样式。其中，所述配置信息包括组件名称和配置参数，所述配置参数包括以下一种或多种：颜色、尺寸和位置。在本实施例中界面组件库101中的组件风格统一，具备高标准性、组合性、重用性和可维护性。组件间相互独立，可以全局引用也可以单独引用。开发者仅需要对组件设置一些简单的配置，如颜色、尺寸、位置等参数，即可设置组件的样式。
请求封装模块202用于提供封装的网络请求模板。在本实施例中，请求封装模块202将网络请求进行封转，有助于减少代码的重复，提升开发效率，便于项目管理。
具体的，该请求封装模块202还用于设置所述网络请求模板中请求地址url、请求头headers、请求参数body和请求方式的拼接方式，并按照所述拼接方式将所述请求地址、请求头、请求参数和请求方式进行拼接。
在可选的实施例中，所述请求封装模块202还用于封装拦截器。其中，拦截器是动态拦截Action调用的对象，它提供了一种机制可以使开发者在一个Action执行的前后执行一段代码，也可以在一个Action执行前阻止其执行，同时也提供了一种可以提取Action中可重用部分代码的方式。拦截器用于在某个方法或者字段被访问之前，进行拦截然后再之前或者之后加入某些操作。拦截器是封装在网络请求中的方法。开发者使用时选择添加或者移除。
在本实施例中，拦截器包括请求拦截器和响应拦截器。该请求封装模块202还用于封装所述请求拦截器和所述响应拦截器，以使封装后的请求拦截器在发送网络请求之前对所述网络请求进行预处理，以及使所述响应拦截器在所述网络请求失败时，执行异常处理方法。其中，请求拦截器在网络请求发送前，从SharedPreferences中取出token(令牌)，添加到请求头中。响应拦截器在网络请求失败时，执行统一的异常处理方法，并将错误日志拦截，通过eventbus将错误日志发送。
在可选的实施例中，所述请求封装模块202还用于封装表单的提交方式。
路由管理模块203用于管理所述移动端应用中的多个模块之间的路由。
路由管理是任何移动端项目都不可避免的一个问题，移动端项目的各个模块之间需要界面的相互跳转，单纯的输出(export)路由页面，会使模块间相互依赖，耦合度过高。而本实施例中的路由管理模块103将Flutter的路由封装进行了一定程度的封装，对路由映射、参数包装和跳转风格做了处理，便于开发者使用。
具体的，路由管理模块203用于管理所述移动端应用中的多个模块之间的路由映射、路由参数和跳转风格。
更具体的，路由管理模块203用于创建路由注册类APPRoute，以使所述移动端应用各个模块通过所述路由注册类管理所述各个模块的路由映射。在路由注册类APPRoute中封装了注册路由以及获取模块路由的方法。
路由管理模块203还用于创建路由参数类RouteArguments，以将所述移动端应用各个模块的路由参数封装在所述路由参数类中。
路由管理模块203还用于在入口文件main.dart中对所述移动端应用所有模块的路由进行注册汇总。
路由管理模块203还用于通过MaterialApp的onGenerateRoute函数处理所述移动端应用各个模块的路由的跳转风格。在本实施例中，路由管理模块203提供多种动态的跳转风格，例如左右滑动效果、翻转效果等。上述跳转风格可以通过路由参数配置。
状态管理模块204用于管理所述移动端应用中的多个模块的状态。
状态管理也是移动端项目开发中重要的一环，随着移动端应用的功能模块的累积，交互及数据源也增加，移动端应用程序中的状态也会越来越多。因此，该跨平台应用开发系统200通过状态管理模块204来管理移动端应用各个模块的状态。
在可选的实施例中，所述状态管理模块204包括存储单元，用于存储所述移动端应用所有模块的状态数据。所述存储单元包括第一存储子单元和第二存储子单元，其中，所述第一存储子单元用于存储所述移动端应用所有模块的状态信息和Reducer函数。
作为示例，状态管理模块204将移动端应用所有模块的状态数据存放在store目录下，store目录即为存储单元，store目录下又分为app和module两个子目录，app子目录即为第一存储子单元，module目录为第二存储子单元。
1.app子目录下管理移动端应用的所有模块的state(状态)及Reducer(Reducer是一个函数，是state的计算过程，接受action和当前state作为参数，返回一个新的state)。app子目录下包括APPState.dart及AppReducer.dart两个文件。其中AppState.dart中定义了一个AppState类来引入所有模块的state，用于访问模块的数据。AppReducer.dart中根据接收到的state和action执行对应模块的Reducer，最终形成新的一个AppState对象。如果actions是非本模块的，state保持不变，如果是当前模块的则执行对应Reducer函数，构成一个新的AppState对象。
2.module子目录中包含index.dart文件和模块之间共享的数据。index.dart是store的数据入口，提供一个创建store的方法，并在main.dart里调用。
在本实施例中，移动端应用每个模块的状态数据由action、reducer和state三个部分组成，该三个部分的数据存放在不同的文件中，该文件存放在module子目录下以模块名称命名的文件夹内。
在可选的实施例中，本发明实施例的状态管理模块104基于Redux实现。Redux是一种单向数据流架构，用于数据流管理。Redux主要由Store，Action和Reducer三部分组成。Store用于存储和管理State，Action用于定义一个数据变化的请求行为，Reducer用于根据Action产生新的State，一般是函数形式。将Flutter中需要共享的state储存在Store中，Widget将Store中储存的state映射成视图。当数据改变时Redux会发起一个Action通知Reducer，Reducer遍历找到对应的Action，根据Action生成新的state存储在Store中，替换旧的状态。Store通知所有使用到该状态的Widget进行状态更新，如此便可做到状态的统一管理。
插件库205包括至少一个插件，所述插件通过封装原生特定功能模块获得。
在可选的实施例中，插件库205可以基于Flutter的Platform Channel实现。Platform Channel的原理如下：client端(客户端)发送信息，host(服务端)接受信息并返回结果，消息和响应是以异步方式传递的，Flutter和Natvie可以互为client和host，信息传递是双向的。
Flutter中的Platform Channel提供Android或者iOS的底层封装，在Flutter层提供组件功能，使Flutter可以较方便的调取Native的模块。很多平台相关性或者对于Flutter实现起来比较复杂的部分，都可以封装成Plugin(插件)。本实施例中的跨平台应用系统将一些常用的原生功能，例如获取设备信息、地图、视频、音频、蓝牙等，利用PlatformChannel封装成开箱即用的插件，从而获得插件库。通过插件库将Flutter工程中的PlaformChannel和UI代码分开，使Platform Channel模块化，为开发者提供调用原生功能的接口。
在可选的实施例中，插件库205还用于为每个原生特定功能模块对应的插件创建唯一标识(如Channel Name)，创建原生特定功能模块对应的插件时，Flutter端与Native端应约定好。host端利用client传送的Channel-Name将消息传送给对应的Handler(消息处理器)。Flutter与Native利用BinaryMessenger传送二进制格式的消息。Channel会将该二进制消息通过Codec(消息编解码器)解码为能识别的消息并传递给Handler进行处理。当Handler处理完消息之后，会通过回调函数返回result(结果)，并将result通过编解码器编码为二进制格式数据，通过BinaryMessenger发送回Flutter。
通信模块206用于提供Flutter与JsBridge的通信接口。通信模块206还用于将Flutter作为中间件，通过所述Flutter实现JsBridge与Native的交互。
针对于已使用Hybrid APP开发的移动端项目，若想要迁移至Flutter，可使用第三方webview插件加载前端资源包。但若使用了jsbridge调用Native功能的部分，无法再使用原有的JSBridge功能。本发明实施例中的通信模块利用JS与Flutter的可交互性，将JS调用Native的接口修改为调用Flutter的接口，即在Flutter Channel的基础上增加JS与Flutter的交互，从而实现JS调用Flutter，Flutter调用Native。这使得用Hybrid APP方法开发的APP仅修改JSBridge的统一调用接口的部分即可迁移至Flutter中，减少了代码迁移成本。
本发明实施例的跨平台应用开发系统，技术架构简单而高效，学习曲线缓和，技术门槛低，便于开发者利用该系统进行二次开发和扩展，有效降低了人力成本。在本发明实施例的跨平台应用开发系统开发跨平台移动端应用时，设备接口和系统功能通过原生技术开发，通过Flutter Channel实现Flutter与Native的相互通信，并封装成Flutter Plugin供开发者使用，支持开发者按需定制。业务逻辑通过Flutter端实现，尽量避免原生技术生成用户交互界面。移动端开发做到按需定制开箱即用，技术门槛低，研发效率高。界面组件库提供丰富的Flutter UI组件库，开发者开箱即用，减低了代码的复杂度，可维护性高；请求封装模块提供统一封装的网络请求框架，对请求、数据处理、拦截器、异常处理等做了统一处理，提高开发效率；路由管理模块提供统一封装的路由管理方案，减少模块间的耦合度，提供多样的跳转风格；通信模块在Flutter与Native相互通信的基础上，增加了Flutter与Js间的相互通信，为Js提供了在Flutter端中调用原生的可能性，使得Hybrid App开发模式的App仅修改JSBridge的接口即可借助Flutter调用原生功能。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (11)

1.一种跨平台应用开发系统，其特征在于，包括：
界面组件库，包括多种供用户选择且用于组装移动端应用的界面的组件；其中，通过设置组件的颜色、尺寸和位置中的一种或多种，以调整组件的样式；
请求封装模块，用于提供封装的网络请求模板，以及封装拦截器，以通过封装后的拦截器在网络请求发送之前、网络请求响应之后及网络请求失败时进行统一的预处理；
路由管理模块，用于将所述移动端应用的路由进行封装，以管理所述移动端应用中的多个模块的路由映射、路由参数和跳转风格；
状态管理模块，包括存储单元，所述存储单元包括第一存储子单元和第二存储子单元，所述第一存储子单元用于存储所述移动端应用所有模块的状态信息和Reducer函数，所述第二存储子单元用于存储ind ex.dart文件和所述移动端应用的各个模块之间共享的数据。
2.根据权利要求1所述的系统，其特征在于，所述系统还包括插件库，包括至少一个插件，所述插件通过封装原生特定功能模块获得。
3.根据权利要求1或2所述的系统，其特征在于，所述系统还包括通信模块，用于提供Flutter与JsBridge的通信接口。
4.根据权利要求1所述的系统，其特征在于，所述界面组件库还用于根据用户的配置信息，从多种组件中确定目标组件，并根据所述配置信息设置所述目标组件的样式。
5.根据权利要求4所述的系统，其特征在于，所述配置信息包括组件名称和配置参数，所述配置参数包括以下一种或多种：颜色、尺寸和位置。
6.根据权利要求1所述的系统，其特征在于，所述请求封装模块还用于：设置所述网络请求模板中请求地址、请求头、请求参数和请求方式的拼接方式，并按照所述拼接方式将所述请求地址、请求头、请求参数和请求方式进行拼接。
7.根据权利要求1所述的系统，其特征在于，所述拦截器包括请求拦截器和响应拦截器；
所述请求封装模块还用于封装所述请求拦截器和所述响应拦截器，以使封装后的请求拦截器在发送网络请求之前对所述网络请求进行预处理，以及使所述响应拦截器在所述网络请求失败时，执行异常处理方法。
8.根据权利要求1所述的系统，其特征在于，所述请求封装模块还用于在所述网络请求失败时，拦截错误日志，并输出所述错误日志。
9.根据权利要求1所述的系统，其特征在于，所述请求封装模块还用于封装表单的提交方式。
10.根据权利要求1所述的系统，其特征在于，所述路由管理模块还用于：
创建路由注册类，以使所述移动端应用的各个模块通过所述路由注册类管理所述各个模块的路由映射；
创建路由参数类，以将所述移动端应用的各个模块的路由参数封装在所述路由参数类中；
在入口文件中对所述移动端应用所有模块的路由进行注册汇总；
通过MaterialApp的onGenerateRoute函数处理所述移动端应用各个模块的路由的跳转风格。
11.根据权利要求2所述的系统，其特征在于，所述插件库包括以下一个或多个插件：获取设备信息、地图、视频、音频和蓝牙。
CN202011010930.7A 2020-09-23 2020-09-23 跨平台应用开发系统 Active CN112235357B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011010930.7A CN112235357B (zh) 2020-09-23 2020-09-23 跨平台应用开发系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011010930.7A CN112235357B (zh) 2020-09-23 2020-09-23 跨平台应用开发系统

Publications (2)

Publication Number Publication Date
CN112235357A CN112235357A (zh) 2021-01-15
CN112235357B true CN112235357B (zh) 2023-01-10

Family

ID=74107066

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011010930.7A Active CN112235357B (zh) 2020-09-23 2020-09-23 跨平台应用开发系统

Country Status (1)

Country Link
CN (1) CN112235357B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115129319A (zh) * 2021-03-26 2022-09-30 京东方科技集团股份有限公司 一种编译方法、编译装置、执行方法以及计算机设备
CN113126966A (zh) * 2021-05-08 2021-07-16 北银金融科技有限责任公司 一种逻辑跨端思路的设计与实现
CN113765740B (zh) * 2021-08-03 2022-12-20 网宿科技股份有限公司 一种对Dio网络请求进行监控的方法和装置
CN117234470B (zh) * 2023-10-08 2024-02-23 开物数智(安徽)智能科技有限公司 一种基于低代码平台的跨端表单开发系统及方法
CN117118905B (zh) * 2023-10-24 2024-01-09 北京搜狐新动力信息技术有限公司 一种路由注册、路由调用方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110109659A (zh) * 2019-04-28 2019-08-09 广东三维家信息科技有限公司 一种实现前端应用脚手架的系统和服务器
CN110580183A (zh) * 2019-09-02 2019-12-17 江苏艾佳家居用品有限公司 一种移动应用组件化实现方法
CN110851114A (zh) * 2019-10-24 2020-02-28 山东中创软件工程股份有限公司 一种业务系统开发方法、装置及电子设备和存储介质
CN111367513A (zh) * 2020-02-20 2020-07-03 北京达佳互联信息技术有限公司 代码补全方法、装置、电子设备及存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9448773B2 (en) * 2013-04-03 2016-09-20 Salesforce.Com, Inc. Systems and methods for implementing a uniform application user interface across a multi-tenant environment

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110109659A (zh) * 2019-04-28 2019-08-09 广东三维家信息科技有限公司 一种实现前端应用脚手架的系统和服务器
CN110580183A (zh) * 2019-09-02 2019-12-17 江苏艾佳家居用品有限公司 一种移动应用组件化实现方法
CN110851114A (zh) * 2019-10-24 2020-02-28 山东中创软件工程股份有限公司 一种业务系统开发方法、装置及电子设备和存储介质
CN111367513A (zh) * 2020-02-20 2020-07-03 北京达佳互联信息技术有限公司 代码补全方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN112235357A (zh) 2021-01-15

Similar Documents

Publication Publication Date Title
CN112235357B (zh) 跨平台应用开发系统
CN111158818B (zh) 一种页面渲染方法和装置
US20090113437A1 (en) Translating declarative models
CN111158690B (zh) 桌面应用框架、构建方法、桌面应用运行方法及存储介质
US10817284B2 (en) Melding of mediation flow service component architecture (SCA) components
US11030066B2 (en) Dynamic application decomposition for execution in a computing environment
CN110008044B (zh) 一种嵌入式rtos上分布式实时通信中间件的构建方法
CN111740948A (zh) 数据包发布方法、动态更新方法、装置、设备及介质
KR20080043517A (ko) 통신 소프트웨어 구조에서의 도메인 프로파일 파싱 장치 및그 방법
CN108804100B (zh) 创建界面元素的方法、装置、存储介质及移动终端
US10516729B2 (en) Dynamic graph adaptation for stream processing over hybrid, physically disparate analytics platforms
KR20110065448A (ko) 메시지 처리 파이프라인 구성
CN116431155A (zh) 前端应用构建方法、介质、装置和计算设备
CN113312046A (zh) 子应用页面处理方法、装置和计算机设备
CN102388363A (zh) 以类别档案嵌入原生代码方式应用平台相依例行程序于虚拟机
CN113810402B (zh) 多协议适配方法和系统，计算机设备，存储介质
CN114816357A (zh) 一种服务于流程银行的服务编排系统
CN111708519B (zh) 一种业务组件的处理方法、装置、设备和存储介质
CN107423096A (zh) 一种实现软件安装的方法及装置
CN111562993B (zh) 一种动态切换数据源的Web应用系统
CN117118962B (zh) 用于跨多个云平台部署用户方法的方法和系统
CN114443316B (zh) 一种对象访问方法、装置及电子设备
KR102588266B1 (ko) 로봇과 인공지능 서비스 간의 자동화 통신 장치 및 이를 이용한 방법
CN114296719A (zh) 提高Weex跨平台兼容性的方法、系统、设备、存储介质
CN116208558A (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
GR01 Patent grant
GR01 Patent grant