weex使用记录1

AFEC38C7-BD4C-47A2-BA4A-4E5CD03D9C7B

1.ios接入WeexSDK

利用cocoapod管理

pod 'WeexSDK'

然后在(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions中初始化weex.

- (void)configWeex {
    //business configuration
    [WXAppConfiguration setAppGroup:@"AliApp"];
    [WXAppConfiguration setAppName:@"WeexDemo"];
    [WXAppConfiguration setAppVersion:@"1.0.0"];
    //init sdk environment
    [WXSDKEngine initSDKEnvironment];
    
    [WXSDKEngine registerHandler:[PCImageLoader new] withProtocol:@protocol(WXImgLoaderProtocol)];
    
    //set the log level
    [WXLog setLogLevel: WXLogLevelAll];
}

(这里的registerHandler我还没搞懂是什么意思)

2.在ios跑weex上的helloworld

这是官方的weex helloworld的代码.

我按照文档安装weex-toolkit后,直接在本地运行

weex list.we

然后就出问题了,界面没出来.

D4673C2E-3029-44DC-8230-39C56529BFD7

google搜了下说是toolkit的bug

17569CE0-BB90-4886-9C58-A7D4A49DE98B

有人说新版解决了

6294C1C8-6FC9-4C03-A4DB-0CD2299F35D0

我是今天才使用,已经是最新版了,但是还是有问题.

问了饿了吗的开发(因为他们是用native+weex的),他们建议我用chrome调试下

6FE8CDC4-4217-4E2E-A6AC-C34D8EE1169B

一番折腾后还是不行,不是很熟前端啊...

还好还有替代方案.

使用weex playground的在线编辑

9A92F716-5C96-425A-AB7D-013045515AD7

http://dotwe.org/vue

在线编辑这里可以生成对应的js

686605FE-004A-4EE6-8F15-A9D87BA336D2

把生成的js新建list.js文件然后放到xcode里

然后新建vc文件

#import 

@interface WeexTestViewController ()
@property (nonatomic, strong) WXSDKInstance *instance;
@property (nonatomic, strong) NSURL *url;
@property (weak, nonatomic) UIView *weexView;
@end
@implementation WeexTestViewController

- (void)dealloc {
    [self.instance destroyInstance];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initWeexView];
}

#pragma mark - setters and getters -
- (void)initWeexView {
    _instance = [[WXSDKInstance alloc] init];
    _instance.viewController = self;
    _instance.frame = self.view.frame;
    [_instance renderWithURL:self.url
                     options:@{@"bundleUrl":[self.url absoluteString]}
                        data:nil];
    __weak typeof(self) weakSelf = self;
    _instance.onCreate = ^(UIView *view) {
        weakSelf.weexView = view;
        [weakSelf.weexView removeFromSuperview];
        [weakSelf.view addSubview:weakSelf.weexView];
    };
    _instance.onFailed = ^(NSError *error) {
        NSLog(@"处理失败:%@",error);
    };
    _instance.renderFinish = ^ (UIView *view) {
        NSLog(@"渲染完成");
    };
}

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

@end

这个也是根据文档写的demo.

这样运行,图片是显示不出来的,需要WXImgLoaderProtocol,WXImageOperationProtocol的方法重写

#import 
#import 

@interface PCImageLoader () 
@property (nonatomic, strong) AFHTTPSessionManager *sessionManager;
@property (nonatomic, strong) NSURLSessionDataTask *dataTask;
@end
@implementation PCImageLoader

- (id)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;
}

这个PCImageLoader类就是didFinishLaunchingWithOptions注册的组件

[WXSDKEngine registerHandler:[PCImageLoader new] withProtocol:@protocol(WXImgLoaderProtocol)];

终于在ios上显示出来了