Weex 全知道

安装环境和简单独立测试

1 Mac上直接通过Homebrew安装Node：brew install node
2 安装Weex CLI环境：npm install -g weex-toolkit
3 检测当前Weex版本，并确保版本号大于0.1.0：weex --version 
4 创建一个后缀名为we的文件,如：xxxx.we 在命令行执行：weex xxxxx.we 会看到网页自动弹出界面,且自动生成一个weex_tmp的文件夹包括了这个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 发现地址栏内容如：http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=Hellow.js&loader=xhr 其中有个hot_reload_...... 这个标志着可以实时自动刷新 

集成到iOS项目

1 cd到iOS项目root目录
2 从官方Git中下载源码并将其中 ios/sdk 目录完整拷贝到root目录
3 touch Podfile 并 open -e Podfile 进行编辑

Podfile内容：

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

4 pod install 后完成weex集成
5 iOS项目中代码配置weex运行环境

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 启动前面创建的xxxxx.we文件对应的 weex服务器进行关联才能调试,从而拿到根据终端的IP地址提示拷贝到工程里的请求路径里并拼接xxxxx.we文件名：weex -s .       
7 附加：（可能会想把we转为js文件放到工程中，可仿造上面在Desktop目录下创建一个文件夹，cd到该文件夹后执行：weex init自动生成一些js,json,we,src,html等必备文件，后在当前目录命令行执行npm install，安装依赖库，之后于当前目录下创建一个文件夹名为js，并命令行执行：weex src -o js 生成js文件到该js文件夹里）

高级进阶

1 发现xxxxx.we里的图片显示不到iOS上，因为Weex SDK没有提供图片下载功能。
2 自定义遵行< WXImgLoaderProtocol >协议的图片下载类 在实现中返回一个id<WXImageOperationProtocol>对象就行了，因此可以灵活的指定第三方图片下载工具比如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 图片下载器并非默认支持，自定义后需要注册我们的Handler类给Weex,
[WXSDKEngine registerHandler:[WeexImageDownloader new] withProtocol:@protocol(WXImgLoaderProtocol)];

4 自定义UI组件Component

[WXSDKEngine registerComponent:@"weex-button" withClass:[WeexButton class]]; 
以后就能在xxxxx.we中使用<weex-button>标签
<weex-button class="button" title="hello"></weex-button>

标签的属性也是可以设置的，调用父类的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等属性来改变文字等属性了。

5 自定义Module

需要遵循WXModuleProtocol协议；
需要合成（synthesize）weexInstance属性；
使用WX_EXPORT_METHOD来暴露API；
使用WXModuleCallback进行回调；

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

并注册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>