weex-iOS集成

weex只是剛剛起步,還存在一些bug,有些功能還有待完善和提高.但是其使用起來還是可以節省些時間. 這里我們說說如何把weex集成到我們的iOS項目中

1. 下載weex源代碼

  git clone https://github.com/alibaba/weex.git

2. 把根目錄下的/ios/sdk整個目錄拷貝到項目中

拷貝WeexSDK.png

3. 使用Cocoapods安裝weex;

請確認項目目錄中是否包含該Profile文件.如果沒有通過pod init 創建一個新的.編輯這個文件,添加必要的依賴

   #Weex支持的最低版本是iOS7.0.
    platform :ios, '7.0'
    #指定WeexSDK所在的路徑是`./sdk/`這里的`.`代表`Profile`文件所在目錄
    pod 'WeexSDK', :path=>'./sdk/'

4. 安裝WeexSDK

終端 cd 到 Profile的目錄,然后執行

 pod install

安裝完畢后如圖所示:

cocoapod安裝完畢.png

關閉你原來的Xcode項目,打開白底的YourProject.xcworkspace,如圖:
工程文件.png

5. 初始化Weex環境

我們需要在AppDelegate的didFinishLaunchingWithOptions的方法中做些初始化的操作.

  1. 導入框架
#import <WeexSDK.h>
  1. WeexSDK初始化設置
//1. 項目配置
//1.1 設置組織
[WXAppConfiguration setAppGroup:@"itheimaApp"];
//1.2 設置App的名稱
[WXAppConfiguration setAppName:@"WeexDemo"];
//1.3 設置App的版本號
[WXAppConfiguration setAppVersion:@"1.0.0"];
//2. 初始化`WeexSDK`環境
[WXSDKEngine initSDKEnviroment];
//3. 注冊自定義的組件和模型(可選)  [如果有就注冊如果沒有就不注冊]
//register custom module and component，optional
//[WXSDKEngine registerComponent:@"YourView" withClass:[MyViewComponent class]];
//[WXSDKEngine registerModule:@"YourModule" withClass:[YourModule class]];
//4. 注冊協議的實現,可選
//[WXSDKEngine registerHandler:[WXNavigationDefaultImpl new] withProtocol:@protocol(WXNavigationProtocol)];
//5. 設置日志的級別(默認的日志級別是Info)
[WXLog setLogLevel:WXLogLevelDebug];

6. 渲染Weex實例

weex支持兩種渲染模式,一種是整個界面,一種是界面某一部分.你需要給需要渲染的weex視圖指定特定的URL,然后把它添加到父控件中.

  1. 導入WXSDKInstance的頭文件
//導入WXSDKInstance
#import <WeexSDK/WXSDKInstance.h>
  1. 聲明屬性instance 
