手機App的開(kāi)發一(yī)般都需要滿足Android和iOS兩個系統環境，也就意味着一(yī)個App需要定制兩套實現方案，造成開(kāi)發成本和維護成本都很高。爲了解決這個問題，最好的辦法就是實現一(yī)套代碼跨端運行，所以Hybrid App混合應用模式應運而生(shēng)。在Hybrid App整個開(kāi)發框架上，有各種各樣的框架，各種各樣的技術選型，而現在主要的技術就是Web技術，不僅簡單，更容易實現UI，開(kāi)發者人數也比較多。目前市面上的大(dà)多數App都是采用Web+Native的混合技術來實現的。

大(dà)型項目開(kāi)發所面對的依賴管理、溝通成本問題，也出現在App開(kāi)發的過程中(zhōng)，如果不解決好這兩個問題，很可能會引起項目缺陷增多、開(kāi)發效率降低，進而導緻項目延期，并且也會造成項目後期維護的難度增大(dà)。
綜上，對于中(zhōng)大(dà)型的App開(kāi)發項目，需要一(yī)個既支持混合開(kāi)發模式、又(yòu)能夠解決依賴和溝通問題的開(kāi)發框架來有效的指導和規範開(kāi)發。

核心需求；
一(yī)個好的App開(kāi)發框架，要能在框架層面解決中(zhōng)大(dà)型App開(kāi)發中(zhōng)Hybrid開(kāi)發框架選型、模塊間解耦的問題，同時也要提供模塊動态變更、動态升級的解決方案。

除了手機App的開(kāi)發發框架之外(wài)，還應包括以下(xià)三部分(fēn)内容：

後台發布管理平台

支持模塊動态變更、動态升級，後台發布管理平台是與之想配套的後台管理功能，包括數據管理和App接口兩部分(fēn)。

 持續集成方案

提供配套的持續集成方案，用于項目開(kāi)發過程中(zhōng)自動打包。

 H5模塊開(kāi)發規範

提供H5模塊開(kāi)發的規範，用于實現動态模塊功能。

解決“規模變大(dà)”問題思路

分(fēn)而治之

模塊化，将業務功能劃分(fēn)成多個獨立的模塊；

模塊間做到高内聚低耦合，互不幹擾、并行開(kāi)發

依賴統一(yī)管理

依賴不可避免；

對依賴進行統一(yī)規劃管理；

模塊間的依賴可以歸納爲：

    頁面間跳轉

    API調用

解決“跨平台”問題思路

Cordova (PhoneGap)

    業界最主流的開(kāi)源移動跨端框架

    HTML + CSS + JS +原生(shēng)插件

    開(kāi)放(fàng)式的原生(shēng)插件框架

    強大(dà)的社區力量

解決“動态升級”問題思路

App發布到應用市場後，往往需要一(yī)個比較長的審核周期，特别是蘋果商(shāng)店(diàn)；當App的重要功能出現Bug時，需要有快速的應對方案，重新發版本到應用市場肯定是慢(màn)了。爲了快速的應對業務需求的變化和緊急Bug的處理，App對動态升級的需求越來越頻(pín)繁。所以實現一(yī)套動态升級方案，主要以模塊爲單位展開(kāi)。
從動态模塊的角度，将模塊分(fēn)爲三種：NA模塊、H5-offline模塊、H5-online模塊。
NA模塊的頁面都需要預置在App中(zhōng)，H5-offline模塊的頁面可以預置在應用中(zhōng)、也可以在應用安裝後再下(xià)載，H5-online模塊的頁面部署在服務器端。

模塊的動态性主要體(tǐ)現有以下(xià)幾方面：

1、模塊的icon、名字可以動态修改；

2、模塊的三種類型之間可以互相切換，比如：某個模塊本來是NA實現，上線後發現有重大(dà)Bug，可以切換到H5-offine或者H5-online的實現，如果沒有這兩種實現，可以切換到一(yī)個“敬請期待”的在線頁面；

3、H5-offline模塊支持版本升級。

對于模塊動态升級，主要指的是H5-offline模塊，對H5-offline模塊的安全性要做充分(fēn)的考慮：對模塊的離(lí)線包有進行加密處理，也要對離(lí)線包裏的文件進行哈希校驗，防止被篡改。

技術架構

App開(kāi)發框架應以模塊化設計爲基礎，同時打通NA與H5兩種不同技術實現的業務。模塊主要分(fēn)爲兩種形态：

  NA模塊

主要由NA頁面組成，也可以是NA容器加載的H5頁面，NA模塊可以對外(wài)提供api；

 H5模塊

由H5頁面組成，可以是離(lí)線頁面也可以是在線頁面，H5模塊無法對外(wài)提供api，但是可以調用其他NA模塊提供的api；

