原生的iOS工程局部頁面嵌入weex的view

阿里巴巴開源的[weex][1]，貌似有著很不錯的性能。最近也嘗試了一下。weex SDK 集成到工程。在原生的現(xiàn)有的工程中，一個頁面的頁面的部分區(qū)域使用weex?？戳嗽慕榻B的用法，發(fā)現(xiàn)有些地方并沒有交代清楚?？丛逆溄?[integrate to ios][2]

1. ?如果你沒有iOS開發(fā)的基礎。請，先安裝iOS開發(fā)環(huán)境
   及
   CocoaPods。這里都是官方的安裝方法。看不懂可以自行搜索。其實就是安裝xcode（開發(fā)工具）
   和 CocoaPods（第三方庫管理工具）。
2. 先將weex工程克隆到本地。git clone https://github.com/alibaba/weex.git

3. 克隆完成后，找到weex的工程，應該是這樣的目錄結果，如下圖
   你的路徑/weex/ios/sdk/
4. 打開你的xcode。新建一個iOS工程，取名weexPageDemo。然后將剛剛克隆下來的weex工程下的sdk整個目錄的所有東西都copy到當前目錄下。然后在工程的根目錄新建一個文件Podfile，Podfile內容為：

source 'https://github.com/CocoaPods/Specs.git'
target 'weexPageDemo' do
   platform :ios, '7.0'
   pod 'WeexSDK', :path=>'./sdk/'   #注釋：表示當前目錄下的sdk文件夾
end

然后執(zhí)行 pod install --verbose --no-repo-update

根目錄結構

5. 用xcode打開weexPageDemo.xcworkspace。

   
   
   工程結構圖
6. ?打開AppDelegate.m文件，修改內容

#import "AppDelegate.h"
#import <WeexSDK/WeexSDK.h>
#import "WXEventModule.h"
#import "ViewController.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = [[WXRootViewController alloc] initWithRootViewController:[ViewController new]];
    [self.window makeKeyAndVisible];
   
    [WXAppConfiguration setAppGroup:@"jwDemo"];
    [WXAppConfiguration setAppName:@"weexPageDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    
    //init sdk enviroment
    [WXSDKEngine initSDKEnviroment];
    //這一句代碼很重要，如果沒有，你點擊weex的渲染的view中的按鈕將找不到事件
    [WXSDKEngine registerModule:@"event" withClass:[WXEventModule class]];
    
    [WXLog setLogLevel: WXLogLevelAll];//輸出日志
    return YES;
}

7. 新增加一個類叫WXEventModule，看代碼：

-------------------------.h頭文件內容-------------------
#import <Foundation/Foundation.h>
#import <WeexSDK/WXEventModuleProtocol.h>
#import <WeexSDK/WXModuleProtocol.h>

@interface WXEventModule : NSObject <WXEventModuleProtocol, WXModuleProtocol>
@end
---------------------------------以下是.m文件內容----------
#import "WXEventModule.h"
#import "ViewController.h"
#import <WeexSDK/WXBaseViewController.h>

@implementation WXEventModule

@synthesize weexInstance;

WX_EXPORT_METHOD(@selector(openURL:))

- (void)openURL:(NSString *)url
{
    NSString *newURL = url;
    //注意。真機和模擬器的目錄結構不同，所以替換的字符串就不同，這里自己簡單的進行替換
    newURL = [newURL stringByReplacingOccurrencesOfString:@"http://Users/examples/build/" withString:@"/bundlejs/"];//模擬器的目錄結果
   // newURL = [newURL stringByReplacingOccurrencesOfString:@"http://var/examples/build/" withString:@"/bundlejs/"]; //真機的目錄結構

    newURL = [[[NSBundle mainBundle] bundlePath] stringByAppendingString:newURL];;
    UIViewController *controller = [[ViewController alloc] init];
    ((ViewController *)controller).url = newURL;
    
    [[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
}

@end

8. 在ViewController中的代碼

---------------頭文件
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, copy) NSString *url;

@end

--------------.m文件
@interface ViewController ()

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

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view setBackgroundColor:[UIColor whiteColor]];
    
    //在self.view上添加一個原生的按鈕
    UIButton *testButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 64, 200, 100)];
    [self.view addSubview:testButton];
    [testButton setTitle:@"原生的button" forState:UIControlStateNormal];
    [testButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    
    //默認加載的地址為本地路徑的bundlejs/index.js
    if (!self.url) {
        self.url = [[NSBundle mainBundle] pathForResource:@"bundlejs/index" ofType:@"js"];
    }
    [self render];//weex將js渲染成weex頁面。
}

- (void)render{
    NSURL *URL = [[NSURL alloc] initFileURLWithPath:self.url];
    
    CGFloat width = self.view.frame.size.width;
    [_instance destroyInstance];
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = CGRectMake(self.view.frame.size.width-width, 200, width, self.view.frame.size.height);
    
    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    
    NSString *randomURL = [NSString stringWithFormat:@"%@?random=%d",URL.absoluteString,arc4random()];
    [_instance renderWithURL:[NSURL URLWithString:randomURL] options:@{@"bundleUrl":URL.absoluteString} data:nil];
}

- (void)dealloc{
    [_instance destroyInstance];
}
@end

9. 步驟8中用到了bundlejs/index.js，這個js是從weex/ios/playground/目錄下拖拽過來的，playground目錄下有一個bundlejs。playground文件夾是跟剛剛賦值的sdk文件夾同級，自己去找一下吧。拖拽到工程目錄的時候選擇create folder references。

   
   
   這里寫圖片描述

最后commad+R運行。就可以了。

運行效果圖

這里寫圖片描述

這樣就實現(xiàn)了原生的工程，native頁面為主，局部使用weex的功能了
[1]: https://alibaba.github.io/weex/
[2]: http://alibaba.github.io/weex/doc/advanced/integrate-to-ios.html