基于前端框架的移动端跨平台应用开发框架及开发方法技术

本发明专利技术公开了一种基于前端框架的移动端跨平台应用开发框架，包括：应用表现与业务逻辑层：通过前端框架进行基本的页面布局、网络请求数据、数据加载、页面导航开发，并进行业务逻辑处理，编译成网页文件；HTML渲染层：通过浏览器将网页的解析结果经过计算、排版布局、调用移动设备接口，渲染绘制到用户界面上；移动设备API，用于HTML渲染层与移动端操作系统硬件功能间的数据交互，提供访问的移动设备API；移动端操作系统平台；对完成的工程进行打包，根据识别的移动端操作系统生成可在相应系统下运行的安装文件。可以提高移动软件的开发效率、缩短开发周期，节约成本。

Mobile platform cross platform application development framework and development method based on front-end framework

The invention discloses a mobile front end based on the framework of the cross platform application development framework, including: application and business logic layer: the front frame basic page layout, network request data, data loading, page navigation development, and business logic processing, compiled into a web page file; HTML rendering layer through: the browser will \analytical results after calculation, layout, calling the mobile device interface, rendering the user interface on mobile devices; API, HTML for rendering layer and mobile terminal operating system hardware function of data exchange between mobile devices, providing access to API; the mobile terminal operating system platform; on the completion of the project package according to the installation file generation mobile terminal operating system identification can be run in the corresponding system. It can improve the development efficiency of mobile software, shorten the development cycle and save the cost.

【技术实现步骤摘要】
基于前端框架的移动端跨平台应用开发框架及开发方法
本专利技术属于移动端跨平台应用开发
，具体地涉及一种基于前端框架的移动端跨平台应用开发框架及开发方法。
技术介绍
随着网络技术的不断发展，尤其是移动互联网技术的发展，人们已经离不开移动终端设备，人们可以随时随地地通过手机从互联网获取信息和服务，截至2017年1月22日，中国网民数为6.88亿人，其中手机网民数为6.20亿人，手机上网人群占比为90.1%，由此可见移动终端设备在人们的生活中所具有的重大意义，移动端设备已经成为一个人赖以生存的一个重要工具，而移动互联网技术的发展也成为了一个国家科技创新能力发展的重要指标。如果在6亿手机用户这样一个重大的消费群体上建立一个平台，使之广泛应用到企业、商业、普通用户之中，肯定可以创造惊天动地的奇迹。在移动互联网发展过程中，涌现出了很多手机操作系统，这其中以苹果的IOS系统、谷歌的Android系统、微软的WindowsPhone系统尤为出众，截至2016年第二季度，这三款手机操作系统的市场占有率已经达到了99.7%。目前一款移动端应用软件的开发基本都是基于这三个平台的，由于这三种操作系统的软件开发是基于不同的编程语言的，所以要开发出适配这三种系统的软件，就要编写三份不同的代码来带到最终目的。这就大大提高了软件开发和维护的工作难度，这时如果要研究出一种跨平台的移动端软件开发平台就至关重要。目前移动端应用分类主要有三种：Native应用、Web应用、Hybrid应用。Native应用主要指使用特定平台开发语言所开发的应用，Web应用主要采用统一标准的HTML、JavaScript、CSS等Web技术开发，通过不同平台的浏览器访问来实现跨平台。Native应用开发的不足在于，不同手机操作系统的应用软件是独立开发的，开发者需要编写多套针对特定手机平台的代码，而Web应用在性能上和用户体验上与原生手机应用有着很大的差距。Hybird应用主要是弥补以上两者开发模式的不足的产物，使用前端技术来开发应用的页面，调用Native的代码来完成业务逻辑的编写。
技术实现思路
针对当前移动软件开发需要区分不同手机操作系统的问题，本专利技术目的是：提供了一种基于前端框架的移动端跨平台应用开发框架及开发方法，本专利技术框架采用的是Hybrid模式的应用开发方法，采用分层设计模式，界面采用前端技术开发，通过中间层插件调用原生应用的硬件相关功能，以完成手机应用软件的开发。本专利技术应用到移动软件项目开发中，可以大大提高移动端软件的开发效率。本专利技术的技术方案是：一种基于前端框架的移动端跨平台应用开发框架，包括：应用表现与业务逻辑层：通过前端框架进行基本的页面布局、网络请求数据、数据加载、页面导航开发，并进行业务逻辑处理，编译成网页文件；HTML渲染层：通过浏览器将网页的解析结果经过计算、排版布局、调用移动设备接口，渲染绘制到用户界面上；移动设备API，用于HTML渲染层与移动端操作系统硬件功能间的数据交互，提供访问的移动设备API；移动端操作系统平台；对完成的工程进行打包，根据识别的移动端操作系统生成可在相应系统下运行的安装文件。优选的，所述HTML渲染层与移动端操作系统硬件功能间的数据交互包括，生成交互插件，通过交互插件向移动设备发送信息，移动设备接收信息后将原生代码的执行结果以JSON对象的形式发送至HTML渲染层。优选的，所述交互插件包括接口文件和交互模块，所述接口文件用于识别移动端操作系统，所述交互模块，通过AJAX发送请求，实现数据交互。本专利技术还公开了一种基于前端框架的移动端跨平台应用开发方法，包括以下步骤：S01：通过前端框架进行基本的页面布局、网络请求数据、数据加载、页面导航开发，并进行业务逻辑处理，编译成网页文件；S02：通过浏览器将网页的解析结果经过计算、排版布局、调用移动设备接口，渲染绘制到用户界面进行功能调试，通过交互插件与移动端操作系统硬件功能进行数据交互；S03：对完成的工程进行打包，根据识别的移动端操作系统生成可在相应系统下运行的安装文件。优选的，所述步骤S02中，在网页上调试功能性代码时，当发生网络请求时，构建跨域请求转接工具，通过跨域请求转接工具将本地请求转接到真实的URL地址。与现有技术相比，本专利技术的优点是：（1）在本专利技术的框架上，软件开发人员只需关注前端代码的实现，无需考虑不同移动端操作系统的差异性，即可完成移动端应用的开发，在此平台上开发的软件可以同时适配于Android、IOS、WindowsPhone、以及网页。（2）在本专利技术框架上，一款应用的开发只需编写一份代码，无需区分移动端操作系统平台，大大缩短了软件开发的生命周期，提高了开发效率，节约的软件开发的人力成本以及不同客户端间的人员管理成本。（3）本专利技术的框架中与设备相关的功能是以插件形式手动添加，无需进行审批，这些功能可以一直留存在Native工程中重复利用和完善。（4）本专利技术框架的开发高内聚、低耦合，系统相对稳定，亦可对框架进行定制化开发，增加了框架内部构造的灵活性。附图说明下面结合附图及实施例对本专利技术作进一步描述：图1为本专利技术框架架构图；图2为在本专利技术框架上构建的手机应用软件工程结构图；图3为本专利技术框架各个模块间的关系图。具体实施方式以下结合具体实施例对上述方案做进一步说明。应理解，这些实施例是用于说明本专利技术而不限于限制本专利技术的范围。实施例中采用的实施条件可以根据具体厂家的条件做进一步调整，未注明的实施条件通常为常规实验中的条件。实施例：一种基于前端框架的移动端跨平台应用开发框架，如图1所示跨平台框架设计为四层架构体系：分别为应用表现与业务逻辑层、HTML渲染层、移动设备API以及手机操作系统平台，其中：应用表现与业务逻辑层：根据图3移动端跨平台框架架构图所示，此层结构主要用于解决软件应用的功能模块研发以及业务逻辑的处理，此层主要使用前端框架AngularJS2来完成代码的编写，编写完成的工程入口为index.html，即生成一个可运行的网页，通过CSS来控制网页格式，通过Typescript来完成业务逻辑处理。涉及到手机功能的页面根据Cordova插件中定义的JavaScript方法名来调用原生代码，将原生代码的处理结果以JSON格式接收，显示到页面上，完成数据交互。HTML渲染层：在每个移动设备上设置WebView组件，通过此组件，Android工程和IOS工程可以加载应用表现与业务逻辑层生成的网页，此功能是通过Cordova.loadUrl(stringurl)方法来实现的，方法中的url为应用表现与业务逻辑层中的index.html的存放地址，通过此方法将网页的入口文件加载到WebView中，WebView组件的内置浏览器负责将页面的解析结果经过计算、排版布局、调用移动设备接口，渲染绘制到用手机户界面上。移动设备API：本层主要功能是中间桥梁的作用，通过本层可实现HTML渲染层与手机操作系统硬件功能间的交互，具体的交互方式是通过Cordova插件来实现的，插件是通过新建Cordova项目来实现JavaScript与原生代码的交互，在Cordova项目中的配置文件中定义方法名以供JavaScript代码调用，本平台主要实现Android和IO本文档来自技高网...

