Weex的入門
swift 中的weex

1、新建項目

1、命令行cd到項目根目錄 執(zhí)行 pod init，會創(chuàng)建一個pod配置文件.
2、用編輯器打開，加上 pod 'WeexSDK', :path=>'./sdk/'

86DFA444-916E-450B-937C-2E9E3483724F.png

3、下載最新的weexSDK

20160803161139837.png

4、在ios目錄下有個sdk文件夾，把它復(fù)制到ios項目根目錄，和podFile里配置的路徑一致

7B281A19-2B8D-4AE3-A9DE-6A5C5C5FAEF5.png

5、關(guān)掉xcode，在當(dāng)前目錄，命令行執(zhí)行

pod install

0E80C769-9705-4D0F-9239-A53615C0B2E6.png

以后點擊xcworkspace文件打開項目.

6、創(chuàng)建一個新目錄weex，命令行cd到weex目錄，執(zhí)行weex init，會提示你輸入項目名稱,自動創(chuàng)建的文件：

02301B87-9FC4-47A2-9A8A-197D71DEF2C9.png

7、在當(dāng)前目錄命令行執(zhí)行npm install，安裝依賴庫

創(chuàng)建一個文件夾js，命令行執(zhí)行weex src -o js生成最終需要的js文件

也可以weex src/main.we在瀏覽器預(yù)覽

或者weex src/main.we --qr 生成二維碼，用playground App掃描預(yù)覽

加載weex頁面

8、在weex目錄下，在終端開啟服務(wù)器

npm run dev                   //項目編譯
npm run serve                 //啟動輕量服務(wù)器 

詳細(xì)請看WEEX快速入門中初始化程序

2、項目集成

在AppDelegate.m中

//
//  AppDelegate.m
//  LSWeexOCDemo
//
//  Created by John_LS on 2016/11/11.
//  Copyright ? 2016年 John_LS. All rights reserved.
//

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (void)initWeex{
    [WXAppConfiguration setAppName:@"LSWeexOCDemo"];
    [WXAppConfiguration setAppGroup:@"LS"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    
    [WXSDKEngine initSDKEnviroment];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [self initWeex];
    // Override point for customization after application launch.
    return YES;
}


- (void)applicationWillResignActive:(UIApplication *)application {
    // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
    // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
}


- (void)applicationDidEnterBackground:(UIApplication *)application {
    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}


- (void)applicationWillEnterForeground:(UIApplication *)application {
    // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
}


- (void)applicationDidBecomeActive:(UIApplication *)application {
    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}


- (void)applicationWillTerminate:(UIApplication *)application {
    // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}


@end

將要展示js文件放到項目中。

weex視圖控制器的初始化

ViewController.m:

//
//  ViewController.m
//  LSWeexOCDemo
//
//  Created by John_LS on 2016/11/11.
//  Copyright ? 2016年 John_LS. All rights reserved.
//

#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>
@interface ViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) UIView *weexView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame=self.view.frame;
    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        [weakSelf.weexView removeFromSuperview];
        weakSelf.weexView = view;
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    _instance.onFailed = ^(NSError *error) {
        NSLog(@"加載錯誤");
    };
    
    _instance.renderFinish = ^ (UIView *view) {
        NSLog(@"加載完成");
    };
    
    [_instance renderWithURL: [NSURL URLWithString:[NSString stringWithFormat:@"file://%@/hello.js",[NSBundle mainBundle].bundlePath]]];
    self.view.backgroundColor=[UIColor whiteColor];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

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

運行展示的效果如圖：

66FFEFEB-7F4D-4717-BA04-7ABB6062DD5C.png

上面的demo可以直接運行weex服務(wù)器上面的.we文件。

1、在mac上面構(gòu)建weex環(huán)境]
2、創(chuàng)建we文件
以上兩步均在前面的Weex的入門中有提到
3、終端中：cd到we文件的目錄下，通過終端命令weex -s .架起weex服務(wù)器（不要丟掉.）
4、將上面demo中的url換成http://192.168.1.139:8081/list.we,運行可以看到結(jié)果。

Simulator Screen Shot 2016年11月14日 下午4.47.45.png