阿里weex研究iOS（零）從0開始跑helloword

環境安裝

1、安裝nodejs https://nodejs.org/en/ 安裝完後就可以使用npm命令了

2、npm切換到淘寶鏡像 https://npm.taobao.org/

3、安裝weex環境 參考http://alibaba.github.io/weex/doc/tutorial.html

1）npm install -g weex-toolkit

2）在命令行輸入weex，回車檢查安裝是否成功

4、安裝cocoapods 

1）gem安裝、更新 https://rubygems.org/pages/download

2）gem切換淘寶鏡像

source -r https://rubygems.org/
source -a https://ruby.taobao.org
驗證：$ gem sources -l  
正常的輸出結果：
CURRENT SOURCES　　　　　　　　　　　　

http://ruby.taobao.org/

3）安裝cocoapods

sudo gem install -n /usr/local/bin cocoapods 

如果報錯自己百度啦

項目初始化

1、沒有現成的工程的話新建ios項目

命令行cd到項目根目錄 執行 pod init，會創建一個pod配置文件

用編輯器打開，加上 pod 'WeexSDK', :path=>'./sdk/'

下載最新的weexSDK https://github.com/alibaba/weex

在ios目錄下有個sdk文件夾，把它複製到ios項目根目錄，和podFile裏配置的路徑一致

關掉xcode，在當前目錄，命令行執行pod install，

現在項目目錄變成了這樣，以後點擊xcworkspace文件打開項目

創建一個新目錄weex，命令行cd到weex目錄，執行weex init，會提示你輸入項目名稱

自動創建的文件：

在當前目錄命令行執行npm install，安裝依賴庫

創建一個文件夾js，命令行執行weex src -o js生成最終需要的js文件

也可以weex src/main.we在瀏覽器預覽

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

加載weex頁面

xcode打開workspace項目文件

打開AppDelegate.m添加一下內容

將之前創建的js文件夾拖到xcode工程的文件列表

效果是這樣的

weex視圖控制器的初始化

ViewController.h:

//
//  ViewController.h
//  weexDemo3
//
//  Created by admin on 16/8/3.
//  Copyright © 2016年 admin. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
- (instancetype)initWithJs:(NSString *)filePath;
@end

ViewController.m:

//
//  ViewController.m
//  weexDemo3
//
//  Created by admin on 16/8/3.
//  Copyright © 2016年 admin. 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{
    NSURL *jsUrl;
}

- (instancetype)initWithJs:(NSString *)filePath
{
    self = [super init];
    if (self) {
        //遠程js文件
//        NSString *path=[NSString stringWithFormat:@"http://192.168.232.13:8080/examples/js/%@",filePath];
        //本地js文件
                NSString *path=[NSString stringWithFormat:@"file://%@/js/%@",[NSBundle mainBundle].bundlePath,filePath];
        NSLog(@"-----path:%@",path);
        jsUrl=[NSURL URLWithString:path];
    }
    return self;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    _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(@"加載完成");
    };
    if (!jsUrl) {
        return;
    }
    [_instance renderWithURL: jsUrl];
    self.view.backgroundColor=[UIColor whiteColor];
}

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

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

@end

再打開AppDelegate.m創建導航控制器

引入頭文件

#import "ViewController.h"

創建導航視圖：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //weex
    [self initWeex];
    ViewController *vc=[[ViewController alloc]initWithJs:@"main.js"];
    UINavigationController *nav=[[UINavigationController alloc]initWithRootViewController:vc];
    self.window.rootViewController=nav;
    return YES;
}

運行

圖片不顯示是因爲圖片加載需要自己創建模塊，可以直接把demo的代碼和pod配置粘過來使用

參考代碼：http://download.csdn.net/detail/d200820205051/9594100