WEEX（1）ios集成WEEX入门案例

WEB环境

（1）先安装开发环境
参考官方环境搭建手册：http://weex.apache.org/cn/guide/set-up-env.html
（2）新建Web工程

weex init testweex

（3）安装依赖库

npm install

（4）编码，修改src文件夹下的foo.vue

<template>
  <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
  </div>
</template>

<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { font-size: 48px; }
  .logo { width: 360px; height: 82px; }
</style>

<script>
  export default {
    data: {
      logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

（5）运行项目
在项目文件夹下执行：

npm run dev
npm run serve

或者直接对文件执行：

weex src/foo.vue

别问我这两种方式有什么不同，做iso的，对node工程不太熟悉，后续补上。
（6）浏览器访问工程
第一种运行工程，直接访问http://localhost:8080/index.html
第二种运行工程，会自动打开浏览器并访问地址：http://10.10.1.17:8081/?hot-reload_controller&page=foo.js&loader=xhr&wsport=8082&type=vue

IOS环境

（1）新建ios工程testweex
（2）集成WeexSDK
集成方式参考官方文档http://weex.apache.org/cn/guide/integrate-to-your-app.html
有两种集成方式，都是使用cocoaPods，一种是集成framework，一种是源码集成。
cocoaPods的安装使用可参考：http://code4app.com/article/cocoapods-install-usage
我使用的是集成framework方式，集成后引用头文件可能会报错找不到文件，解决方方请参考：http://blog.sina.com.cn/s/blog_864456e50101eyic.html
（3）AppDelegate集成代码

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    //business configuration
    [WXAppConfiguration setAppGroup:@"AliApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    //init sdk enviroment
    [WXSDKEngine initSDKEnvironment];
    //set the log level
    [WXLog setLogLevel: WXLogLevelAll];
    return YES;
}

（4）新建WeexViewController用来加载Web页面

#import "WeexViewController.h"
#import "WeexSDK.h"

@interface WeexViewController ()

@property (nonatomic, strong) WXSDKInstance *weexSDK;

@end

@implementation WeexViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    self.weexSDK.viewController = self;
    self.weexSDK.frame = self.view.frame;

    NSString *str = [NSString stringWithFormat:@"http://%@:8081/%@", @"10.10.1.17", @"foo.weex.js"];
    [self.weexSDK renderWithURL:[NSURL URLWithString:str]];

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

- (WXSDKInstance *)weexSDK {
    if (!_weexSDK) {
        _weexSDK = [WXSDKInstance new];
    }
    return _weexSDK;
}

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

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

（5）运行模拟器

发现图片加载不出来。
（6）加载网络图片，需要用到SDWebImage，修改Podfile

source 'git@github.com:CocoaPods/Specs.git' 
target 'testweex' do
    platform :ios, '7.0' 
    pod 'WeexSDK', '0.9.5'   ## 建议使用WeexSDK新版本
    pod 'SDWebImage', '3.7.5'
end

执行pod install安装SDWebImage。
（7）新建WXImgLoaderDefaultImpl，实现图片加载

#import <Foundation/Foundation.h>
#import "WXImgLoaderProtocol.h"

@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>
@end

#import "WXImgLoaderDefaultImpl.h"
#import <SDWebImage/UIImageView+WebCache.h>

#define MIN_IMAGE_WIDTH 36
#define MIN_IMAGE_HEIGHT 36

#if OS_OBJECT_USE_OBJC
#undef  WXDispatchQueueRelease
#undef  WXDispatchQueueSetterSementics
#define WXDispatchQueueRelease(q)
#define WXDispatchQueueSetterSementics strong
#else
#undef  WXDispatchQueueRelease
#undef  WXDispatchQueueSetterSementics
#define WXDispatchQueueRelease(q) (dispatch_release(q))
#define WXDispatchQueueSetterSementics assign
#endif

@interface WXImgLoaderDefaultImpl()

@property (WXDispatchQueueSetterSementics, nonatomic) dispatch_queue_t ioQueue;

@end

@implementation WXImgLoaderDefaultImpl

#pragma mark -
#pragma mark WXImgLoaderProtocol

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
{
    if ([url hasPrefix:@"//"]) {
        url = [@"http:" stringByAppendingString:url];
    }
    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);
        }
    }];
}

@end

（8）在AppDelegate中实现注册

//此代码用于加载网络图片
    [WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];

（9）运行模拟器，图片显示成功：

（10）再放一张图，这是标标准准的native程序，图片的控件是WXImageView，文字是WXText。

ios客户端的代码：http://download.csdn.net/detail/daleiwang/9797815