After seven or eight years of mobile technology, developers have always dreamed of cross-platform. From the very beginning, Web App was criticized for poor experience, ReactNative, Weex and other technologies had many problems that could not be remedied, and the current Flutter also had many problems to be solved. The dream of cross-platform was beautiful, but the reality always had some flaws. With the development of mobile development today, I think the best cross-platform technology is H5 + Native hybrid development mode. With the rapid development of front-end technology, you can now rely on a variety of technologies and tools to optimize the front-end and make it more native to the mobile experience.

When we do Hybrid apps, we can’t get around the interaction between JavaScript and Native (iOS & Android). At present, the mainstream interaction framework includes WebViewJavascriptBridge, which may be the earliest bridge library between iOS and JavaScript. The advantage of this library is that the interface is simple and easy to use, and there is no need to introduce additional js files into HTML. The disadvantage is that it only supports iOS. The same project also needs to find a corresponding bridge library for Android. Another problem is that there is no management of interactive interfaces. In most cases, we write the interfaces into a Controller, resulting in code accumulation and difficult interface maintenance. In recent years, another good bridge library is dsbridge-ios. Compared with WebViewJavascriptBridge, the advantage of this library is that it supports IOS and Android. The interface can be managed in the way of class, but it needs to introduce a js file into HTML. The new version 3.0 only supports WKWebView, which is implemented by inheriting WKWebView, so it needs to use the modified DWKWebView. I don’t like this kind of intrusion into WebView.

I built another wheel on the basis of its two libraries, which is WebViewJsbridge-ios. It first supports both iOS and Android. The interface is basically the same as WebViewJavascriptBridge, and it also supports the management of interactive interfaces in the way of classes. It is also necessary to introduce a JS file (which is not referenced in 1.1.0) that supports both UIWebView and WKWebView, without the intrusion of inheriting WebView.

Here is the webViewJsbridge-ios usage document for your reference:

WebViewJsBridge-iOS

Webviewjsbridge-ios is a library for communicating between HTML5 and UIWebView & WKWebView.

WebViewJsBridge-Android:github.com/al-liu/WebV…

It features cross-platform, support iOS, Android, JavaScript, unified interface, easy to use. The implementation of the library is non-intrusive to the WebView. An interface is used to manage communication as a class. The implementation class of each interface corresponds to a unique namespace, such as UI. Alert. UI corresponds to the namespace of an implementation class, alert is an implementation method of the implementation class. In version 1.1.0, H5 could do without introducing the hcjsbridge.js file.

The following chart helps to understand the relationship:

System Version Requirements

If you use UIWebView, iOS7 or later is supported. If WKWebView is used, iOS8 and later versions are supported.

The installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For details about how to use CocoaPods and how to install CocoaPods, see CocoaPods official website. To integrate WebViewJsbridge-ios into your project using CocoaPods, add the following content to your Podfile:

Platform :ios, '8.0' Target 'TargetName' do pod 'HCWebViewJsBridge', '~> 1.1.0' endCopy the code

Then, run the following command:

$ pod install
Copy the code

Manual installation

Download the HCWebViewJsBridge source code and add it to your own project to use.

Import js files for HCWebViewJsBridge

Hcjsbridge.js is introduced in the HTML file

Note: Version 1.1.0 H5 does not include the hcjsbridge.js file, but the usage is slightly different, as described below.

Example shows that

The /Example/iOS Example folder provides complete usage examples, including basic call demonstrations and advanced uses, such as calling the camera to take an image using UIImagePickerController and making a GET request using NSURLSession.

Method of use

Initialize the native WebViewJsBridge environment

UIWebView

If H5 imports hcjsbridge.js, the following initialization method is used.

_bridge = [HCWebViewJsBridge bridgeWithWebView:self.webView];
Copy the code

If H5 does not introduce hcjsbridge.js, the following initialization method is used.

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

WKWebView

If H5 imports hcjsbridge.js, the following initialization method is used.

_bridge = [HCWKWebViewJsBridge bridgeWithWebView:self.wkWebView];
Copy the code

If H5 does not introduce hcjsbridge.js, the following initialization method is used.

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

Native registration interface implementation classes are called by HTML5

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

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

UIJsApi implementation class:

- (void)alert:(NSDictionary *)data callback:(HCJBResponseCallback)callback {callback(@"native API alert 'callback."); } // The interface implementation class supports four method signatures: // 1. NSLog(@"Js call native API test1, callback (HCJBResponseCallback)callback {NSLog(@"Js call native API test1, callback (HCJBResponseCallback) data is:%@", data); Callback (@"native API test1 'callback. "); - (void)test2:(NSDictionary *)data {NSLog(@"Js native API :test2, data is:%@", data); - (void)test3 {NSLog(@"Js native API :test3"); Callback {NSLog(@"Js native API :test4"); Callback (@"native API test4'callback. "); }Copy the code

Call the HTML5 interface natively

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

Initialize the HTML5 WebViewJsBridge environment

If H5 imports hcjsbridge.js, use the following method.

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

If H5 does not import hcjsbridge.js, register the interface using the following method.

// In the window._hCJsBridgeinitFinished global function, wait for the bridge initialization to complete, and then register the interface for the initial call.
window._hcJsBridgeInitFinished = function(bridge) {
    bridge.registerHandler("test1".function(data, callback) {
        callback('callback native,handlename is test1');
    })
    
    bridge.callHandler('ui.test3');
}
Copy the code

HTML5 registration interface for native invocation

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

HTML5 calls the native interface

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

Enabling debug Logs

Enable debug logs to print call information for troubleshooting. Debug logs are disabled by default. In release mode, debug logs but error logs are not masked.

[_bridge enableDebugLogging:YES];
Copy the code

License

Webviewjsbridge-ios Is released using the MIT license. View the license details.