Hybrid App從概念到實戰

Hybrid App從概念到實戰
目錄

JSBridge是個啥
H5 和 Native 的雙向通信通用方法
H5調用Native方法
Native調用H5方法
通信原理總結
H5 和 Native 通信實戰
總結

最近一直在準備找工作，看了很多公司的招聘介紹，有相當一部分直接寫：熟悉 Hybrid App 開發加分！正好，我司開發的就有這種 Hybrid App——使用WebViewJavascriptBridge通信，前端封裝一些常用方法調用。

現在的 app 開發，已經不在是以前一樣所以頁面都是有原生開發，基於應用的更新上線繁瑣，由於 H5 的易更新，易維護性，現在很多應用都採用同 H5 頁面混合開發模式，例如：淘寶、QQ、京東等等。下面就來看看 Native 和 H5 如何實現通信：

回到頂部
JSBridge是個啥
直接來重點，記住：JSBridge 是一個很簡單的東西，更多的是一種形式、一種思想，爲了解決 H5 和 Native 的雙向通信。

就像我們剛接觸 ajax 時，也很懵逼。其實，他們倆個差不多，ajax 是瀏覽器和服務器通信的規範（暫且叫規範，像CMD規範一樣，SeaJS是它的一種實現方式）， JSBridge 是 H5 和 Native 通信的規範。axios 是 ajax 通信的一種實現方式，WebViewJavascriptBridge（下文要說）是JSBridge的一種實現方式。明白了這些，下面就很好理解了。

回到頂部
H5 和 Native 的雙向通信通用方法
H5通信方式和兼容性如下表所示。指的是藉助 Native 的 webview 加載H5頁面，H5 和 Native 之間通過注入API、URL攔截、全局調用等形式，實現消息通信。站在大廠的角度考慮，在實戰的時候，會選擇更兼容的方式。

H5調用Native方法
平臺方法備註
Android shouldOverrideUrlLoading scheme攔截方法
Android addJavascriptInterface API
Android onJsAlert()、onJsConfirm()、onJsPrompt（）
IOS 攔截URL
IOS JavaScriptCore API方法，IOS7+ 支持
IOS window.webkit.messageHandlers APi方法，IOS8+支持
1.注入 API 方式的主要原理：通過 WebView 提供的接口，向 JavaScript 的 Context（window）中注入對象或者方法，讓 JavaScript 調用時，直接執行相應的 Native 代碼邏輯，達到 JavaScript 調用 Native 的目的。

說白了就是，Native 往 window 對象掛對象或方法，讓 H5 可以調 Native 的方法。具體掛的對象或方法是 Native 定義的，比如人家掛了個getName(arg)，H5 調用就是window.getName(arg)，當然調用時可以向 Native 傳數據。

2.攔截 url scheme原理：先解釋一下 url scheme： url scheme 是一種類似於 url 的鏈接，是爲了方便app直接互相調用設計的，形式和普通的 url 近似，主要區別是 protocol 和 host 一般是自定義的，例如: httpsss://bridge_loaded/url?url=http://ymfe.tech，protocol 是 httpsss，host 則是 bridge_loaded。

攔截 url scheme 的主要流程是：Web 端通過某種方式（例如 iframe.src）發送 url scheme 請求，之後 Native 攔截到請求並根據 url scheme（包括所帶的參數）進行相關操作。

Native調用H5方法
平臺方法備註
Android loadurl()
Android evaluateJavascript() Android 4.4 +
IOS(UIwebview) stringByEvaluatingJavaScriptFromString
IOS(UIwebview) JavaScriptCore IOS7+ 支持
IOS(Wkwebview) evaluateJavaScript:javaScriptString IOS8+支持
相比於 JavaScript 調用 Native， Native 調用 JavaScript 較爲簡單，畢竟不管是 iOS 的 UIWebView 還是 WKWebView，還是 Android 的 WebView 組件，都以子組件的形式存在於 View/Activity 中，直接調用相應的 API 即可。

Native 調用 JavaScript，其實就是執行拼接 JavaScript 字符串，從外部調用 JavaScript 中的方法，因此 JavaScript 的方法必須在全局的 window 上。（閉包裏的方法，JavaScript 自己都調用不了，更不用想讓 Native 去調用了）

