weex起航

一、搭建开发环境
Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要 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 项目：
ForgetFairy:Desktop ForgetFairy$ weex init anwsome-project

二、开发
之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。
在 package.json 中，已经配置好了几个常用的 npm script，分别是：

build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启静态服务器
debug: 调试模式

我们先通过npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

初始化时已经为我们创建了基本的示例，我们可以在 src/foo.vue 中查看。

weex-toolkit 支持预览你当前开发的weex页面(.we或者.vue)，你只需要指定预览的文件路径即可：
weex src/foo.vue

打包weex项目
如果开发完成后，你可以使用 weex compile 通过命令行工具进行单个文件或者整个项目的打包。

weex compile src/foo.vue dist
命令行需要两个参数，你的源码文件或者目录， 以及你生成打包后的目录地址。

三、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为创建的demo生成的js文件