Hybrid App 開發模式

標籤：傳遞   模式   相容性   start   資源檔   app   window   瀏覽器   4.4   

　　開發移動App主要有三種模式：Native、 Hybrid 和 Web App。

　　需要注意的一點是在選擇開發模式的時候，要根據你的項目類型（圖片類？視頻類？新聞類？等），產品業務和人員技術儲備等做權衡。

　　Hybrid開發模式就是既有Native開發也有Web app的開發。那我們怎麼去確定App中某個功能模組使用Native還是Web開發？它們之間如果需要介面通訊又該如何去實現呢？又該如何更好的去維護Hybrid App產品呢？

1、Native or Web開發模組

　　當我們選擇用Hybrid模式開發App時，應先熟悉項目整個架構和App各個模組。然後將通用的，對效能要求不是那麼高的App介面可抽出來作為web介面開發，Native直接調用。一般Hybrid App開發，App介面之間的跳轉關係由Native實現並完成，web介面主要作為內容填充到Android和iOS的瀏覽器控制項中。拉手網之前Android用戶端就是採用這種模式，Native搭一個App架構殼，裡面展示內容和網路請求全部由web實現。由於用戶端瀏覽器控制項版本不同，web介面載入，渲染和緩衝機制等原因，這種模式開發的App整體在圖文比較多的情況下體驗就不太好，甚至可能會出現意想不到的奇葩問題。 建議圖文列表，涉及到視頻等多並發和介面元素比較負責或具有很強的動畫特效的情況優先考慮Native開發。 這方面在Android尤其有必要，Android 4.4之前的瀏覽器控制項WebView基於預設的WebKit核心，它不同於Chromium所使用的Webkit核心；而在4.4之後（包括4.4）的WebView的實現被替換成Chromium WebKit核心。當我們想讓App儘可能的在低版本也能運行良好時，就需要不斷做相容性開發與測試了，除非自己在App裡面打包編譯最新WebView源碼，類似開發一個瀏覽器。

2、Native & web 通訊

• Native調用js方法

Android和iOS都提供了API直接調用：

webview.loadUrl("javascript:functionName(\"" + argument + "\")");

別忘了設定 webview.getSettings().setJavaScriptEnabled(true);  

[webView stringByEvaluatingJavaScriptFromString:@"alert(‘hello world!‘)"];

• js調用Native方法。

Android實現js調用native方法一般是先編寫供js調用的類，然後通過添加javascripteInterface的方法，如

webView.addJavascriptInterface(pandoInterface, "pando");

　　將java對象pandoInterface產生js對象pando，然後直接window.pando就可以調用pandoInterface對象裡面的方法。需要注意的是供js調用的pandoInterface對象裡面的java方法需手動加上@JavascriptInterface註解，這個是Google為解決安全問題引入的。

　　iOS實現js調用Native方法相對繁瑣一點。主要是iOS原生並沒有提供js直接調用native的方式，只能通過UIWebView相關的UIWebViewDelegate協議的方法來做攔截，並在這個方法中，根據url的協議或特徵字串來做調用方法或觸發事件等工作。當js需要調用Native方法時，js建立一個隱藏的iframe設定或改變其src就會觸發Native攔截url事件。

