上次我们创建了一个简单的Weex的demo。
一、常用的类
WXSDKEngine：SDK开放的绝大多数接口都在此有声明。WXLog: 用来打印日志。WXDebugTool: weex提供的对外调试工具。WXAppConfiguration: 使用weex开发的业务性配置。
二、添加图片
1、浏览器查看
建议大家可以看下阿里团队的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 后，效果如下：
图片显示
2、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地址。