上次我們創(chuàng)建了一個(gè)簡(jiǎn)單的Weex的demo。
一、常用的類(lèi)
WXSDKEngine：SDK開(kāi)放的絕大多數(shù)接口都在此有聲明。
WXLog: 用來(lái)打印日志。
WXDebugTool: weex提供的對(duì)外調(diào)試工具。
WXAppConfiguration: 使用weex開(kāi)發(fā)的業(yè)務(wù)性配置。
二、添加圖片
1、瀏覽器查看
建議大家可以看下阿里團(tuán)隊(duì)的weex文章。
在上篇的helloweex.we 中的div標(biāo)簽中 加入圖片image標(biāo)簽和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>
運(yùn)行weex helloWeex.we 后，效果如下：
圖片顯示
2、iOS端顯示圖片
我們執(zhí)行 weex helloWeex.we -o helloWeex.js 。然后把生成的helloWeex.js 替換到項(xiàng)目中。
然后在iPhone上運(yùn)行 會(huì)發(fā)現(xiàn) 圖片并沒(méi)有顯示出來(lái)。
首先我們新建一個(gè) WXImageDownloader 類(lèi)，用來(lái)實(shí)現(xiàn)圖片下載協(xié)議WXImgLoaderProtocol。
代碼如下：
#import <WeexSDK/WeexSDK.h>
@interface WXImageDownloader : NSObject <WXImgLoaderProtocol>
@end
在.m文件中實(shí)現(xiàn)WXImgLoaderProtocol協(xié)議的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中注冊(cè)Handler:
[WXSDKEngine registerHandler:[WXImageDownloader new] withProtocol:@protocol(WXImgLoaderProtocol)];
運(yùn)行后的效果為：
圖片展示
源代碼的地址還是 上篇文章中的github地址。