如

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {    NSURL *url = [request URL];    if ([[url scheme] isEqualToString:@"someFunction") {        //調用原生方法        return NO;    } else {        return YES;    }}

 

　　不知道大家發現沒有，以上兩種方法都只是實現了js調用Native方法，但是都沒有實現js函數回調，將Native方法返回結果傳遞給js。

　　開放了很多jsApi介面，供大家直接調用Native的功能。通過jsApi介面和文檔我們會發現裡面實現了Native方法執行結果回調給js。這種Hybrid App開發模式很好的利用了Native高效能，多並發的優勢，將網路請求，掃碼等複雜的邏輯或者web不可能實現的功能由Native完成，而web只是做了介面顯示效果。將Android安裝包解壓之後，在assets/jsapi目錄下有個80多kb的wxjs.js檔案，裡面實現了jsApi邏輯jsbridge。下面主要簡單介紹一下這種jsbridge實現原理。

　　jsbridge核心痛點在於如何在Native方法執行完之後將返回介面給js，並且讓js能理解傳過來的參數所表達的意思。針對這，我們可以在js調用Native方法之間，將js一次調用Native的唯一標示符identifier和期望Native調用完後執行的回呼函數儲存在Map裡面，將identifier和其他參數傳遞給Native，native執行完成後，將identifier和執行結果作為參數調用js函數，在js函數裡面解析參數，得到identifier，然後在Map裡查詢對應的回呼函數，將native執行結果作為參數傳遞進去調用。有點繞，但是巧妙的利用訊息傳遞機制，實現js調用Native進行回呼函數調用，同理，Native調用js函數將返回結果給Native調用也是可以的。

　　Android在實現jsbridge時，早期方法也是需要iOS那樣，先給web介面建立iframe，然後通過js改變iframe src，Native方法通過shouldOverrideUrlLoading(WebView view, String url)攔截url處理。但是在Android 4.2.2系統上，這個方法在iframe src改變是，是不會觸發的。目前建議大家通過攔截js alert彈框做處理。

@Overridepublic boolean onJsAlert(WebView view, String url, String message,                JsResult result) {    LogUtils.i("url:" + url+"\n message:" + message);    try {        String msg = URLDecoder.decode(message, "utf-8");        if (msg.startsWith(BridgeUtil.PANDO_RETURN_DATA)) { // 如果是返回資料            handlerReturnData(message);            result.cancel();            return true;        }    } catch (UnsupportedEncodingException e) {        e.printStackTrace();    }    return super.onJsAlert(view, url, message, result);}

 

　　注意，onJsAlert方法攔截做處理後一定要result.cancel();不然web介面就會出現點擊沒反應的情況。

3、Hybrid App維護

Hybrid App涉及到html、css和js等web資源檔，當web和Native之間有相互調用時，兩者之間任何一方介面變動都會導致App出現bug。

• 考慮類似方案，將jsbridge檔案或者部分常用web資源隨App打包發布，降低維護成本，也不用擔心在網路不好的情況下載入不了web介面，在介面升級之前發布出去的App肯定也是穩定可用的，當然這個也要考慮安全性問題，畢竟你的web介面源碼通過反編譯代碼可以得到。
• 所有web資源統一從伺服器擷取。由於web資源在伺服器，所以可以隨時動態更改web介面，發現bug也不用發布App，直接線上介面升級。但是要維護web資源，使得每個發布出去的每個版本的App在載入web資源時都可用。

 

討論：

　　Q：

最近想自己寫個android的hybrid app，看了下大多推薦的是PhoneGap，不知道他的運行效率怎麼樣，如果以原生為重的話，適不適合用PhoneGap?

　　A：

我來說說吧，其實就是mui開發最快，這是我自己實踐的結果，ionic我沒用，可是cordova我用過，因為國內沒多少人分享經驗，所以坑很多。

你做一個帶掃碼，搖一搖，地理位置追蹤，訊息推送的app，這些基礎功能mui基本不用研究拿來就能用。cordova光是研究外掛程式整合和使用就得花3天時間，中間還會有很多坑。(這個已經有半成品)

但是，cordova對於你做一個需求比較奇特的app來說很好，因為他的外掛程式庫全。mui對這個支援比較弱。(這個試了一周后放棄)

話又說回來，如果那麼奇特需求的app在技術選型上為什麼不選原生？如果非得用hybird自己用webview做就是了。學cordova的時間夠把如何原生調用js和js調用原生弄明白10次了。現在我就是這麼做的。

A：  

　　如果對原生的部分功能要求較高的話，不推薦使用PhoneGap，雖說現在已經很成熟，但是如果涉及到原生功能還是很差的，我之前體驗過。。

 

---------------------------分------------割------------------------------------- 

 

以上內容摘自 

https://www.tuicool.com/articles/riE3Yn

感謝大神們的實踐總結~

 

Hybrid App 開發模式