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/[email protected]',
      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 '[email protected]: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