本發(fā)明屬于移動端跨平臺應用開發(fā)技術領域，具體地涉及一種基于前端框架的移動端跨平臺應用開發(fā)框架及開發(fā)方法。

背景技術：

隨著網絡技術的不斷發(fā)展，尤其是移動互聯(lián)網技術的發(fā)展，人們已經離不開移動終端設備，人們可以隨時隨地地通過手機從互聯(lián)網獲取信息和服務，截至2017年1月22日，中國網民數為6.88億人，其中手機網民數為6.20億人，手機上網人群占比為90.1%，由此可見移動終端設備在人們的生活中所具有的重大意義，移動端設備已經成為一個人賴以生存的一個重要工具，而移動互聯(lián)網技術的發(fā)展也成為了一個國家科技創(chuàng)新能力發(fā)展的重要指標。如果在6億手機用戶這樣一個重大的消費群體上建立一個平臺，使之廣泛應用到企業(yè)、商業(yè)、普通用戶之中，肯定可以創(chuàng)造驚天動地的奇跡。

在移動互聯(lián)網發(fā)展過程中，涌現出了很多手機操作系統(tǒng)，這其中以蘋果的ios系統(tǒng)、谷歌的android系統(tǒng)、微軟的windowsphone系統(tǒng)尤為出眾，截至2016年第二季度，這三款手機操作系統(tǒng)的市場占有率已經達到了99.7%。目前一款移動端應用軟件的開發(fā)基本都是基于這三個平臺的，由于這三種操作系統(tǒng)的軟件開發(fā)是基于不同的編程語言的，所以要開發(fā)出適配這三種系統(tǒng)的軟件，就要編寫三份不同的代碼來帶到最終目的。這就大大提高了軟件開發(fā)和維護的工作難度，這時如果要研究出一種跨平臺的移動端軟件開發(fā)平臺就至關重要。

目前移動端應用分類主要有三種：native應用、web應用、hybrid應用。native應用主要指使用特定平臺開發(fā)語言所開發(fā)的應用，web應用主要采用統(tǒng)一標準的html、javascript、css等web技術開發(fā)，通過不同平臺的瀏覽器訪問來實現跨平臺。native應用開發(fā)的不足在于，不同手機操作系統(tǒng)的應用軟件是獨立開發(fā)的，開發(fā)者需要編寫多套針對特定手機平臺的代碼，而web應用在性能上和用戶體驗上與原生手機應用有著很大的差距。hybird應用主要是彌補以上兩者開發(fā)模式的不足的產物，使用前端技術來開發(fā)應用的頁面，調用native的代碼來完成業(yè)務邏輯的編寫。

技術實現要素：

針對當前移動軟件開發(fā)需要區(qū)分不同手機操作系統(tǒng)的問題，本發(fā)明目的是：提供了一種基于前端框架的移動端跨平臺應用開發(fā)框架及開發(fā)方法，本發(fā)明框架采用的是hybrid模式的應用開發(fā)方法，采用分層設計模式，界面采用前端技術開發(fā)，通過中間層插件調用原生應用的硬件相關功能，以完成手機應用軟件的開發(fā)。本發(fā)明應用到移動軟件項目開發(fā)中，可以大大提高移動端軟件的開發(fā)效率。

本發(fā)明的技術方案是：

一種基于前端框架的移動端跨平臺應用開發(fā)框架，包括：

應用表現與業(yè)務邏輯層：通過前端框架進行基本的頁面布局、網絡請求數據、數據加載、頁面導航開發(fā)，并進行業(yè)務邏輯處理，編譯成網頁文件；

html渲染層：通過瀏覽器將網頁的解析結果經過計算、排版布局、調用移動設備接口，渲染繪制到用戶界面上；

移動設備api，用于html渲染層與移動端操作系統(tǒng)硬件功能間的數據交互，提供訪問的移動設備api；

移動端操作系統(tǒng)平臺；對完成的工程進行打包，根據識別的移動端操作系統(tǒng)生成可在相應系統(tǒng)下運行的安裝文件。

優(yōu)選的，所述html渲染層與移動端操作系統(tǒng)硬件功能間的數據交互包括，生成交互插件，通過交互插件向移動設備發(fā)送信息，移動設備接收信息后將原生代碼的執(zhí)行結果以json對象的形式發(fā)送至html渲染層。

優(yōu)選的，所述交互插件包括接口文件和交互模塊，所述接口文件用于識別移動端操作系統(tǒng)，所述交互模塊，通過ajax發(fā)送請求，實現數據交互。

本發(fā)明還公開了一種基于前端框架的移動端跨平臺應用開發(fā)方法，包括以下步驟：

