weex只是刚刚起步,还存在一些bug,有些功能还有待完善和提高.但是其使用起来还是可以节省些时间. 这里我们说说如何把weex集成到我们的iOS项目中
1. 下载weex源代码  git clone https://github.com/alibaba/weex.git2. 把根目录下的/ios/sdk整个目录拷贝到项目中

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 安装完毕后如图所示:

关闭你原来的Xcode项目,打开白底的YourProject.xcworkspace,如图:

5. 初始化Weex环境

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

[Objective-C] 纯文本查看 复制代码

//1. 导入框架 ```
#import <WeexSDK.h>
//2.  `WeexSDK`初始化设置
//```objc
//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,然后把它添加到父控件中.

• 导入WXSDKInstance的头文件 objc //导入WXSDKInstance #import <WeexSDK/WXSDKInstance.h>
• 声明属性instance objc
  

[Objective-C] 纯文本查看 复制代码

@interface ViewController ()
 //WXSDKInstance属性 
@property (nonatomic, strong) WXSDKInstance *instance; 
//URL属性(用于指定加载js的URL,一般声明在接口中,我们为了测试方法写在了类扩展中.) 
@property (nonatomic, strong) NSURL *url;
 //Weex视图 
@property (weak, nonatomic) UIView *weexView; 
@end

• 创建WXSDKInstance 对象,并进行相关设置
  

[Objective-C] 纯文本查看 复制代码

//重写viewDidLoad[/align]- (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否则会导致内存泄露 objc - (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文件

2. 把list.js拷贝到你的项目中,并添加到target上.

3. 懒加载weex的js文件的URL

[Objective-C] 纯文本查看 复制代码

- (NSURL *)url {
    if (!_url) {
        _url =  [[NSBundle mainBundle] URLForResource:@"list" withExtension:@"js"];
    }
    return _url;
}

运行项目显示如图:

没有显示图片,是因为对于非Html5的应用Weex本身不负责网络处理,如果你需要加载图片,需要注册一个图片加载器.

9. 自定义图片加载器

• 创建一个类,遵守WXImgLoaderProtocol和WXImageOperationProtocol协议
• 实现协议中的方法,完成图片加载
  

2.1 WXImgLoaderProtocol 必须实现方法:

[Objective-C] 纯文本查看 复制代码

 - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock

2.2 WXImageOperationProtocol

必须实现方法:

[Objective-C] 纯文本查看 复制代码

- (void)cancel

2.3 具体实现(仅供参考)

[Objective-C] 纯文本查看 复制代码

@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.

精华推荐:

黑马程序员：为苹果与iOS开发者的前景正名

与君共勉 --- 记黑马22期同学成长经验。

【持续更新】2016年最全最新的iOS视频+软件+源码+面试/技术

关于iOS 10最新的课程视频及demo第三弹，火速发布了

weex只是刚刚起步,还存在一些bug,有些功能还有待完善和提高.但是其使用起来还是可以节省些时间. 这里我们说说如何把weex集成到我们的iOS项目中
1. 下载weex源代码  git clone https://github.com/alibaba/weex.git2. 把根目录下的/ios/sdk整个目录拷贝到项目中

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 安装完毕后如图所示:

关闭你原来的Xcode项目,打开白底的YourProject.xcworkspace,如图:

5. 初始化Weex环境

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

[Objective-C] 纯文本查看 复制代码

//1. 导入框架 ```
#import <WeexSDK.h>
//2.  `WeexSDK`初始化设置
//```objc
//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,然后把它添加到父控件中.

• 导入WXSDKInstance的头文件 objc //导入WXSDKInstance #import <WeexSDK/WXSDKInstance.h>
• 声明属性instance objc
  

[Objective-C] 纯文本查看 复制代码

@interface ViewController ()
 //WXSDKInstance属性 
@property (nonatomic, strong) WXSDKInstance *instance; 
//URL属性(用于指定加载js的URL,一般声明在接口中,我们为了测试方法写在了类扩展中.) 
@property (nonatomic, strong) NSURL *url;
 //Weex视图 
@property (weak, nonatomic) UIView *weexView; 
@end

• 创建WXSDKInstance 对象,并进行相关设置
  

[Objective-C] 纯文本查看 复制代码

//重写viewDidLoad[/align]- (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否则会导致内存泄露 objc - (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文件

2. 把list.js拷贝到你的项目中,并添加到target上.

3. 懒加载weex的js文件的URL

[Objective-C] 纯文本查看 复制代码

- (NSURL *)url {
    if (!_url) {
        _url =  [[NSBundle mainBundle] URLForResource:@"list" withExtension:@"js"];
    }
    return _url;
}

运行项目显示如图:

没有显示图片,是因为对于非Html5的应用Weex本身不负责网络处理,如果你需要加载图片,需要注册一个图片加载器.

9. 自定义图片加载器

• 创建一个类,遵守WXImgLoaderProtocol和WXImageOperationProtocol协议
• 实现协议中的方法,完成图片加载
  

2.1 WXImgLoaderProtocol 必须实现方法:

[Objective-C] 纯文本查看 复制代码

 - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock

2.2 WXImageOperationProtocol

必须实现方法:

[Objective-C] 纯文本查看 复制代码

- (void)cancel

2.3 具体实现(仅供参考)

[Objective-C] 纯文本查看 复制代码

@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.

精华推荐:

黑马程序员：为苹果与iOS开发者的前景正名

与君共勉 --- 记黑马22期同学成长经验。

【持续更新】2016年最全最新的iOS视频+软件+源码+面试/技术

关于iOS 10最新的课程视频及demo第三弹，火速发布了