基于前端框架的移动端跨平台应用开发框架及开发方法与流程

本发明属于移动端跨平台应用开发技术领域，具体地涉及一种基于前端框架的移动端跨平台应用开发框架及开发方法。

背景技术：

随着网络技术的不断发展，尤其是移动互联网技术的发展，人们已经离不开移动终端设备，人们可以随时随地地通过手机从互联网获取信息和服务，截至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和ios工程与javascript的通信，通信入口函数为cordova.exec（success，error，service，action，[message]），exec的参数内容分别为方法执行成功的回调、失败的回调、执行的服务名称、执行动作和传递的参数，在原生代码中使用execute（success，error，service，action，[message]）方法接收exec方法中的内容，根据action的具体动作进行不同的操作，并将原生代码的执行结果以json对象的形式回传给javascript中的方法。从而实现javascript与原生代码的双向通信。

移动端操作系统平台：移动端跨平台框架中开发的移动端应用最终要安装到此平台，此平台包括android和ios。软件以安装包的形式下载的移动端操作系统中，无差异化的运行于各个操作系统中，最终实现跨平台。

本实施例以手机为例对基于前端框架的移动端跨平台应用开发方法进行说明，具体步骤如下：

步骤1：构建手机操作系统的工程项目，此工程用于编译手机安装程序包，此工程包括android工程和ios工程，工程目录结构包括www文件和cordovabox文件，www文件存放编译器编译过后的网页前端源代码以及插件配置文件，cordovabox文件存放与手机平台相关的资源文件以及具体的功能性插件，android工程采用传统的编译方式gradle工具来完成安卓程序的打包，并发布到谷歌应用市场，供用户下载，ios工程采用xcode工具来完成应用程序的打包，并上传到苹果应用商店。

步骤2：使用ionic框架新建项目，编写网页文件，完成基本的页面布局、网络请求数据、数据加载、页面导航开发。本步骤主要任务是通过前端流行的开发框架angularjs来完成网页内容的开发，开发出的网页与传统网页的主要差别是网页中会有对手机基本功能的调用，其他方面与电脑端的网页开发并无区别，手机功能的调用通过cordova插件来完成数据交互，将手机端的执行结果通过json格式的数据返回给页面。

步骤3：将步骤2中开发完的代码编译成浏览器上可识别的javascript代码于www文件中，并将此文件移动到步骤1中的工程中。

步骤4：在步骤2中新建的项目下，编写可调用移动设备api的交互插件，插件文件主要内容为plugin.xml配置javascript调用手机native代码的接口，src文件存放各个手机操作系统平台的具体功能代码，例如拍照功能、相册功能、状态栏、键盘等手机基本功能。

步骤5：在网页上调试功能性代码时，当发生网络请求时，由于是在本地发送请求的，所以会有跨域请求的问题，就需要在本地构建发送跨域请求的转接工具，将本地请求转接到真实的url地址。

步骤6：步骤1与步骤2中的工程综合在一起就构成了完整的基于前端框架的移动端跨平台框架，二者的结合需要项目中部分文件的整合，代码的拷贝使用本框架自有的工具gulpfile.ts。

步骤7：构建gulpfile.ts文件，将步骤1中的www文件拷贝到步骤2中的根目录下，gulpfile文件亦可更改真机调试工作中的主机地址，防止手动更改带来错误。

步骤8：将整合后的步骤1中的工程进行打包，生成在手机操作系统上可安装的安装文件，完成项目的正式上线。

如图2所示的工程结构，在此工程结构中实现报销软件的开发工作，实施步骤如下：

（1）在实施例的开发过程中，首先开发前端页面及业务逻辑处理，page中包括provider、pipe和component。provider中处理网络请求，从网络上以http的方式发送请求，获取数据。pipe格式化页面中的显示内容，component提供常用的公共组组件，提高代码复用性。

（2）shareservice为页面提供特定的公共服务，shareservice中定义具体的服务而不实现，只定义接口，实现页面与业务层的分离。

（3）通过ionic-app-scripts工具，将使用前端技术开发的页面布局以及业务逻辑编译为手机操作系统webview能够识别的javascript代码。

（4）使用gulp来将步骤（3）编译后的代码拷贝到android和ios工程的www目录下，完成盒子工程的构建，在此盒子工程中编译运行相应软件，打包出安装到手机操作系统的安装包，安装在不同手机操作系统上。

上述实例只为说明本发明的技术构思及特点，其目的在于让熟悉此项技术的人是能够了解本发明的内容并据以实施，并不能以此限制本发明的保护范围。凡根据本发明精神实质所做的等效变换或修饰，都应涵盖在本发明的保护范围之内。