s01：通過前端框架進行基本的頁面布局、網絡請求數據、數據加載、頁面導航開發(fā)，并進行業(yè)務邏輯處理，編譯成網頁文件；

s02：通過瀏覽器將網頁的解析結果經過計算、排版布局、調用移動設備接口，渲染繪制到用戶界面進行功能調試，通過交互插件與移動端操作系統(tǒng)硬件功能進行數據交互；

s03：對完成的工程進行打包，根據識別的移動端操作系統(tǒng)生成可在相應系統(tǒng)下運行的安裝文件。

優(yōu)選的，所述步驟s02中，在網頁上調試功能性代碼時，當發(fā)生網絡請求時，構建跨域請求轉接工具，通過跨域請求轉接工具將本地請求轉接到真實的url地址。

與現有技術相比，本發(fā)明的優(yōu)點是：

（1）在本發(fā)明的框架上，軟件開發(fā)人員只需關注前端代碼的實現，無需考慮不同移動端操作系統(tǒng)的差異性，即可完成移動端應用的開發(fā)，在此平臺上開發(fā)的軟件可以同時適配于android、ios、windowsphone、以及網頁。

（2）在本發(fā)明框架上，一款應用的開發(fā)只需編寫一份代碼，無需區(qū)分移動端操作系統(tǒng)平臺，大大縮短了軟件開發(fā)的生命周期，提高了開發(fā)效率，節(jié)約的軟件開發(fā)的人力成本以及不同客戶端間的人員管理成本。

（3）本發(fā)明的框架中與設備相關的功能是以插件形式手動添加，無需進行審批，這些功能可以一直留存在native工程中重復利用和完善。

（4）本發(fā)明框架的開發(fā)高內聚、低耦合，系統(tǒng)相對穩(wěn)定，亦可對框架進行定制化開發(fā)，增加了框架內部構造的靈活性。

附圖說明

下面結合附圖及實施例對本發(fā)明作進一步描述：

圖1為本發(fā)明框架架構圖；

圖2為在本發(fā)明框架上構建的手機應用軟件工程結構圖；

圖3為本發(fā)明框架各個模塊間的關系圖。

具體實施方式

以下結合具體實施例對上述方案做進一步說明。應理解，這些實施例是用于說明本發(fā)明而不限于限制本發(fā)明的范圍。實施例中采用的實施條件可以根據具體廠家的條件做進一步調整，未注明的實施條件通常為常規(guī)實驗中的條件。

實施例：

一種基于前端框架的移動端跨平臺應用開發(fā)框架，如圖1所示跨平臺框架設計為四層架構體系：分別為應用表現與業(yè)務邏輯層、html渲染層、移動設備api以及手機操作系統(tǒng)平臺，其中：

應用表現與業(yè)務邏輯層：根據圖3移動端跨平臺框架架構圖所示，此層結構主要用于解決軟件應用的功能模塊研發(fā)以及業(yè)務邏輯的處理，此層主要使用前端框架angularjs2來完成代碼的編寫，編寫完成的工程入口為index.html，即生成一個可運行的網頁，通過css來控制網頁格式，通過typescript來完成業(yè)務邏輯處理。涉及到手機功能的頁面根據cordova插件中定義的javascript方法名來調用原生代碼，將原生代碼的處理結果以json格式接收，顯示到頁面上，完成數據交互。

html渲染層：在每個移動設備上設置webview組件，通過此組件，android工程和ios工程可以加載應用表現與業(yè)務邏輯層生成的網頁，此功能是通過cordova.loadurl(stringurl)方法來實現的，方法中的url為應用表現與業(yè)務邏輯層中的index.html的存放地址，通過此方法將網頁的入口文件加載到webview中，webview組件的內置瀏覽器負責將頁面的解析結果經過計算、排版布局、調用移動設備接口，渲染繪制到用手機戶界面上。

移動設備api：本層主要功能是中間橋梁的作用，通過本層可實現html渲染層與手機操作系統(tǒng)硬件功能間的交互，具體的交互方式是通過cordova插件來實現的，插件是通過新建cordova項目來實現javascript與原生代碼的交互，在cordova項目中的配置文件中定義方法名以供javascript代碼調用，本平臺主要實現android和ios工程與javascript的通信，通信入口函數為cordova.exec（success，error，service，action，[message]），exec的參數內容分別為方法執(zhí)行成功的回調、失敗的回調、執(zhí)行的服務名稱、執(zhí)行動作和傳遞的參數，在原生代碼中使用execute（success，error，service，action，[message]）方法接收exec方法中的內容，根據action的具體動作進行不同的操作，并將原生代碼的執(zhí)行結果以json對象的形式回傳給javascript中的方法。從而實現javascript與原生代碼的雙向通信。

