Hybrid開發

1. 爲何選擇Hybrid開發方式

• Hybrid開發效率高、跨平臺(M /58APP/英才APP)
• 維護成本低,功能可複用
• 針對新手友好,學習成本較低
• 功能更加完善,性能和體驗要比起web app好太多
• 部分性能要求的頁面可用原生實現
• Hybrid從業務開發上講，沒有版本問題，有BUG能及時修復

• 缺點

  • 相比原生,性能仍然有較大損耗
  • 不適用於交互性較強的app

2. Hybird 提早掌握那些問題

• Hybrid中Native與前端各自的工做是什麼
• Hybrid的交互接口如何設計
• 資源緩存策略，白屏問題

2-1 Hybrid中Native與前端各自的工做是什麼

• Native與前端的界限，首先Native提供的是一宿主環境，要合理的利用Native提供的能力，要實現通用的Hybrid平臺架構
• nativeUI組件、消息類組件
• 通信錄、系統、設備信息讀取接口
• 與Native的互相跳轉，好比H5如何跳到一個Native頁面，H5如何新開Webview作動畫跳到另外一個H5頁面
• 帳號信息管理 Native須要設計良好安全的身份驗證機制

• 資源訪問機制

  • Native首先須要考慮如何訪問H5資源，作到既能以file的方式訪問Native內部資源，又能使用url的方式訪問線上資源
• 前端要作的事情就是封裝調用Native提供的各類能力-Hybrid開發調試

2-2.webview 生命週期函數

// 網頁開始加載的時候調用
- (void )webViewDidStartLoad:(UIWebView  *)webView{
}

// 網頁加載完成的時候調用
- (void )webViewDidFinishLoad:(UIWebView  *)webView{
}

// 網頁加載錯誤的時候調用
- (void)webView:(UIWebView *)webView  didFailLoadWithError:(NSError *)error{
}

2-3 Hybrid交互設計-JSBridge

• 1.Native調用前端頁面的JS方法
• 2.前端頁面經過JS調用Native提供的接口
• 二者之間的橋樑是Webview。app自身能夠自定義url schema，而且把自定義的url註冊在調度中心

1.JS to native

1. 在每一個版本會提供一些API，前端會有一個對應的框架團隊對其進行封裝，釋放業務接口
   

   /**login*/
    CHRJSBridge.call("pagetansNative", {
    action: "pagetansNative", //type類型是跳轉native的
    params: {
      controllername: "to_login" //跳轉native的對應頁
    },
    isbacktomain: 0, //跳轉後是否關閉當前，默認false
    callbackFun:(params)=>{this.id=params.id}// 回調函數
    });

   handleConfirm(params) {
     let jsonStr = JSON.stringify(params);
     if (this.isIOS()) {
       window.webkit.messageHandlers.testMethod.postMessage(jsonStr)
     } else {
       javascript: chrclient.onJsActionRequest(jsonStr)
     }
   }

   ## native to js

   window.nativeMethod = function(methodrParams) {
    console.log("nativeMethod");
    let actionName = JSON.parse(methodrParams).action;
    let actionParams = JSON.parse(methodrParams).params;
    //console.log("methodrParams=====", actionName, actionParams);
    window[actionName](actionParams);
   }

## 2. 封裝的CHRJSBridge／JavaScriptCore
主體內容:

• 小的DEMO

## 3. 這樣作有一個前提是，Native自己已經十分穩定了.測試包

- 1.設置裏面清除緩存。
    
   - 2.查看安裝包版本信息
    
   - 3..查看cookie信息
   - 4.提供掃描二維碼打開網頁。供前期沒有開通入口，FE自測


## 4. H5-native

• url scheme Native能捕捉webview發出的一切請求

  • chrmain://nativejump/main/web?params=
  • Native是有能力爲前端注入全部須要的方法了

var messagingIframe = document.createElement('iframe');

messagingIframe.style.display = 'none'
document.documentElement.appendChild(messagingIframe);

messagingIframe.src = url

注意,正常來講是能夠經過window.location.href達到發起網絡請求的效果的，可是有一個很嚴重的問題，就是若是咱們連續屢次修改window.location.href的值，在Native層只能接收到最後一次請求，前面的請求都會被忽略掉。因此JS端發起網絡請求的時候，須要使用iframe，這樣就能夠避免這個問題

5.參考資料

• 1.什麼是Hybrid App
• 2.Native、Hybrid、React Native、Web App方案
• 3.Hybrid APP之Native和H5頁面交互原理
• 4.JSBridge的原理
• 5.JSBridge實現示例
• 6.WebView三部曲：基本用法