HCWebViewJsBridge 1.2.0

HCWebViewJsBridge 1.2.0

×

由刘海川维护。

HCWebViewJsBridge 1.2.0

  • 由
  • 刘海川

WebViewJsBridge-iOS

WebViewJsBridge-iOS 是一个用于 HTML5 和 UIWebView & WKWebView 通信的工具库。

WebViewJsBridge-Android：https://github.com/al-liu/WebViewJsBridge-Android

中文文档 中文文档

它是跨平台的，支持 iOS、Android、JavaScript，使用简单。它对 WebView 无侵入性。支持使用类来管理 API，每个实现类对应一个唯一的命名空间，例如 ui.alert，ui 是命名空间，alert 是实现方法。在 1.1.0 版本中，H5 可能不会引入 hcJsBridge.js 文件。

参考以下图表

WebViewJsBridge-namespace.png

需求

如果使用UIWebView，则支持iOS7及以上版本。如果使用WKWebView，则支持iOS8及以上版本。

安装

CocoaPods

CocoaPods是一款用于Cocoa项目的依赖管理器。有关使用和安装说明，请访问他们的网站。要将WebViewJsBridge-iOS集成到您的Xcode项目中使用CocoaPods，请在Podfile中指定它

platform :ios, '8.0'

target 'TargetName' do
  pod 'HCWebViewJsBridge', '~> 1.0.1'
end

然后，执行以下命令

$ pod install

手动

下载HCWebViewJsBridge的源代码并将其添加到您的项目中以使用它。

在HTML5中安装HCWebViewJsBridge

在html中插入 ``。

注意：在版本1.1.0中，H5可能不会引入hcJsBridge.js文件，但使用上可能存在一些差异。

示例

完整的示例放在/示例/iOS示例文件夹中，包括基本演示和高级用法，比如使用UIImagePickerController调用相机拍照，以及使用NSURLSession进行GET请求。

使用

在本地初始化 WebViewJsBridge

UIWebView

如果H5引入了hcJsBridge.js，则使用以下初始化方法。

_bridge = [HCWebViewJsBridge bridgeWithWebView:self.webView];

如果H5没有引入hcJsBridge.js，则使用以下初始化方法。

_bridge = [HCWebViewJsBridge bridgeWithWebView:self.webView injectJS:YES];

WKWebView

如果H5引入了hcJsBridge.js，则使用以下初始化方法。

_bridge = [HCWKWebViewJsBridge bridgeWithWebView:self.wkWebView];

如果H5没有引入hcJsBridge.js，则使用以下初始化方法。

_bridge = [HCWKWebViewJsBridge bridgeWithWebView:self.wkWebView injectJS:YES];

在本地注册实现类

UIJsApi *uiApi = [UIJsApi new];
[_bridge addJsBridgeApiObject:uiApi namespace:@"ui"];

RequestJsApi *requestJsApi = [RequestJsApi new];
[_bridge addJsBridgeApiObject:requestJsApi namespace:@"request"];

UIJsApi 实现类

- (void)alert:(NSDictionary *)data callback:(HCJBResponseCallback)callback {
    callback(@"native api alert’callback.");
}
// The implementation class supports four method signatures：
// 1. With parameters, with callbacks
- (void)test1:(NSString *)data callback:(HCJBResponseCallback)callback {
    NSLog(@"Js call native api test1, data is:%@", data);
    callback(@"native api test1’callback.");
}
// 2. With parameters, no callbacks
- (void)test2:(NSDictionary *)data {
    NSLog(@"Js native api:test2, data is:%@", data);
}
// 3. No parameters, no callbacks
- (void)test3 {
    NSLog(@"Js native api:test3");
}
// 4. No parameters, with callbacks
- (void)test4:(HCJBResponseCallback)callback {
    NSLog(@"Js native api:test4");
    callback(@"native api test4'callback.");
}

用户在本地调用HTML5 API

[_bridge callHandler:@"testCallJs" data:@{@"foo": @"bar"} responseCallback:^(id  _Nonnull responseData) {
    NSLog(@"testCallJs callback data is:%@", responseData);
}];

在HTML5中初始化WebViewJsBridge

如果H5引入了hcJsBridge.js，引入方式如下。

<!DOCTYPE html>
<html>
    <head>
        ...
        <script src="./hcJsBridge.js"> </script>
    </head>
    ...
</html>

如果H5未引入hcJsBridge.js，使用以下方法注册api。

// Wait for the bridge initialization to complete in this window._hcJsBridgeInitFinished global function, then register the api, initial call.
window._hcJsBridgeInitFinished = function(bridge) {
    bridge.registerHandler("test1", function(data, callback) {
        callback('callback native,handlename is test1');
    })
    
    bridge.callHandler('ui.test3');
}

HTML5中注册本地调用的API

hcJsBridge.registerHandler("testCallJs", function(data, callback) {
    log('Native call js ,handlename is testCallJs, data is:', data);
    callback('callback native, handlename is testCallJs');
})

在HTML5中调用本地API

var data = {foo: "bar"};
hcJsBridge.callHandler('ui.alert', data, function (responseData) {
    log('Js receives the response data returned by native, response data is', responseData);
})

开启调试日志

开启调试日志并打印一些调用信息，以帮助调试问题。调试日志默认不启用。在发布模式下，调试日志将被阻止，但错误日志不会被隐藏。

[_bridge enableDebugLogging:YES];

许可证

WebViewJsBridge-iOS采用MIT许可证发布。详情请见LICENSE。