Weex系列2、顯示圖片

上次咱們建立了一個簡單的Weex的demo。

1、經常使用的類

WXSDKEngine：SDK開放的絕大多數接口都在此有聲明。

WXLog: 用來打印日誌。

WXDebugTool: weex提供的對外調試工具。

WXAppConfiguration: 使用weex開發的業務性配置。

2、添加圖片

一、瀏覽器查看
建議你們能夠看下阿里團隊的weex文章。
在上篇的helloweex.we 中的div標籤中 加入圖片image標籤和thumbnail樣式，所有代碼：

<template>
  <div>
    <image class="thumbnail" src="https://img.alicdn.com/tps/TB15vyaLpXXXXXXXFXXXXXXXXXX-198-46.png"></image>
    <text class="title" onclick="onClickTitle">Hello Weex</text>
  </div>
</template>

<style>
  .title { color: red; }
  .thumbnail { width: 100; height: 30; }
</style>

<script>
  module.exports = {
    methods: {
      onClickTitle: function (e) {
        console.log(e);
        alert('title clicked.');
      }
    }
  }
</script>

運行weex helloWeex.we 後，效果以下：

二、iOS端顯示圖片
咱們執行 weex helloWeex.we -o helloWeex.js 。而後把生成的helloWeex.js 替換到項目中。
而後在iPhone上運行 會發現 圖片並無顯示出來。
首先咱們新建一個 WXImageDownloader 類，用來實現圖片下載協議WXImgLoaderProtocol。

代碼以下：

#import <WeexSDK/WeexSDK.h>

@interface WXImageDownloader : NSObject <WXImgLoaderProtocol>

@end

在.m文件中實現WXImgLoaderProtocol協議的downloadImageWithURL方法。用SDWebImage下載圖片。

#import "WXImageDownloader.h"
#import <SDWebImage/SDWebImageManager.h>

@implementation WXImageDownloader

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url
                                          imageFrame:(CGRect)imageFrame
                                            userInfo:(NSDictionary *)options
                                           completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock {
    return (id<WXImageOperationProtocol>)
        [[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地址。