一、搭建開發(fā)環(huán)境
Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發(fā)和調(diào)試。首先，你需要 Node.js 和 Weex CLi。
$ npm install -g weex-toolkit
安裝完成后

ForgetFairy:Desktop ForgetFairy$ weex -v
   v1.0.5
 - weex-builder : v0.2.6
 - weex-previewer : v1.3.8
初始化 Weex 項(xiàng)目：
ForgetFairy:Desktop ForgetFairy$ weex init anwsome-project

二、開發(fā)
之后我們進(jìn)入項(xiàng)目所在路徑，weex-toolkit 已經(jīng)為我們生成了標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)。
在 package.json 中，已經(jīng)配置好了幾個(gè)常用的 npm script，分別是：

build: 源碼打包，生成 JS Bundle
dev: webpack watch 模式，方便開發(fā)
serve: 開啟靜態(tài)服務(wù)器
debug: 調(diào)試模式

我們先通過npm install 安裝項(xiàng)目依賴。之后運(yùn)行 npm run dev 和 npm run serve 開啟watch 模式和靜態(tài)服務(wù)器。

然后我們打開瀏覽器，進(jìn)入 http://localhost:8080/index.html 即可看到 weex h5 頁面。

初始化時(shí)已經(jīng)為我們創(chuàng)建了基本的示例，我們可以在 src/foo.vue 中查看。

weex-toolkit 支持預(yù)覽你當(dāng)前開發(fā)的weex頁面(.we或者.vue)，你只需要指定預(yù)覽的文件路徑即可：
weex src/foo.vue

打包weex項(xiàng)目
如果開發(fā)完成后，你可以使用 weex compile 通過命令行工具進(jìn)行單個(gè)文件或者整個(gè)項(xiàng)目的打包。

weex compile src/foo.vue dist
命令行需要兩個(gè)參數(shù)，你的源碼文件或者目錄， 以及你生成打包后的目錄地址。

三、hello weex

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

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.window makeKeyAndVisible];
    self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:[[ViewController alloc] init]];
    
    //business configuration
    [WXAppConfiguration setAppGroup:@"AliApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
   
    [WXSDKEngine initSDKEnvironment];
    [WXLog setLogLevel: WXLogLevelAll];
    
    return YES;
}

#import "ViewController.h"
#import <WeexSDK/WXSDKInstance.h>

@interface ViewController ()

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

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"hello weex";
    
    _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(@"處理失敗%@", error);
    };
    
    _instance.renderFinish = ^ (UIView *view) {
        NSLog(@"渲染完成");
    };
    
    
    [_instance renderWithURL:self.url options:@{@"bundleUrl": [self.url absoluteString]} data:nil];

}

-(WXSDKInstance *)instance{
    if (_instance == nil) {
        _instance = [[WXSDKInstance alloc] init];
        _instance.viewController = self;
        _instance.frame = self.view.frame;
        [_instance renderWithURL: self.url];
    }
    return _instance;
}

-(NSURL *)url{
    if (_url == nil) {
        _url = [NSURL URLWithString:[NSString stringWithFormat:@"file://%@/hello.js", [NSBundle mainBundle].bundlePath]];
    }
    return _url;
}

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

其中hello.js為創(chuàng)建的demo生成的js文件