MixKit - 轻量级 Hybrid 框架

544 阅读1分钟

1. 项目简介

MixKit 的设计思路主要源自 react-native 以及在前公司参与维护过的一个内部项目,主要解决 H5 与 native 双端之间的通信问题,目前 iOS 与 Android 均已支持。

2. 项目地址

MixKit-iOS
mixkit-android
mixkit-js

3. 解决问题

  1. 向开发者提供最简单的使用方式,同时隐藏复杂的通信逻辑
  2. 解决 WebViewJavascriptBridge 等三方库编写功能易耦合、难维护的问题
  3. 提供足够高的扩展性,如自定义通信数据格式等

4. 代码示例

// iOS 侧
// 1. 使用指定 web 容器
- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    
    _webView = [[MKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
    [self.view addSubview:_webView];
}

// 2. 注册 LogManager 模块
MK_EXPORT_MODULE(LogManager, MKLogManager)

@interface MKLogManager : NSObject <MKBridgeModule>

@end

@implementation MKLogManager

// 3. 注册 logMessage 函数
MK_EXPORT_METHOD(logMessage, logWithParams:callback:)

- (void)logWithParams:(NSDictionary *)params callback:(MKResponseCallback)callback {
    NSLog(@"[logMessage] %@", params[@"msg"]);
    
    NSDictionary *resp = MKResponseMake(MKCallbackCodeSuccess, @"Log Success", nil);
    
    // 4. 回调通知 js 侧
    !callback ?: callback(@[resp]);
}

@end
// JS 侧
// 1. 引入 mix.js 
<script type="text/javascript" src="mix.js"></script>

function logThenCallback() {
    let params = {
        msg: 'Log something here...'
    };

    // 2. 获取 native 侧注入的 module 对象
    let MKLogManager = NativeModules.LogManager;
    
    // 3. 调用 module 下挂载的函数
    MKLogManager.logMessage(params, function (response) {
        MKLogManager.log({msg: 'LOG' + JSON.stringify(response)});
    });
}

5. 项目计划

  1. 支持基于 socketJavaScriptCore 等多种通信方式