本文主要介紹包括iOS上整合Weex、iOS上擴充套件元件、iOS上擴充套件module

iOS上整合Weex

整合weex，需要WeexSDK、WXDevtool兩個庫以及阿里未開源的ATSDK-Weex。

目前官方的alibaba/Weex倉庫裡面

    pod 'WeexSDK', :path=>'../sdk/'
    pod 'WXDevtool', :path=>'../WXDevtool/'
    pod 'ATSDK-Weex', '0.0.1'

它們直接使用的weex倉庫的sdk,但是weex主倉庫的WXDevtool已經不維護了，需要替換成，

另外也可以直接從cocoapods的源pod倉庫，但是cocoapods的源都是打包成framwork,很多檔案並沒有設定為public，所以導致很多標頭檔案沒有暴露出來。

當然你也可以不用通過cocoapods整合，直接把程式碼拉進工程就可以，如果發生

Unknown type name 'NSString'

你可能需要把layout.c檔案右側的type改為Objective-C Source，或者直接修改為layout.m。

基本上JS頁面是在WXDemoViewController工作的，你可能需要接收頁面重新整理的通知，以支援實時重新整理

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationRefreshInstance:) name:@"RefreshInstance" object:nil];

頁面會維護一個WXSDKInstance例項，WXSDKInstance就是weex渲染的例項物件，提供了很多頁面渲染相關的介面，比如renderWithURL、refreshInstance、destroyInstance等

iOS上擴充套件元件

目前官方iOS這一塊元件的程式碼在WeexSDK的component裡面，元件有限，只有image，list，scroller等，如果想要實現自己的元件，首先需要繼承WXComponent類。

然後實現方法

- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{}

注意這個方法不在主執行緒，這裡面接收一些js傳過來的引數，以在js端寫的image標記為例子

<image style="width: 100;height: 100;margin-top:20;margin-right:20;margin-left:220" src=></image>

到objc端就是

ref:701
type:image
styles:
{
    height = 100;
    marginLeft = 220;
    marginRight = 20;
    marginTop = 20;
    width = 100;
}
attributes:
{
    src = "https://avatars.githubusercontent.com/u/9892522?v=3";
}

ref（結點的唯一識別符號）

然後在loadView的時候可能需要返回自己的objc元件

- (UIView *)loadView
{
    return [[WXImageView alloc] init];
}

然後你可以通過複寫addEvent方法來增加一個change（UIControlEventValueChanged）、click（UIControlEventTouchUpInside）等事件

如果是image元件的話，你可能需要接收圖片地址，這個時候需要通過實現了WXImgLoaderProtocol的WXImgLoaderDefaultImpl來處理，WXImgLoaderDefaultImpl實現了downloadImageWithURL方法，這裡面通過SDWebImage來下載一張圖片。

iOS上擴充套件module

這一塊的程式碼在module分組裡面，包括網路庫stream，持久化storage等，你可以擴充套件自己module。

需要做的是實現WXModuleProtocol協議，並且寫自己的方法就可以了，這裡需要通過weex的巨集把需要public的方法匯出

WX_EXPORT_METHOD(@selector(fetch:callback:progressCallback:))

在module中目前是沒有view的，但是你可以通過由js傳過來的ref值拿到

    WXComponent *targetComponent = [self.weexInstance componentForRef:nodeRef];
    CALayer *layer = targetComponent.layer;
    UIView *view = targetComponent.view;

注意點

1.如果設定js檔案在bundle中載入的話，需要把build的js檔案拖入工程，如果的你的we裡面一開始就呼叫了js檔案，由於只會buildwe檔案，所以還需要把之前的js檔案拖入工程，另外examples裡面判斷iOSAssets是這樣的

      var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;

你如果拖入自己的工程需要把WeexDemo.app的判斷去掉