IOS中Hybird實現

如今Hybird這塊，網上也有不少文章，最近研究了下，分享給你們。

什麼是Hybird技術？

一、通常是指WebView和Native技術混合而成的一套技術方案

二、也能夠理解成，非Native技術與Native技術的混合開發

如今的Hybird有幾種實現方式：

一、UIWebView、WKWebView 直接使用的是網頁與OC交互(cordova與phonegap是使用該方案)（本文沒有對該方案進行講解）

二、數據驅動、腳本驅動（RN、微信小程序用的好像都是這種原理）

如今對於使用了webView實現的hybird技術你們都知道它的優點與劣勢

優點是 能夠熱更新，直接WEB前端人員也能開發，擅長複雜的內容排版

劣勢是 體驗沒有原生應用流暢

本文重點是說 數據驅動、腳本驅動，好處是能熱更新，體驗也更好，由於它都是生成原生應用，和WebView徹底不同

什麼是數據驅動？

數據驅動說的是 咱們App經過下載服務器端的json文件(裏面定義了咱們的UI佈局樣式，簡單的業務功能)而後本地解析動態建立相應的UI。

什麼是腳本驅動？

腳本驅動說的是 經過OC中的JavaScriptCore實現JS與OC的交互，一些簡單的功能能放到JS中處理。

效果演示

默認打開效果：

 

點擊測試1按鈕的效果：

 

點擊測試2按鈕的效果：

 

 

以上的這些UI佈局及功能都是動態寫在 json與js 文件裏面的 

具體代碼演示

由於咱們爲了方便演示，我這裏沒有搭建WEB服務器，因此json文件就直接放在APP裏面，咱們先建立 page.json 和 page.js 文件 

分別以下：

能夠看得出來，咱們這個json文件裏面的數據定義了一些UI的相關屬性，注意button裏面的那個onClicked，對應的是下面page.js裏面的js方法

 

這裏面的 updateLabelText 方法是咱們App裏面定義好的，下面咱們來看App裏

//
//  ViewController.m
//  hybirdDemo
//
//  Created by xgao on 17/3/3.
//  Copyright © 2017年 xgao. All rights reserved.
//

#import "ViewController.h"
//@import JavaScriptCore;
#import <JavaScriptCore/JavaScriptCore.h>

// 數據驅動、腳本驅動
@interface ViewController ()

// 用於執行JS的上下文
@property (nonatomic,strong) JSContext* jsContext;
// 保存按鈕的點擊事件的方法名
@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{
    
    // 加載JSON數據
    NSString* pageJsonPath = [[NSBundle mainBundle] pathForResource:@"page" ofType:@"json"];
    NSData* pageJsonData = [NSData dataWithContentsOfFile:pageJsonPath];
    NSDictionary* pageJsonDic = [NSJSONSerialization JSONObjectWithData:pageJsonData options:NSJSONReadingAllowFragments error:nil];
    
    NSArray<NSDictionary*>* views = pageJsonDic[@"views"];
    for (NSDictionary* view in views) {
        // 解析UI
        if ([view[@"class"] isEqualToString:@"label"]) {    // UILabel
           
            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"] isEqualToString:@"button"]){   // UIButton
            
            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];
            // 添加到事件字典中,btnClick
            [self.functionDic setObject:button forKey:view[@"onClicked"]];
            [self.view addSubview:button];
        }
    }
}

// 初始化JSContext
- (void)initJSContext{
    
    self.jsContext = [[JSContext alloc]init];
    
    // 加載 page.js 腳本文件
    NSString* pageJsPath = [[NSBundle mainBundle] pathForResource:@"page" ofType:@"js"];
    NSString* pageJs = [NSString stringWithContentsOfFile:pageJsPath encoding:NSUTF8StringEncoding error:nil];
    // 執行JS腳本，將JS代碼注入到 上下文中
    [self.jsContext evaluateScript:pageJs];
    
    // 定義updateLabelText方法，用於JS調用OC
    __weak ViewController* weakSelf = self;
    self.jsContext[@"updateLabelText"] = ^(NSString* text,NSInteger tag){
        UILabel* label = [weakSelf.view viewWithTag:tag];
        label.text = text;
    };
}

// button按鈕點擊通用事件
- (void)buttonClick:(UIButton*)button{
    
    for (NSString* func in self.functionDic.allKeys) {
        UIButton* btn = self.functionDic[func];
        if ([btn isEqual:button]) {
            // OC 調用 JS 方法，這裏就是 OC調用JS定義的那兩個 btnClick 和 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