@interface ViewController ()
//WXSDKInstance屬性
@property (nonatomic, strong) WXSDKInstance *instance;
//URL屬性(用于指定加載js的URL,一般聲明在接口中,我們為了測試方法寫在了類擴展中.)
@property (nonatomic, strong) NSURL *url;
//Weex視圖
@property (weak, nonatomic) UIView *weexView;
@end
  1. 創建WXSDKInstance 對象,并進行相關設置
   //重寫viewDidLoad
  - (void)viewDidLoad 
{
    [super viewDidLoad];
  // 創建WXSDKInstance對象
    _instance = [[WXSDKInstance alloc] init];
    // 設置weexInstance所在的控制器
    _instance.viewController = self;
    //設置weexInstance的frame
    _instance.frame = self.view.frame;
    //設置weexInstance用于渲染的`js`的URL路徑(后面說明)
    [_instance renderWithURL:self.url options:@{@"bundleUrl":[self.url absoluteString]} data:nil];
    //為了避免循環引用聲明一個弱指針的`self`
    __weak typeof(self) weakSelf = self;
    //設置weexInstance創建完畢回調
    _instance.onCreate = ^(UIView *view) {
         weakSelf.weexView = view;
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    // 設置`weexInstance`出錯的回調
    _instance.onFailed = ^(NSError *error) {
        //process failure
        NSLog(@"處理失敗:%@",error);
    };
    //設置渲染完成的回調
    _instance.renderFinish = ^ (UIView *view) {
        //process renderFinish
        NSLog(@"渲染完成");
    };
}

WXSDKInstance是一個非常重要的類,它提供的一些基本的方法和回調,比如:renderWithURL、onCreate、onFailed等.

7.銷毀WeexInstance

你需要在控制器的dealloc方法中銷毀WeexInstance否則會導致內存泄露

- (void)dealloc {
//  銷毀WXSDKInstance實例
    [self.instance destroyInstance];
}

8. 加載Weex的js文件.

weex的js文件一般都是從服務器上加載,如果你不想從服務器上加載weex的js文件,你可以把這些js文件拷貝到資源目錄中.

  1. 生成weex的js文件
    終端cd 到 .we文件所在的目錄,然后執行
  weex  list.we -o list.js

其中list.we 是你的頁面對應的weex文件. 在開發中index.we一般指的使用整個App的入口文件. 我們這里使用上一節中創建的 list.we 文件,生成一個list.js文件

  1. 把list.js拷貝到你的項目中,并添加到target上.
    拷貝到項目
  2. 懶加載weex的js文件的URL
  - (NSURL *)url {
      if (!_url) {
          _url =  [[NSBundle mainBundle] URLForResource:@"list"   withExtension:@"js"];
      }
      return _url;
  }

運行項目顯示如圖:

運行

沒有顯示圖片,是因為對于非Html5的應用Weex本身不負責網絡處理,如果你需要加載圖片,需要注冊一個圖片加載器.

9. 自定義圖片加載器

  1. 創建一個類,遵守WXImgLoaderProtocol和WXImageOperationProtocol協議
  2. 實現協議中的方法,完成圖片加載
    2.1 WXImgLoaderProtocol 必須實現方法:
  - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock

2.2 WXImageOperationProtocol 必須實現方法:

  - (void)cancel

2.3 具體實現(僅供參考)

@interface HMImageLoader ()
 ///AFHTTPSessionManager
@property (nonatomic, strong) AFHTTPSessionManager *sessionManager;
///下載任務
@property (nonatomic, strong) NSURLSessionDataTask *dataTask;
@end
@implementation HMImageLoader
  - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock {
    self.dataTask = [self.sessionManager GET:url parameters:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
        NSData *imageData = responseObject;
        UIImage *image = [UIImage imageWithData:imageData];
//      設置圖片的大小
        if (image&&!CGRectEqualToRect(imageFrame, CGRectZero)) {
//         開啟圖片上下文
            UIGraphicsBeginImageContext(imageFrame.size);
//          繪制圖片
            [image drawInRect:imageFrame];
//          取出圖片
            image = UIGraphicsGetImageFromCurrentImageContext();
//          關閉圖形上下文
            UIGraphicsEndImageContext();
        }
//      成功回調
        completedBlock(image,nil,YES);
    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
//      失敗回調
        completedBlock(nil,error,YES);
    }];
    return self;
}
  - (void)cancel {
 //  取消下載任務
    [self.dataTask cancel];
}
  - (AFHTTPSessionManager *)sessionManager {
    if (!_sessionManager) {
        _sessionManager = [AFHTTPSessionManager manager];
        _sessionManager.responseSerializer = [AFHTTPResponseSerializer serializer];
    }
    return _sessionManager;
}
@end

10. 注冊圖片加載器

在Appdelegate中注冊圖片加載器

//   注冊圖片加載器
     [WXSDKEngine registerHandler:[HMImageLoader new] withProtocol:@protocol(WXImgLoaderProtocol)];

運行,顯示結果:


顯示結果

圖片加載出來了.

11. 適配iOS9.0,在info.plist增加如下內容,允許發送不安全的http請求.

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

12. 打包 .ipa文件

使用Xcode的Product -> Archive一步步的做就可以構建你的.IPA文件,上傳到AppStore.

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容