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

愿大家都可以开开心心的写代码！