背景

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

隨著移動互聯(lián)網(wǎng)的發(fā)展和普及，越來越多的業(yè)務(wù)都有了移動App版本的實現(xiàn)，單個App的規(guī)模也越來越大。這也就造成App的開發(fā)不再是三兩個人就能夠完成，需要更多的人來開發(fā)。大型項目開發(fā)所面對的依賴管理、溝通成本問題，也出現(xiàn)在App開發(fā)的過程中，如果不解決好這兩個問題，很可能會引起項目缺陷增多、開發(fā)效率降低，進(jìn)而導(dǎo)致項目延期，并且也會造成項目后期維護(hù)的難度增大。

綜上，對于中大型的App開發(fā)項目，需要一個既支持混合開發(fā)模式、又能夠解決依賴和溝通問題的開發(fā)框架來有效的指導(dǎo)和規(guī)范開發(fā)。

核心需求

一個好的App開發(fā)框架，要能在框架層面解決中大型App開發(fā)中Hybrid開發(fā)框架選型、模塊間解耦的問題，同時也要提供模塊動態(tài)變更、動態(tài)升級的解決方案。

除了App開發(fā)框架之外，還應(yīng)包括以下三部分內(nèi)容：

? 后臺發(fā)布管理平臺

支持模塊動態(tài)變更、動態(tài)升級，后臺發(fā)布管理平臺是與之想配套的后臺管理功能，包括數(shù)據(jù)管理和App接口兩部分。

? 持續(xù)集成方案

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

? H5模塊開發(fā)規(guī)范

提供H5模塊開發(fā)的規(guī)范，用于實現(xiàn)動態(tài)模塊功能。

解決“規(guī)模變大”問題思路

分而治之

模塊化，將業(yè)務(wù)功能劃分成多個獨立的模塊；

模塊間做到高內(nèi)聚低耦合，互不干擾、并行開發(fā)

依賴統(tǒng)一管理

依賴不可避免；

對依賴進(jìn)行統(tǒng)一規(guī)劃管理；

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

• 頁面間跳轉(zhuǎn)

• API調(diào)用

解決“跨平臺”問題思路

Cordova (PhoneGap)

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

• HTML + CSS + JS +原生插件

• 開放式的原生插件框架

• 強(qiáng)大的社區(qū)力量

解決“動態(tài)升級”問題思路

App發(fā)布到應(yīng)用市場后，往往需要一個比較長的審核周期，特別是蘋果商店；當(dāng)App的重要功能出現(xiàn)Bug時，需要有快速的應(yīng)對方案，重新發(fā)版本到應(yīng)用市場肯定是慢了。為了快速的應(yīng)對業(yè)務(wù)需求的變化和緊急Bug的處理，App對動態(tài)升級的需求越來越頻繁。所以實現(xiàn)一套動態(tài)升級方案，主要以模塊為單位展開。

從動態(tài)模塊的角度，將模塊分為三種：NA模塊、H5-offline模塊、H5-online模塊。

NA模塊的頁面都需要預(yù)置在App中，H5-offline模塊的頁面可以預(yù)置在應(yīng)用中、也可以在應(yīng)用安裝后再下載，H5-online模塊的頁面部署在服務(wù)器端。

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

1、模塊的icon、名字可以動態(tài)修改；

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

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

對于模塊動態(tài)升級，主要指的是H5-offline模塊，對H5-offline模塊的安全性要做充分的考慮：對模塊的離線包有進(jìn)行加密處理，也要對離線包里的文件進(jìn)行哈希校驗，防止被篡改。

技術(shù)架構(gòu)

App開發(fā)框架應(yīng)以模塊化設(shè)計為基礎(chǔ)，同時打通NA與H5兩種不同技術(shù)實現(xiàn)的業(yè)務(wù)。模塊主要分為兩種形態(tài)：

? NA模塊

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

? H5模塊

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

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

? API總線

主要提供模塊api注冊和調(diào)用兩個能力；

??頁面導(dǎo)航總線

不區(qū)分NA和H5的融合頁面設(shè)計，頁面的打開和返回由頁面導(dǎo)航總線統(tǒng)一調(diào)度；

? 模塊總線

模塊總線從邏輯上確定了模塊的概念，同時支持模塊的遠(yuǎn)程變更和動態(tài)升級；

采用業(yè)界最流行的Cordova框架來充當(dāng)JS Bridge，Cordova擁有大量的社區(qū)插件可以使用，同時也提供了完整的插件開發(fā)規(guī)范，非常容易自定義開發(fā)插件。

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

開發(fā)框架發(fā)布件

App開發(fā)框架庫：

framework（android&ios）

plugins（js）

App工程Demo（android&ios）

server：

發(fā)布管理平臺的部署包、接口文檔、部署手冊等文件

產(chǎn)品白皮書：

對開發(fā)框架的使用進(jìn)行詳細(xì)的講解

開發(fā)框架集成

• 使用Cordova命令行創(chuàng)建項目工程；

• 向工程中導(dǎo)入開發(fā)框架庫framework（android&ios）；

• 為主工程和子工程創(chuàng)建開發(fā)框架統(tǒng)一約定的配置文件；

• 在App啟動的時候調(diào)用開發(fā)框架的初始化方法，進(jìn)行初始化；

• 集成完畢，可以在項目中正常使用開發(fā)框架的API

開發(fā)框架配置文件

在使用開發(fā)框架前，需要將api、page、module注冊到開發(fā)框架對應(yīng)的總線中，除了調(diào)用對應(yīng)的注冊外，開發(fā)框架推薦采用配置文件的注冊方式，只需要將數(shù)據(jù)配在配置文件中，開發(fā)框架會自動完成注冊。

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

Android放在主工程和子工程的assets的根目錄下；

iOS放在主工程和子工程的bundle文件中。

例子如下：

開發(fā)框架模塊總線

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

在邏輯上，以模塊為基礎(chǔ)在開發(fā)框架配置文件中組織頁面和API，使得邏輯更清晰；

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

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

2、ModuleHelper封裝了ModuleBus提供的原子方法，實現(xiàn)了業(yè)務(wù)的串聯(lián)，是一個快捷使用API的輔助類

注：模塊總線將模塊的狀態(tài)分為：正常、未安裝、有新版本（分強(qiáng)制升級和非強(qiáng)制升級）、已下載、模塊數(shù)據(jù)被篡改。

開發(fā)框架頁面導(dǎo)航總線

主要功能：

對NA頁面和H5頁面的跳轉(zhuǎn)進(jìn)行統(tǒng)一的調(diào)度，通過維護(hù)一個頁面的棧來實現(xiàn)。

核心API：

開發(fā)框架頁面API總線

API總線主要的作用是解耦模塊間的方法調(diào)用，提供的核心API只有兩個：

register

模塊實現(xiàn)API后，向總線注冊(一般由框架在解析配置文件時自動調(diào)用)；

call

調(diào)用API，調(diào)用方通過API總線調(diào)用需要調(diào)用的API

使用舉例

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

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

2、A模塊需要獲取token時，調(diào)用APIBus.call(“m_account”, “getToken”,“入?yún)ⅰ?獲取token，返回值是APIResult對象(對象主要包含狀態(tài)碼和業(yè)務(wù)字符串)。

開發(fā)框架擴(kuò)展

提供模塊級別的開發(fā)框架：

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

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

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

結(jié)束語

如需完整或者更多資料，請掃描下方二維碼聯(lián)系，謝謝。