通信原理總結
通信原理是 JSBridge 實現的核心，實現方式可以各種各樣，但是萬變不離其宗。這裏，推薦的實現方式如下：

JavaScript 調用 Native 推薦使用注入 API 的方式（iOS6 忽略，Android 4.2以下使用 WebViewClient 的 onJsPrompt 方式）。
Native 調用 JavaScript 則直接執行拼接好的 JavaScript 代碼即可。

說實話，作爲一個前端開發，剛開始看了上面這些方法啥的，我是一臉懵*。畢竟是嵌套在人家 Native 裏面，規則都是他們實現的，我們H5只能遵循這個規則去玩。但一定要理清他們約定的這套規則是如何通信的，才能保證我們的愉快的交流。

通信的原理大概介紹完了，下面介紹實戰中如何使用，幫我們更好的理解概念。補充一句，通信的實現方式有很多種，下面只是我司的實現方式：（沒有 Native 代碼，純web前端角度）

回到頂部
H5 和 Native 通信實戰
因爲很多地方需要用同樣的方法，比如：關閉H5頁面並吐司、上傳圖片、預覽圖片、右上角的“增加”（╋）按鈕、...所以，我們把和原生通信的方法寫在一個js 文件裏，直接 export 導出，方便代碼的複用。

// mob.js
// 判斷是什麼平臺(設備)
var browser = {
versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;
return {
    trident: u.indexOf('Trident') > -1, // IE
    presto: u.indexOf('Presto') > -1, // opera
    webKit: u.indexOf('AppleWebKit') > -1, // webkit
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // firefox
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // mobile
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // iOS
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android or uc
    iPhone: u.indexOf('iPhone') > -1 , // iPhone QQHD
    iPad: u.indexOf('iPad') > -1, // iPad
    webApp: u.indexOf('Safari') == -1,
    teacherApp: u.indexOf('XRJ-Admin') > -1 // 教師端 原生在userAgent放不同的字符串代表不同app
    guardianApp: u.indexOf('XRJ-Edu') > -1 // 家長端
};

}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

// 判斷是否是移動設備打開。browser代碼在下面
if(browser.versions.mobile) {

    var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
            //在微信中打開
    }
    if (ua.match(/WeiBo/i) == "weibo") {
            //在新浪微博客戶端打開
    }
    if (ua.match(/QQ/i) == "qq") {
            //在QQ空間打開
    }
    if (browser.versions.ios) {
            //是否在IOS瀏覽器打開
    }
    if(browser.versions.android){
          //是否在安卓瀏覽器打開
    }

} else {
//是PC瀏覽器打開
}

/**

我司通信實現方案：
iOS端注入 WebViewJavascriptBridge 對象或者攔截 url scheme，下面的setupWebViewJavascriptBridge是固定寫法
這是我司iOS的做法，也是iOS的通用做法。
*
Android當然也可以這麼做，如果他們這樣實現，後面H5封裝的函數只用寫一套就可以適配2端了。
我司Android不是這麼做的，是通過注入對象或方法實現的，所以下面要針對2端寫不同代碼。
*/

function setupWebViewJavascriptBridge(callback) {

if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)

}

// 關閉頁面並吐絲
// 調用：pageClose(1, '操作成功)
function pageClose(code, msg = ''){

setupWebViewJavascriptBridge(function(bridge) {
    bridge.callHandler('iOS_RESPONSE_CALL_BACK', {"code":code,"msg":msg}, function responseCallback(responseData) {
  // 關閉頁面完畢的回調函數，類似 ajax() 的 success: function(result) {}
  // responseData：回調函數返回的數據，類似 success 裏面的 result
});
});
if(browser.versions.android){
    if(code == 1){
        todo.closeWindow(0);
    }else if(code == 401){
        todo.refreshWebView;
        return false;
    };
    if(msg) todo.showToast(msg);
}

}

// 圖片上傳
// 調用：load()
function load(){

setupWebViewJavascriptBridge(function(bridge) {
  bridge.callHandler('iOS_UPLOAD_PHOTO', [], function responseCallback(responseData) {
              // 上傳完畢回調函數
      imgload(responseData,true);  // H5 頁面中定義的全局方法 window.imgload = function(data,flag) {}
  })
});
if(browser.versions.android){
    picture.showPictureDialog(); // webView.loadUrl("javascript:imgload");
}

}

