Weex系列二、显示图片

上次我们创建了一个简单的Weex的demo。

一、常用的类

WXSDKEngine：SDK开放的绝大多数接口都在此有声明。

WXLog: 用来打印日志。

WXDebugTool: weex提供的对外调试工具。

WXAppConfiguration: 使用weex开发的业务性配置。

二、添加图片

1、浏览器查看
建议大家可以看下阿里团队的weex文章。
在上篇的helloweex.we 中的div标签中 加入图片image标签和thumbnail样式，全部代码：

运行weex helloWeex.we 后，效果如下：

图片显示

2、iOS端显示图片
我们执行 weex helloWeex.we -o helloWeex.js 。然后把生成的helloWeex.js 替换到项目中。
然后在iPhone上运行 会发现 图片并没有显示出来。
首先我们新建一个 WXImageDownloader 类，用来实现图片下载协议WXImgLoaderProtocol。

代码如下：

#import 

@interface WXImageDownloader : NSObject 

@end

在.m文件中实现WXImgLoaderProtocol协议的downloadImageWithURL方法。用SDWebImage下载图片。

#import "WXImageDownloader.h"
#import 

@implementation WXImageDownloader

- (id)downloadImageWithURL:(NSString *)url
                                          imageFrame:(CGRect)imageFrame
                                            userInfo:(NSDictionary *)options
                                           completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock {
    return (id)
        [[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url]
                                                        options:0
                                                       progress:^(NSInteger receivedSize, NSInteger expectedSize)
        {
                                                           
        } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL)
        {
            if (completedBlock) {
                completedBlock(image, error, finished);
            }
        }];
}

@end

然后在AppDelegate中注册Handler:

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

运行后的效果为：

图片展示

源代码的地址还是 上篇文章中的github地址。