【技术保护点】
一种基于前端框架的移动端跨平台应用开发框架，其特征在于，包括：应用表现与业务逻辑层：通过前端框架进行基本的页面布局、网络请求数据、数据加载、页面导航开发，并进行业务逻辑处理，编译成网页文件；HTML渲染层：通过浏览器将网页的解析结果经过计算、排版布局、调用移动设备接口，渲染绘制到用户界面上；移动设备API，用于HTML渲染层与移动端操作系统硬件功能间的数据交互，提供访问的移动设备API；移动端操作系统平台；对完成的工程进行打包，根据识别的移动端操作系统生成可在相应系统下运行的安装文件。

【技术特征摘要】
1.一种基于前端框架的移动端跨平台应用开发框架，其特征在于，包括：应用表现与业务逻辑层：通过前端框架进行基本的页面布局、网络请求数据、数据加载、页面导航开发，并进行业务逻辑处理，编译成网页文件；HTML渲染层：通过浏览器将网页的解析结果经过计算、排版布局、调用移动设备接口，渲染绘制到用户界面上；移动设备API，用于HTML渲染层与移动端操作系统硬件功能间的数据交互，提供访问的移动设备API；移动端操作系统平台；对完成的工程进行打包，根据识别的移动端操作系统生成可在相应系统下运行的安装文件。2.根据权利要求1所述的基于前端框架的移动端跨平台应用开发框架，其特征在于，所述HTML渲染层与移动端操作系统硬件功能间的数据交互包括，生成交互插件，通过交互插件向移动设备发送信息，移动设备接收信息后将原生代码的执行结果以JSON对象的形式发送至HTML渲染层。3.根据权利要求2所述的基于前端框架的移动...

【专利技术属性】
技术研发人员：黄刘生，辛贺，徐宏力，
申请(专利权)人：中国科学技术大学苏州研究院，
类型：发明
国别省市：江苏,32