【Hybrid App 實戰】:分享首次Hybrid App開發總結

1、前言：爲何要選用Hybrid App技術?

1. 背景

以前就任於一家較小的金融科技公司（base HangZhou），因爲大環境的不景氣，公司同事也變更比較大，原先的ios工程師已離職，android工程師已轉爲java後臺開發。公司原本打算放棄掉app端的業務，可是今年6月中旬又意外接到某民營銀行的p2p外包業務，須要開發終端app（工期兩個月）。

2. 技術選型

1. 原生開發

實際上公司以前是有開發過相同業務場景的app的，咱們首先想到的第一個解決方案是否能夠將類似app僅修改少部分UI來避免二次開發。後來派我方產品人員進行需求溝通的時候發現與以前開發的那套app主流程基本不一致，並且沒有ios同窗進行二次開發遂放棄。

2. Flutter

Flutter是目前很是火熱的一門跨平臺技術。利用Dart語言，也支持AOT以及JIT兩種編譯方式。Flutter的渲染不依靠原平生臺，而是經過本身的SKia渲染引擎，因此對於多端的表現一致性上是比RN優秀的。可是能力有限，我也只是demo階段學習。遂本次開發也不會採用。（目前本身也是學習 中）

3. React Native

以前公司前端團隊（也就在1-3人浮動）一直由我主導使用的是React技術棧，可是大多都是應用在中後臺管理系統，H5端使用的是Vue技術棧。RN只有以前我只是簡單的寫過demo，也沒有過實戰經驗。RN雖然支持跨端，可是在各平臺的表現形式上仍是有必定差別,RN中與原生的交互須要太多的原平生臺知識的支撐。考慮成本以及可行性遂放棄。（目前本身在研究RN 中）

4. Hybrid

Hybrid技術也就是混合開發，將咱們的H5頁面嵌到Native App的Webview中。經過JSBridge來做爲H5與Native之間的橋樑，H5能夠傳遞數據以及調用Natvie的方法，反之Native亦可與H5通訊。這樣咱們經過一套h5頁面就是能夠同時覆蓋到安卓與ios兩端。（目前市面上有較多成熟的Hybird框架：AppCan、cordova等）時間成本最低可是性能最差的方案（與客戶溝通後，客戶贊成使用此技術方案）。

2、Hybrid技術原生與H5交互的實現方式有哪些？（JsBridage 原理）

1. 攔截 URL SCHEME

1. URL SCHEME 是一種相似於url的連接，是爲了方便app直接互相調用設計的，形式和普通的 url 近似，主要區別是 protocol 和 host 通常是自定義的。例如: jsbridge://methodName?param1=value1&param2=value2；
2. 主要流程是：Web 端經過某種方式（例如 iframe.src）發送 URL Scheme 請求，以後 Native 攔截到請求並根據 URL SCHEME（包括所帶的參數）進行相關操做。
3. 缺點：使用 iframe.src 發送 URL SCHEME 會有 url 長度的隱患。
4. 注意點：爲何選擇 iframe.src 不選擇 locaiton.href ？由於若是經過 location.href 連續調用 Native，很容易丟失一些調用。

2. 注入api/對象

原理：經過WebView提供的接口向js的context（window）注入一個對象或者方法，js調用時，直接執行對應的Native代碼邏輯。

3. 改寫瀏覽器原有對象

1. 原理：使用prompt,console.log,alert方式，在android webview這一層能夠重寫這些方法。通常常使用prompt，由於這個在js裏使用的很少，用來和native通信反作用比較少。
2. 舉例：Web頁面經過調用prompt()方法，安卓客戶端經過監聽onJsPrompt事件，攔截傳入的參數，若是參數符合必定協議規範，那麼就解析參數，扔給後續的Java去處理。這種協議規範，最好是跟iOS的協議規範同樣，這樣跨端調起協議是一致的，但具體實現不同而已。好比：hybrid://action?arg1=1這樣的協議，而其餘格式的prompt參數，是不會監聽的，即除了hybrid://action?arg1=1這樣的規範協議，prompt仍是原來的prompt。

3、我在項目中是如何進行原生與H5交互的

1. h5調用app裏的方法（暴露一個java對象給js，使得js能夠直接調用方法）

// android端代碼
// 將Android裏面定義的類對象AndroidJs暴露給javascript
webView.addJavascriptInterface(new AppJs(mContext), "AppJs");

// h5端代碼
closeKeyboard() {
    AppJs.closeKeyboard();
 },
複製代碼

2. app調用h5中的方法（攔截到指定的url調用js掛在window對象上的方法）

// h5端代碼
mounted() {
    window["getAppResult"] = result => {
      if (result) {
        router.push({
          path: "/account/open/next",
          query: { bankAccountName: this.name, certNo: this.certNo }
        });
      } else {
        Toast.succeed("活體檢測失敗");
      }
    };
  }
  
 // android端代碼
  webView.evaluateJavascript("javascript:getAppResult(true)",
    new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
    
        }
    });
複製代碼

4、 Hybrid的缺點

1. 基於Webview,WebView 的渲染性能比Native差不少;
2. JavaScript 是解釋執行語言，運行效率也比 Native 差;

5、若是採用Hybrid技術，如何優化咱們的項目

1. 使用離線包來解決網頁加載速度慢的問題；（好文推薦:轉轉hybrid app web靜態資源離線系統實踐）
2. H5代碼自身優化Dom渲染等提高網頁渲染效率；

參考文獻

• Hybrid 開發：JsBridge - Web和客戶端的橋
• 移動混合開發中的 JSBridge