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

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

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

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

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

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

 持續集成方案

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

 H5模塊開發規範

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

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

分(fēn)而治之

模塊化(huà)，将業務功能劃分(fēn)成多(duō)個(gè)獨立的(de)模塊；

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

依賴統一管理(lǐ)

依賴不可(kě)避免；

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

模塊間的(de)依賴可(kě)以歸納爲：

    頁面間跳轉

    API調用(yòng)

解決“跨平台”問題思路

Cordova (PhoneGap)

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

    HTML + CSS + JS +原生插件

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

    強大(dà)的(de)社區(qū)力量

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

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

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

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

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

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

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

技術架構

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

  NA模塊

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

 H5模塊

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

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

API總線

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

 頁面導航總線

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

  模塊總線

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

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

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

開發框架發布件

App開發框架庫：

framework（android&ios）

plugins（js）

App工程Demo（android&ios）

server：

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

産品白皮書(shū)：

對(duì)開發框架的(de)使用(yòng)進行詳細的(de)講解

開發框架集成

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

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

    爲主工程和(hé)子工程創建開發框架統一約定的(de)配置文件；

    在App啓動的(de)時(shí)候調用(yòng)開發框架的(de)初始化(huà)方法，進行初始化(huà)；

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

開發框架配置文件

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

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

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

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

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

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

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

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

ModuleHelper封裝了(le)ModuleBus提供的(de)原子方法，實現了(le)業務的(de)串聯，是一個(gè)快(kuài)捷使用(yòng)API的(de)輔助類

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

開發框架頁面導航總線

主要功能：

對(duì)NA頁面和(hé)H5頁面的(de)跳轉進行統一的(de)調度，通(tōng)過維護一個(gè)頁面的(de)棧來(lái)實現。

核心API：

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

register

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

call

調用(yòng)API，調用(yòng)方通(tōng)過API總線調用(yòng)需要調用(yòng)的(de)API

使用(yòng)舉例

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

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

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

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

開發框架擴展

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

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

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

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

跨平台App開發框架比較；

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

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

篩選框架的(de)要求：

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

1，Cordova

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

 優點：

    開源免費，社區(qū)生态成熟，插件豐富
    支持離線場(chǎng)景應用(yòng)
    開發工具選擇空間大(dà)

缺點:

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

UI框架

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

2，Ionic

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

技術要求

    HTML + CSS + AngularJS

優點：

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

缺點：

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

3，AppCan

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

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

優點

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

缺點

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

4，APICloud

優點：

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

缺點：

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

5，React Native

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

缺點：

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

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