移動端操作系統(tǒng)平臺：移動端跨平臺框架中開發(fā)的移動端應用最終要安裝到此平臺，此平臺包括android和ios。軟件以安裝包的形式下載的移動端操作系統(tǒng)中，無差異化的運行于各個操作系統(tǒng)中，最終實現跨平臺。

本實施例以手機為例對基于前端框架的移動端跨平臺應用開發(fā)方法進行說明，具體步驟如下：

步驟1：構建手機操作系統(tǒng)的工程項目，此工程用于編譯手機安裝程序包，此工程包括android工程和ios工程，工程目錄結構包括www文件和cordovabox文件，www文件存放編譯器編譯過后的網頁前端源代碼以及插件配置文件，cordovabox文件存放與手機平臺相關的資源文件以及具體的功能性插件，android工程采用傳統(tǒng)的編譯方式gradle工具來完成安卓程序的打包，并發(fā)布到谷歌應用市場，供用戶下載，ios工程采用xcode工具來完成應用程序的打包，并上傳到蘋果應用商店。

步驟2：使用ionic框架新建項目，編寫網頁文件，完成基本的頁面布局、網絡請求數據、數據加載、頁面導航開發(fā)。本步驟主要任務是通過前端流行的開發(fā)框架angularjs來完成網頁內容的開發(fā)，開發(fā)出的網頁與傳統(tǒng)網頁的主要差別是網頁中會有對手機基本功能的調用，其他方面與電腦端的網頁開發(fā)并無區(qū)別，手機功能的調用通過cordova插件來完成數據交互，將手機端的執(zhí)行結果通過json格式的數據返回給頁面。

步驟3：將步驟2中開發(fā)完的代碼編譯成瀏覽器上可識別的javascript代碼于www文件中，并將此文件移動到步驟1中的工程中。

步驟4：在步驟2中新建的項目下，編寫可調用移動設備api的交互插件，插件文件主要內容為plugin.xml配置javascript調用手機native代碼的接口，src文件存放各個手機操作系統(tǒng)平臺的具體功能代碼，例如拍照功能、相冊功能、狀態(tài)欄、鍵盤等手機基本功能。

步驟5：在網頁上調試功能性代碼時，當發(fā)生網絡請求時，由于是在本地發(fā)送請求的，所以會有跨域請求的問題，就需要在本地構建發(fā)送跨域請求的轉接工具，將本地請求轉接到真實的url地址。

步驟6：步驟1與步驟2中的工程綜合在一起就構成了完整的基于前端框架的移動端跨平臺框架，二者的結合需要項目中部分文件的整合，代碼的拷貝使用本框架自有的工具gulpfile.ts。

步驟7：構建gulpfile.ts文件，將步驟1中的www文件拷貝到步驟2中的根目錄下，gulpfile文件亦可更改真機調試工作中的主機地址，防止手動更改帶來錯誤。

步驟8：將整合后的步驟1中的工程進行打包，生成在手機操作系統(tǒng)上可安裝的安裝文件，完成項目的正式上線。

如圖2所示的工程結構，在此工程結構中實現報銷軟件的開發(fā)工作，實施步驟如下：

（1）在實施例的開發(fā)過程中，首先開發(fā)前端頁面及業(yè)務邏輯處理，page中包括provider、pipe和component。provider中處理網絡請求，從網絡上以http的方式發(fā)送請求，獲取數據。pipe格式化頁面中的顯示內容，component提供常用的公共組組件，提高代碼復用性。

（2）shareservice為頁面提供特定的公共服務，shareservice中定義具體的服務而不實現，只定義接口，實現頁面與業(yè)務層的分離。

（3）通過ionic-app-scripts工具，將使用前端技術開發(fā)的頁面布局以及業(yè)務邏輯編譯為手機操作系統(tǒng)webview能夠識別的javascript代碼。

（4）使用gulp來將步驟（3）編譯后的代碼拷貝到android和ios工程的www目錄下，完成盒子工程的構建，在此盒子工程中編譯運行相應軟件，打包出安裝到手機操作系統(tǒng)的安裝包，安裝在不同手機操作系統(tǒng)上。

上述實例只為說明本發(fā)明的技術構思及特點，其目的在于讓熟悉此項技術的人是能夠了解本發(fā)明的內容并據以實施，并不能以此限制本發(fā)明的保護范圍。凡根據本發(fā)明精神實質所做的等效變換或修飾，都應涵蓋在本發(fā)明的保護范圍之內。