The implementation of Hybird data driver and Script driver in IOS, ioshybird

The implementation of Hybird data driver and Script driver in IOS, ioshybird

Now, there are many articles on the Internet about Hybird. I have recently studied and shared them with you.

What is Hybird technology?

1. It generally refers to a technical solution that combines WebView and Native technologies.

2. It can also be understood as a hybrid development of non-Native and Native technologies.

Currently, Hybird has several implementation methods:

1. UIWebView and WKWebView use webpage-OC interaction directly (cordova and phonegap use this solution) (this article does not explain this solution)

2. Data-driven and script-driven (RN and applets use this principle)

We all know the advantages and disadvantages of the hybird technology implemented using webView.

The advantage is that it can be hot-updated, and can be developed by direct WEB Front-end personnel. It is good at complex content formatting.

The disadvantage is that the experience is smooth without native applications.

This article focuses on data-driven and script-driven. The advantage is that it can be hot updated and experience is better, because it generates native applications, which is totally different from WebView.

What is data-driven?

The data driver means that our App dynamically creates the corresponding UI by downloading the server-side json file (which defines our UI layout style and simple business functions.

What is a script driver?

The Script driver refers to implementing interaction between JS and OC through JavaScriptCore in OC. Some simple functions can be processed in JS.

Effect demonstration

Default effect:

 

Click Test 1:

 

Click Test 2:

 

 

The preceding UI layout and functions are dynamically written in json and js files.

Code demonstration

For the convenience of demonstration, I have not set up a WEB server here, so the json file is directly placed in the APP. We first create the page. json and page. js files.

They are as follows:

We can see that the data in this json file defines some UI-related attributes. Pay attention to the onClicked in the button, which corresponds to the js method in page. js below.

 

The updateLabelText method is defined in the App. Let's take a look at the App.

/// ViewController. m // hybirdDemo /// Created by xgao on 17/3/3. // Copyright©Xgao. all rights reserved. // # import "ViewController. h "// @ import JavaScriptCore; # import <JavaScriptCore/JavaScriptCore. h> // data-driven and script-driven @ interface ViewController () // the context for executing JS @ property (nonatomic, strong) JSContext * jsContext; // Method Name of the Click Event of the Save button @ property (nonatomic, retain) NSMutableDictionary * functionDic; @ end @ implementation ViewController-(void) viewDidLoad {[super viewDidLoad]; [self initDataUI]; [Self initJSContext];}-(NSMutableDictionary *) functionDic {if (! _ FunctionDic) {_ functionDic = [NSMutableDictionary dictionary];} return _ functionDic;}-(void) initDataUI {// load JSON data NSString * pageJsonPath = [[NSBundle mainBundle] pathForResource: @ "page" ofType: @ "json"]; NSData * pageJsonData = [NSData usage: pageJsonPath]; NSDictionary * pageJsonDic = [NSJSONSerialization JSONObjectWithData: pageJsonData options: callback error: nil]; NSArray <NSDictionary *> * views = pageJsonDic [@ "views"]; for (NSDictionary * view in views) {// parse the UI if ([view [@ "class"] isEqualToString: @ "label"]) {// UILabel * label = [[UILabel alloc] initWithFrame: [self CGRectWithDic: view]; label. text = view [@ "text"]; label. tag = [view [@ "tag"] intValue]; [self. view addSubview: label];} else if ([view [@ "class"] isw.tostring: @ "button"]) {// UIButton * button = [[UIButton alloc] initWithFrame: [self CGRectWithDic: view]; [button setTitle: view [@ "title"] forState: UIControlStateNormal]; button. tag = [view [@ "tag"] intValue]; [button setTitleColor: [UIColor greenColor] forState: UIControlStateNormal]; [button addTarget: self action: @ selector (buttonClick :) forControlEvents: UIControlEventTouchUpInside]; // Add it to the event dictionary, btnClick [self. functionDic setObject: button forKey: view [@ "onClicked"]; [self. view addSubview: button] ;}}// initialize JSContext-(void) initJSContext {self. jsContext = [[JSContext alloc] init]; // load page. js script file NSString * pageJsPath = [[NSBundle mainBundle] pathForResource: @ "page" ofType: @ "js"]; NSString * pageJs = [NSString handle: pageJsPath encoding: NSUTF8StringEncoding error: nil]; // execute the JS script to inject the JS Code into the context [self. jsContext evaluateScript: pageJs]; // defines the updateLabelText Method for JS to call OC _ weak ViewController * weakSelf = self; self. jsContext [@ "updateLabelText"] = ^ (NSString * text, NSInteger tag) {UILabel * label = [weakSelf. view viewWithTag: tag]; label. text = text ;};}// button click universal event-(void) buttonClick :( UIButton *) button {for (NSString * func in self. functionDic. allKeys) {UIButton * btn = self. functionDic [func]; if ([btn isEqual: button]) {// OC calls the JS method. Here is the two btnClick and btnClick2 [self. jsContext [func] callWithArguments: nil]; break ;}}# pragma mark-Private-(CGRect) CGRectWithDic :( NSDictionary *) dic {CGFloat x = [dic [@ "x"] floatValue]; CGFloat y = [dic [@ "y"] floatValue]; CGFloat width = [dic [@ "width"] floatValue]; CGFloat height = [dic [@ "height"] floatValue]; return CGRectMake (x, y, width, height);} @ end