本文主要介紹包括iOS上整合Weex、iOS上擴充套件元件、iOS上擴充套件module
iOS上整合Weex
整合weex，需要WeexSDK、WXDevtool兩個庫以及阿里未開源的ATSDK-Weex。
目前官方的alibaba/Weex倉庫裡面
|
1 2 3 4 |
pod 'WeexSDK', :path=>'../sdk/' pod 'WXDevtool', :path=>'../WXDevtool/' pod 'ATSDK-Weex', '0.0.1' |
它們直接使用的weex倉庫的sdk,但是weex主倉庫的WXDevtool已經不維護了，需要替換成，weexteam/weex-devtool-iOS的程式碼。
另外也可以直接從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等
weex SDK 整合到工程 (integrate to ios)
iOS上擴充套件元件
目前官方iOS這一塊元件的程式碼在WeexSDK的component裡面，元件有限，只有image，list，scroller等，如果想要實現自己的元件，首先需要繼承WXComponent類。
然後實現方法
|
1 2 3 |
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {} |
注意這個方法不在主執行緒，這裡面接收一些js傳過來的引數，以在js端寫的image標記為例子
|
1 2 3 |
<code> <image style="width: 100;height: 100;margin-top:20;margin-right:20;margin-left:220" src=""/> </code> |
到objc端就是
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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元件
|
1 2 3 4 5 |
- (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的方法匯出
|
1 2 |
WX_EXPORT_METHOD(@selector(fetch:callback:progressCallback:)) |
在module中目前是沒有view的，但是你可以通過由js傳過來的ref值拿到
|
1 2 3 4 |
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是這樣的
|
1 2 |
var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0; |
你如果拖入自己的工程需要把WeexDemo.app的判斷去掉