iOS Native和H5互動神器Swift版

引言

很多App因業務需求，采用了混合開發模式(Hybrid)，即在App中嵌入H5界面。

為什麼要采用Hybrid模式，因為App修改代碼後，需要重新發版，市場稽核後，才能上架市場。周期長，使用者體驗很差。比如：需要在App裡面搞個産品活動…

采用Hybrid模式便于今後産品業務的擴充與維護。這個時候，就會引出一個重要的問題，App與H5是如何通信的。

1 App如何發消息給H5，H5把處理的結果響應給App？

2 H5又如何發消息給App，App把處理的結果又如何響應給H5？

3 iOS有UIWebView和WKWebView兩個容器，WKWebView也有自己的一套與H5的互動方案，如何同時相容UIWebView和WKWebView?

4 Android系統提供了一套與H5互動的方案，iOS也有一套方案，如何同時相容Android和iOS？

5 在App與H5互動之前，是否需要确認一下通信安全?

直接上效果圖，一目了然

背景

swift項目中快速實作Native和H5的互動，Android也可以實作此方案，H5小夥伴使用起來也友善靈活，簡單調用同時相容iOS和Android。

功能

• App和H5雙向通信
• 支援UIWebView和WKWebView
• 支援多個Scheme并存
• 開啟和關閉調試日志

使用

導入頭檔案

具體用法

iOS端

開啟調試日志資訊

注入EasyJSBridge

self.easyJSBridge = EasyJSBridge.bridgeForWKWebView(webView: self.wkWebView) //WKWebView中注入EasyJSBridge
self.easyJSBridge = EasyJSBridge.bridgeForUIWebView(webView: self.uiWebView) //UIWebView中注入EasyJSBridge
           

注冊方法供H5調用

//handlerName:方法名
//handler:- data:H5傳遞過來的資料 responseCallback:把處理好的資料傳回給H5
self.easyJSBridge.registerHandler(handlerName: "xxxx", handler: { (data, responseCallback) in
    print("Hello App:\(data ?? "")")
    responseCallback("xxxx")
})
           

調用H5注冊好的一個名為xxxx的方法

調用H5注冊好的一個名為xxxx的方法，帶參數

調用H5注冊好的一個名為xxxx的方法，帶參數，帶H5響應回調

self.easyJSBridge.callHandler(handlerName: "xxxx", data: "xxxx", responseCallback: { (response) in
    print("收到H5的響應資料:\(response ?? "")")
})
           

H5端

在Window對象上注入EasyJSBridge，注入成功後會進入回調方法

function setupWebViewJavascriptBridge(callback) {
    if(window.EasyJSBridge) {
        return callback(EasyJSBridge);
    }
    if(window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'easy-jsbridge://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
}
           

注冊一個名為xxxx的方法供App調用

//handlerName:方法名
//handler:- data:App傳遞過來的資料 responseCallback:把處理好的資料傳回給App
bridge.registerHandler('xxxx', function(data, responseCallback) {
    alert('收到App資料:'+data);
    responseCallback("xxxx");
})
           

調用App注冊好的一個名為xxxx的方法

調用App注冊好的一個名為xxxx的方法，帶參數

調用App注冊好的一個名為xxxx的方法，帶參數，帶App響應回調

bridge.callHandler('xxxx', "xxxx", function(data) {
    alert('收到App的響應資料:'+data)
})
           

最後

ps:可根據公司産品需求，在App和H5通信之前，加入通信安全認證機制。

在使用過程中如果有任何問題和建議都可以随時聯系我

我的郵箱 [email protected]

源碼位址 EasyJSBridge

願大家都可以開開心心的寫代碼！