// 圖片瀏覽 - data數據格式和原生商量好
// 調用：var imgData = {"position":position,"list":[imgsrc0,imgsrc1,imgsrc2]}; imgSee(imgData);
function imgSee(data){

setupWebViewJavascriptBridge(function(bridge) {
  bridge.callHandler('iOS_PHOTO_BROWSER',data); // 調用 iOS 的 'iOS_PHOTO_BROWSER' 方法，同時傳數據data
});
if(browser.versions.android){
    data = JSON.stringify(data);
    todo.startGallery(data); // 調用 Android 的 startGallery 方法，同時傳數據data
}

}

// 單個頭部菜單，右上角的“新增”按鈕。因爲是原生組件，我們操作不到，所以需要初始化頁面時往這個按鈕上綁定js方法，以便我們之後操作。
// 調用： topMenu('╋',0) || topMenu('新增',0)
function topMenu(title, index){

setupWebViewJavascriptBridge(function(bridge) {
  // js註冊方法 'JS_MENU_ACTION' 給 iOS 調用 - 方法名 H5 決定
    bridge.registerHandler('JS_MENU_ACTION', function(data, responseCallback) {
          topMenuHandle(data,true); // H5 頁面中定義的全局方法 window.topMenuHandle = function(data,flag) {}
          responseCallback(data); // 做完後，告訴 iOS 一聲
    })

        // 調 iOS 的 'iOS_MENU_JSON' 並傳參
    bridge.callHandler('iOS_MENU_JSON', [{"action":index,"title":title}]);  // - 方法名 iOS 決定
});
if(browser.versions.android){
// topMenuHandle是往“新增”按鈕綁定的js方法，
// index是觸發這個函數時回傳給js的數據，用來判定點擊個哪個按鈕，title是這個按鈕的名字
// H5 把一切安排的明明白白的
    var jsonStr = '[{"action":"javascript:topMenuHandle('+index+')","title":'+title+'}]'
    menu.inflateMenu(jsonStr);  // jsonStr必須是字符串
}

}

// 多個頭部菜單
// 調用：var titleData = [{'title':"添加行爲",'src':base.config.imgHost+"/cs/img/icon_bullet_behavior_add.png"},{'title':"審覈行爲",'src':base.config.imgHost+"/cs/img/icon_bullet_behavior_review.png"}]
// topMenus(titleData)
function topMenus(data){

var dataList = [];
$.each(data,function(index,item){
    dataList.push('{"title":"'+item.title+'","src":"'+item.src+'"'+(browser.versions.android?',"action":"javascript:topMenusHandle('+index+')"':'')+'}');
})
setupWebViewJavascriptBridge(function(bridge) {
    bridge.registerHandler('JS_MORE_MENU_ACTION', function(responseData) {
        topMenusHandle(responseData,true);
    })
    bridge.callHandler('iOS_MORE_MENU', dataList)
});
if(browser.versions.android){
    menu.inflateCustomMenu('['+dataList+']');
}

}

// 導出
export {
browser,
load,
imgSee,
topMenu,
topMenus,
pageClose,
}
回到頂部
總結
Hybrid是一種連接 H5 跟 Native 的思路，即可以快速迭代H5功能，又可以有NA的體驗，是混合開發的典型開發模式。實踐過程中需要根據業務形態模型來定製代碼實現，注入時機也不是一成不變的可以根據業務形態來選擇。
原文地址https://www.cnblogs.com/chenwenhao/p/11218525.html

Hybrid App從概念到實戰

一鍵自動化博客發佈工具,用過的人都說好(頭條篇)

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

01 穩定性（一）如何應對事故並做好覆盤？

線程池那些坑爹的參數-核心線程數&最大線程數&工作隊列

Stream流常用方法總結

xlua中lua對象到c#對象的轉型

Java 異常（一）異常概述及其架構

C#網絡編程入門之TCP

Signal 協議的 java接口庫

C#多線程(15)：任務基礎③

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結