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

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

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

除了手機App的(de)開發發框架之外，還應包括以下三部分內(nèi)容：

後台發布管理(lǐ)平台

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

 持續集成方案

提供配套的(de)持續集成方案，用于項目開發過程中自(zì)動打包。

 H5模塊開發規範

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

解決“規模變大”問題思路

分而治之

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

模塊間做(zuò)到高(gāo)內(nèi)聚低(dī)耦合，互不幹擾、并行開發

依賴統一(yī)管理(lǐ)

依賴不可(kě)避免；

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

模塊間的(de)依賴可(kě)以歸納為(wèi)：

    頁面間跳轉

    API調用

解決“跨平台”問題思路

Cordova (PhoneGap)

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

    HTML + CSS + JS +原生插件

    開放式的(de)原生插件框架

    強大的(de)社區力量

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

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

模塊的(de)動态性主要體現有以下幾方面：

1、模塊的(de)icon、名字可(kě)以動态修改；

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

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

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

技術架構

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

  NA模塊

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

 H5模塊

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

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

API總線

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

 頁面導航總線

不區分NA和(hé)H5的(de)融合頁面設計，頁面的(de)打開和(hé)返回由頁面導航總線統一(yī)調度；

  模塊總線

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

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

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

開發框架發布件

App開發框架庫：

framework（android&ios）

plugins（js）

App工程Demo（android&ios）

server：

發布管理(lǐ)平台的(de)部署包、接口文檔、部署手冊等文件

産品白皮書：

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

開發框架集成

    使用Cordova命令行創建項目工程；

    向工程中導入開發框架庫framework（android&ios）；

    為(wèi)主工程和(hé)子(zǐ)工程創建開發框架統一(yī)約定的(de)配置文件；

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

    集成完畢，可(kě)以在項目中正常使用開發框架的(de)API

開發框架配置文件

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

開發框架的(de)配置文件的(de)命名約定為(wèi)：開發框架名稱-子(zǐ)工程名.xml，其中主工程為(wèi)開發框架名稱-main.xml，配置文件的(de)約定放置的(de)位置為(wèi)：

Android放在主工程和(hé)子(zǐ)工程的(de)assets的(de)根目錄下；

iOS放在主工程和(hé)子(zǐ)工程的(de)bundle文件中。

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

在邏輯上，以模塊為(wèi)基礎在開發框架配置文件中組織頁面和(hé)API，使得邏輯更清晰；

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

ModuleBus提供模塊的(de)原子(zǐ)化操作方法；

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

注：模塊總線将模塊的(de)狀态分為(wèi)：正常、未安裝、有新版本（分強制升級和(hé)非強制升級）、已下載、模塊數據被篡改。

開發框架頁面導航總線

主要功能：

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

核心API：

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

register

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

call

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

使用舉例

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

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

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

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

開發框架擴展

提供模塊級别的(de)開發框架：

    NA模塊提供MVC、MVP、MVVM等開發框架；

    H5模塊提供MVVM、SPA等開發框架；

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

跨平台App開發框架比較；

 每個框架幾乎都包含以下特性：

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

篩選框架的(de)要求：

    性能：運行速度快
    UI：提供接近原生的(de)UI體驗
    插件多，文檔豐富，開發效率高(gāo)，容易擴展和(hé)維護
    滿足業務需求

1，Cordova

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

 優點：

    開源免費，社區生态成熟，插件豐富
    支持離(lí)線場景應用
    開發工具選擇空間大

缺點:

    隻提供基礎訪問設備的(de)接口，需要自(zì)己搭配其他UI框架和(hé)JavaScript框架來搭配

UI框架

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

2，Ionic

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

技術要求

    HTML + CSS + AngularJS

優點：

    基于 Cordova
    漂亮(liàng)的(de)界面，追求性能，專注原生，免費開源
    Angular JS MVVM 開發理(lǐ)念，數據雙向綁定
    繼承自(zì) Cordova，可(kě)以使用 Cordova 的(de)插件

缺點：

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

3，AppCan

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

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

優點

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

缺點

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

4，APICloud

優點：

    不懂原生開發，不懂後台語言就可(kě)完成APP

缺點：

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

5，React Native

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

缺點：

    初次學(xué)習成本高(gāo)
    必須在不同平台下寫兩套代碼，依賴暴露的(de)接口

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