安裝環(huán)境和簡(jiǎn)單獨(dú)立測(cè)試

1 Mac上直接通過(guò)Homebrew安裝Node：brew install node
2 安裝Weex CLI環(huán)境：npm install -g weex-toolkit
3 檢測(cè)當(dāng)前Weex版本，并確保版本號(hào)大于0.1.0：weex --version 
4 創(chuàng)建一個(gè)后綴名為we的文件,如：xxxx.we 在命令行執(zhí)行：weex xxxxx.we 會(huì)看到網(wǎng)頁(yè)自動(dòng)彈出界面,且自動(dòng)生成一個(gè)weex_tmp的文件夾包括了這個(gè)h5_render文件夾里的html,js等文件

xxx.we文件格式為三段式 <template>, <style>, <script>：
<template>
  <div>
    <image class="thumbnail" src="http://image.coolapk.com/apk_logo/2015/0817/257251_1439790718_385.png"></image>
    <text class="title" onclick="onClickTitle">Hello Weex</text>
  </div>
</template>

<style>
  .title { color: red; }
  .thumbnail { width: 100; height: 100; }
</style>

<script>
  module.exports = {
    methods: {
      onClickTitle: function (e) {
        console.log(e);
        alert('title clicked.');
      }
    }
  }
</script>

5 發(fā)現(xiàn)地址欄內(nèi)容如：http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=Hellow.js&loader=xhr 其中有個(gè)hot_reload_...... 這個(gè)標(biāo)志著可以實(shí)時(shí)自動(dòng)刷新 

集成到iOS項(xiàng)目

1 cd到iOS項(xiàng)目root目錄
2 從官方Git中下載源碼并將其中 ios/sdk 目錄完整拷貝到root目錄
3 touch Podfile 并 open -e Podfile 進(jìn)行編輯

Podfile內(nèi)容：

platform :ios, ‘8.0’
target ‘WeexPractice’ do
pod ‘WeexSDK’, :path=>’./sdk/’
end

4 pod install 后完成weex集成
5 iOS項(xiàng)目中代碼配置weex運(yùn)行環(huán)境

AppDelegate:

#import <WeexSDK.h>
 [WXAppConfiguration setAppGroup:@"AliApp"];
 [WXAppConfiguration setAppName:@"SevenWeex"];
 [WXAppConfiguration setAppVersion:@"1.0"];
 [WXSDKEngine initSDKEnviroment];
 [WXLog setLogLevel:WXLogLevelAll];

ViewController:

#import <WeexSDK/WXSDKInstance.h>
@property (nonatomic, strong) WXSDKInstance *instanceOh;

NSURL *weexUrl = [NSURL URLWithString:@"http://172.17.16.30:8081/xxxxx.we"];//地址參考下一步
_instanceOh = [[WXSDKInstance alloc] init];
 _instanceOh.viewController = self;
_instanceOh.frame = CGRectMake(0, 100, self.view.frame.size.width, 300);
[_instanceOh renderWithURL:weexUrl options:@{@"bundleUrl": [weexUrl absoluteString]} data:nil];

__weak typeof(self) weakSelf = self;
_instanceOh.onCreate = ^(UIView *view){
    view.backgroundColor = [UIColor redColor];
   [weakSelf.view addSubview:view];
};
_instanceOh.renderFinish = ^(UIView *view) {
 NSLog(@"weexSDK Finished");
};
_instanceOh.onFailed = ^(NSError *error) {
   NSLog(@"weexSDK onFailed : %@\n", error);
};

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

6 啟動(dòng)前面創(chuàng)建的xxxxx.we文件對(duì)應(yīng)的 weex服務(wù)器進(jìn)行關(guān)聯(lián)才能調(diào)試,從而拿到根據(jù)終端的IP地址提示拷貝到工程里的請(qǐng)求路徑里并拼接xxxxx.we文件名：weex -s .       
7 附加：（可能會(huì)想把we轉(zhuǎn)為js文件放到工程中，可仿造上面在Desktop目錄下創(chuàng)建一個(gè)文件夾，cd到該文件夾后執(zhí)行：weex init自動(dòng)生成一些js,json,we,src,html等必備文件，后在當(dāng)前目錄命令行執(zhí)行npm install，安裝依賴(lài)庫(kù)，之后于當(dāng)前目錄下創(chuàng)建一個(gè)文件夾名為js，并命令行執(zhí)行：weex src -o js 生成js文件到該js文件夾里）

高級(jí)進(jìn)階

1 發(fā)現(xiàn)xxxxx.we里的圖片顯示不到iOS上，因?yàn)閃eex SDK沒(méi)有提供圖片下載功能。
2 自定義遵行< WXImgLoaderProtocol >協(xié)議的圖片下載類(lèi) 在實(shí)現(xiàn)中返回一個(gè)id<WXImageOperationProtocol>對(duì)象就行了，因此可以靈活的指定第三方圖片下載工具比如SDWebImage

#import <WeexSDK/WeexSDK.h>
@interface WeexImageDownloader : NSObject <WXImgLoaderProtocol>
@end

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url
                                          imageFrame:(CGRect)imageFrame
                                            userInfo:(NSDictionary *)options
                                           completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock {
    return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
        if (completedBlock) {
            completedBlock(image, error, finished);
        }
    }];
}

3 圖片下載器并非默認(rèn)支持，自定義后需要注冊(cè)我們的Handler類(lèi)給Weex,
[WXSDKEngine registerHandler:[WeexImageDownloader new] withProtocol:@protocol(WXImgLoaderProtocol)];

4 自定義UI組件Component

[WXSDKEngine registerComponent:@"weex-button" withClass:[WeexButton class]]; 
以后就能在xxxxx.we中使用<weex-button>標(biāo)簽
<weex-button class="button" title="hello"></weex-button>

標(biāo)簽的屬性也是可以設(shè)置的，調(diào)用父類(lèi)的initWithRef........方法傳入自定義屬性
- (instancetype)initWithRef:(NSString *)ref
                       type:(NSString*)type
                     styles:(nullable NSDictionary *)styles
                 attributes:(nullable NSDictionary *)attributes
                     events:(nullable NSArray *)events
               weexInstance:(WXSDKInstance *)weexInstance {
    self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance];
    if (self) {
        _title = [WXConvert NSString:attributes[@"title"]];
    }
    return self;
}
之后就能在OC中使用_title等屬性來(lái)改變文字等屬性了。

5 自定義Module

需要遵循WXModuleProtocol協(xié)議；
需要合成（synthesize）weexInstance屬性；
使用WX_EXPORT_METHOD來(lái)暴露API；
使用WXModuleCallback進(jìn)行回調(diào)；

@synthesize weexInstance;
WX_EXPORT_METHOD(@selector(call:withParam:callback:))
- (void)call:(NSString *)api withParam:(NSDictionary *)param callback:(WXModuleCallback)callback {}

并注冊(cè)Module
[WXSDKEngine registerModule:<#(NSString *)#> withClass:<#(__unsafe_unretained Class)#>];

這樣就可以在script中使用：
<script>
  module.exports = {
    methods: {
      onClickTitle: function (e) {
        var mymodule = require('@weex-module/mymodule');
        mymodule.call('api', {}, function(ret) {
        });
      }
    }
  }
</script>