🐱[Weex] 二、已有iOS项目中集成Weex

【前言】

假使我们已经创建了iOS工程，甚至已经开发了一部分原生页面，此时向工程中引入Weex也是相当简单的。

1. 使用cocoapods导入需要的SDK

platform :ios, '8.0'

target 'HelloWeex_iOS' do

    pod 'SDWebImage', '~> 3.7.5'
    pod 'WeexSDK', '~> 0.18.0'
    
end

由于WeexSDK没有提供图片下载能力，我们使用SDWebImage来实现图片的加载。

---

2. 初始化WeexSDK

#import "AppDelegate.h"

// weex 相关
#import <WeexSDK/WeexSDK.h>

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

    [self init_weex];
    
    return YES;
}

#pragma mark weex配置
- (void)init_weex {
    
    // 设置基本信息（AppGroup、AppName、AppVersion等）
    [WXAppConfiguration setAppGroup:@"Group"];
    [WXAppConfiguration setAppName:@"HelloWeex_iOS"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    
    // 初始化
    [WXSDKEngine initSDKEnvironment];

    // 这里可以添加一些iOS的扩展功能
  
    // 设置log类型（可以人性化的设置log输出的类型，减少不必要的log打印）        
    [WXLog setLogLevel:WXLogLevelInfo];

}

在AppDelegate中对weex进行初始化，这里只是完成了基本的初始化，开发过程中我们需要对iOS进行功能上的扩展，这一部分将在下一节介绍。

---

3. 创建Weex View的父容器

#import "WeexViewController.h"
#import "WXSDKInstance.h"

@interface WeexViewController ()

@property (nonatomic, strong) UIView *weexView;
@property (nonatomic, strong) WXSDKInstance *instance;
@end

@implementation WeexViewController

- (instancetype)init {
    if (self = [super init]) {
        //加载初始化数据
        [self doInit];
    }
    return self;
}

- (void)doInit {
    
}

- (void)setUpUI {
    
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setUpUI];
    
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    
    // 加载weex
    [self render];
}

#pragma mark ---------- 私有方法     ----------
//加载weex
- (void)render
{
    // 先销毁之前的_instance
    [_instance destroyInstance];
    
    // 实例化_instance
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    
    // 设置_instance的frame（根据需要设置）
    _instance.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
    
    __weak typeof(self) weakSelf = self;
    //开始加载
    _instance.onCreate = ^(UIView *view) {
        
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
        UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, weakSelf.weexView);
    };
    
    //加载中...
    _instance.onRenderProgress = ^(CGRect renderRect) {
        
    };
    
    //加载完成
    _instance.renderFinish = ^(UIView *view) {
        
    };
    
    //刷新完成
    _instance.updateFinish = ^(UIView *view) {
        
    };
    
    //js加载失败
    _instance.onJSRuntimeException = ^(WXJSExceptionInfo * jsException) {
        
        NSString *exceptionInfo = [NSString stringWithFormat:@"bundleUrl: %@\nbundleUrl: %@", jsException.bundleUrl, jsException.exception];
    };
    
    //加载失败
    _instance.onFailed = ^(NSError *error) {
        
        if ([[error domain] isEqualToString:@"1"]) {
            dispatch_async(dispatch_get_main_queue(), ^{
                
                NSMutableString *errMsg=[NSMutableString new];
                [errMsg appendFormat:@"ErrorType:%@\n",[error domain]];
                [errMsg appendFormat:@"ErrorCode:%ld\n",(long)[error code]];
                [errMsg appendFormat:@"ErrorInfo:%@\n", [error userInfo]];
            });
        } else {
            
        }
    };
    
    _instance.viewController = self;
    
    // 取得Weex加载的js地址
    NSString *weexUrl = @"";
    // 取得要传到Weex界面的值
    NSDictionary *options = @{};
    
    [_instance renderWithURL:[NSURL URLWithString: weexUrl] options:@{@"options": options == nil ? @{} : options} data:nil];
     
}

@end

我们可以通过weex的回调，来进行一些特殊处理。

---

🐱 以上就是向已有的iOS工程中引入weex的过程，相对来说还是比较简单的，在下一节中，我将介绍如何扩展iOS的功能。