實現模塊間的完全解耦，推薦模塊代碼不僅要邏輯上獨立，最好是采用子工(gōng)程的方式實現物(wù)理上的分(fēn)離(lí)。通過三條總線機制來實現模塊間的解耦：

API總線

主要提供模塊api注冊和調用兩個能力；

 頁面導航總線

不區分(fēn)NA和H5的融合頁面設計，頁面的打開(kāi)和返回由頁面導航總線統一(yī)調度；

  模塊總線

模塊總線從邏輯上确定了模塊的概念，同時支持模塊的遠程變更和動态升級；

采用業界最流行的Cordova框架來充當JS Bridge，Cordova擁有大(dà)量的社區插件可以使用，同時也提供了完整的插件開(kāi)發規範，非常容易自定義開(kāi)發插件。

開(kāi)發框架應對API總線、頁面導航總線、模塊總線這些核心能力提供了cordova插件的實現，使H5頁面也能夠輕松的調用這些api，并且做到NA與H5調用無差異化。

開(kāi)發框架發布件

App開(kāi)發框架庫：

framework（android&ios）

plugins（js）

App工(gōng)程Demo（android&ios）

server：

發布管理平台的部署包、接口文檔、部署手冊等文件

産品白(bái)皮書(shū)：

對開(kāi)發框架的使用進行詳細的講解

開(kāi)發框架集成

    使用Cordova命令行創建項目工(gōng)程；

    向工(gōng)程中(zhōng)導入開(kāi)發框架庫framework（android&ios）；

    爲主工(gōng)程和子工(gōng)程創建開(kāi)發框架統一(yī)約定的配置文件；

    在App啓動的時候調用開(kāi)發框架的初始化方法，進行初始化；

    集成完畢，可以在項目中(zhōng)正常使用開(kāi)發框架的API

開(kāi)發框架配置文件

在使用開(kāi)發框架前，需要将api、page、module注冊到開(kāi)發框架對應的總線中(zhōng)，除了調用對應的注冊外(wài)，開(kāi)發框架推薦采用配置文件的注冊方式，隻需要将數據配在配置文件中(zhōng)，開(kāi)發框架會自動完成注冊。

開(kāi)發框架的配置文件的命名約定爲：開(kāi)發框架名稱-子工(gōng)程名.xml，其中(zhōng)主工(gōng)程爲開(kāi)發框架名稱-main.xml，配置文件的約定放(fàng)置的位置爲：

Android放(fàng)在主工(gōng)程和子工(gōng)程的assets的根目錄下(xià)；

iOS放(fàng)在主工(gōng)程和子工(gōng)程的bundle文件中(zhōng)。

模塊總線主要有兩方面的功能：

在邏輯上，以模塊爲基礎在開(kāi)發框架配置文件中(zhōng)組織頁面和API，使得邏輯更清晰；

在功能上，模塊總線主要實現動态模塊的功能，對外(wài)提供兩個核心的API類：

ModuleBus提供模塊的原子化操作方法；

ModuleHelper封裝了ModuleBus提供的原子方法，實現了業務的串聯，是一(yī)個快捷使用API的輔助類

注：模塊總線将模塊的狀态分(fēn)爲：正常、未安裝、有新版本（分(fēn)強制升級和非強制升級）、已下(xià)載、模塊數據被篡改。

開(kāi)發框架頁面導航總線

主要功能：

對NA頁面和H5頁面的跳轉進行統一(yī)的調度，通過維護一(yī)個頁面的棧來實現。

核心API：

開(kāi)發框架頁面API總線
API總線主要的作用是解耦模塊間的方法調用，提供的核心API隻有兩個：

register

模塊實現API後，向總線注冊(一(yī)般由框架在解析配置文件時自動調用)；

call

調用API，調用方通過API總線調用需要調用的API

使用舉例

登錄成功後，賬戶模塊保存登錄token，其他的模塊需要獲取token時，要調用賬戶模塊提供的API獲取。實現步驟如下(xià)：

1、賬戶模塊實現GetTokenAPI，調用APIBus.register(“m_account”, “getToken”,GetTokenAPI.class)注冊到API總線；

2、A模塊需要獲取token時，調用APIBus.call(“m_account”, “getToken”,“入參”)獲取token，返回值是APIResult對象(

對象主要包含狀态碼和業務字符串)。

開(kāi)發框架擴展

提供模塊級别的開(kāi)發框架：

    NA模塊提供MVC、MVP、MVVM等開(kāi)發框架；

    H5模塊提供MVVM、SPA等開(kāi)發框架；

    H5模塊提供微信的兼容支持

跨平台App開(kāi)發框架比較；

 每個框架幾乎都包含以下(xià)特性：

    使用 HTML5 + CSS + JavaScript 開(kāi)發
    跨平台重用代碼
    豐富的UI庫
    提供訪問設備原生(shēng)API的 JavaScript API 包裝器
    解決原生(shēng)開(kāi)發中(zhōng)機型适配的難題
    提供打包、部署的工(gōng)具或服務
    都需要學習自身封裝的 JavaScript API

篩選框架的要求：

    性能：運行速度快
    UI：提供接近原生(shēng)的UI體(tǐ)驗
    插件多，文檔豐富，開(kāi)發效率高，容易擴展和維護
    滿足業務需求

1，Cordova

    Cordova 和 PhoneGap 的區别？
    PhoneGap 是 Apache Cordova 的一(yī)個分(fēn)發版，就像 Ubuntu 是 基于 Linux 的一(yī)個發行版，其代碼庫也基于 Cordova，隻是 PhoneGap 關聯了 Adobe 的一(yī)些額外(wài)的商(shāng)業工(gōng)具或服務，例如 PhoneGap Build 和 Adobe Shadow，來幫助開(kāi)發者簡化開(kāi)發。
    此外(wài)，兩者提供的CLI工(gōng)具、項目結構有差異，如：
    Cordova 把 config.html 放(fàng)在項目目錄下(xià)，而 PhoneGap 把它放(fàng)在www 目錄下(xià)。

 優點：

    開(kāi)源免費(fèi)，社區生(shēng)态成熟，插件豐富
    支持離(lí)線場景應用
    開(kāi)發工(gōng)具選擇空間大(dà)

缺點:

    隻提供基礎訪問設備的接口，需要自己搭配其他UI框架和JavaScript框架來搭配

UI框架

    Framework7
    MSUI | Github
    Famous
    爲任意屏幕創建流暢、複雜(zá)的UI。
    免費(fèi)和開(kāi)源的JavaScript渲染引擎。着名引擎的獨特之處在于其JavaScript渲染引擎和3D物(wù)理引擎。
    官網 | Github | Hello World
    使用 Famo.us 創建高性能移動 UI

2，Ionic

官網地址：http://www.ionic.wang/ （有案例）
Ionic = Cordova + AngularJS + 一(yī)套樣式庫。

技術要求

    HTML + CSS + AngularJS

優點：

    基于 Cordova
    漂亮的界面，追求性能，專注原生(shēng)，免費(fèi)開(kāi)源
    Angular JS MVVM 開(kāi)發理念，數據雙向綁定
    繼承自 Cordova，可以使用 Cordova 的插件

缺點：

    Angular JS 學習路線陡峭
    Ionic 框架相比于原生(shēng)的 Cordova 有所差異，Cordova 某些官方插件可能不适用于Ionic

3，AppCan

通過AppCan IDE集成開(kāi)發系統、雲端打包器等，快速開(kāi)發出Android、iOS、WP平台上的移動應用。

有兩種方式創建項目：IDE 和雲端，并且IDE可以同步到雲端。
免費(fèi)用戶有100M空間、50個應用的限制。

優點

    提供一(yī)體(tǐ)化解決方案，方便環境搭建、開(kāi)發、調試、發布
    框架自帶UI包，包含常用控件樣式
    框架對UI、動畫渲染進行過優化，反應速度快
    支持本地打包、雲端打包
    基于密鑰的代碼加密

缺點

    不開(kāi)源，無法修改、優化底層代碼
    分(fēn)大(dà)衆版和企業版，大(dà)衆版免費(fèi)，但功能有缺失，詳細見附錄
    暫不支持自行開(kāi)發控件/，無法調取android原生(shēng)功能
    框架自帶功能過多，導緻應用安裝包偏大(dà)。
    文檔偏少
    部分(fēn)系統無法使用IDE進行調試
    隻能在服務器端發布，無法在本地發布
    IOS發布，需要将證書(shū)上傳至服務器

4，APICloud

優點：

    不懂原生(shēng)開(kāi)發，不懂後台語言就可完成APP

缺點：

    更新速度快，版本不夠穩定
    面向不懂App開(kāi)發人群，不适合程序員(yuán)和科技公司，過度依賴會降低技術水平
    涉嫌抄襲DCloud大(dà)量代碼

5，React Native

能夠在Javascript和React的基礎上獲得完全一(yī)緻的開(kāi)發體(tǐ)驗，構建世界一(yī)流的原生(shēng)APP。
僅需學習一(yī)次，編寫任何平台。(Learn once, write anywhere)

缺點：

    初次學習成本高
    必須在不同平台下(xià)寫兩套代碼，依賴暴露的接口

責任編輯：中(zhōng)山網站建設
 【網訊網絡】國家高新技術企業》十年專注軟件開(kāi)發，網站建設，網頁設計，APP開(kāi)發，小(xiǎo)程序，微信公衆号開(kāi)發，定制各類企業管理軟件（OA、CRM、ERP、訂單管理系統、進銷存管理軟件等)！服務熱線：0760-88610046、13924923903，http://www.wansion.net